鸿蒙应用ArkTS开发-利用axios举行网络请求（实现前后端交互） ...

引言：

   我们上一章实现了简朴的登录注册页面，今天小编来带着各人实现完整的登录注册功能。
  一、后端的搭建 

   Spring Boot先容：Spring Boot是一个用于简化Spring应用程序开发的开源框架。它通过主动配置、内置服务器和预设的最佳实践，极大地减少了配置和开发的复杂性。Spring Boot允许开发者快速创建独立的、生产级的Spring应用，而无需手动配置大量的设置。它内置了各种工具和组件，支持主动化的依靠管理、容器配置，并提供了广泛的生产监控功能。
  1. 创建项目

在这里，小编利用的是Springboot搭建的后端，利用的是 IDEA（java编程语言的集成开发情况）
我们先将后端项目创建好,点击File->New->roject：

接着我们给项目定名，选择Maven的包管理器，JDK的版本要和java对应，最后点击下一步：

紧接着勾选如图的依靠项，最后点击创建：

创建项目完成后，项目的目录布局如下：

打开如图所示的配置文件举行配置:

代码如下：

1. # 指定服务器监听的端口号
2. server.port=8080
3. # 设置应用的上下文路径
4. server.servlet.context-path=/springboot
5. # 配置静态资源的位置，支持类路径和本地文件系统路径
6. spring.web.resources.static-locations=classpath:/templates,file:D:/java/data/
7. # MySQL数据库驱动类名
8. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
9. # 数据库连接URL，包括数据库地址、端口、数据库名及额外参数
10. spring.datasource.url=jdbc:mysql://localhost:3309/class1?characterEncoding=utf8&serverTimezone=UTC
11. # 数据库用户名
12. spring.datasource.username=root
13. # 数据库密码
14. spring.datasource.password=123456
15. # 数据源名称
16. spring.datasource.name=defaultDataSource
17. # MyBatis实体别名包位置
18. mybatis.type-aliases-package=com.example.sports.pojo
19. # MyBatis映射文件位置
20. mybatis.mapper-locations=classpath:mappers/*.xml
21. # 设置日志级别
22. logging.level.com.hnucm.springboot1=debug

复制代码

之后我们导入依靠包，打开pom.xml文件，将以下代码导入：

代码如下：

1. <dependency>
2.      <groupId>org.springframework.boot</groupId>
3.      <artifactId>spring-boot-starter-thymeleaf</artifactId>
4. </dependency>
5. <dependency>
6.     <groupId>org.mybatis.spring.boot</groupId>
7.     <artifactId>mybatis-spring-boot-starter</artifactId>
8.     <version>2.2.2</version>
9. </dependency>
10. <dependency>
11.     <groupId>mysql</groupId>
12.     <artifactId>mysql-connector-java</artifactId>
13.     <version>8.0.20</version>
14. </dependency>

复制代码

 导入后重新加载依靠：

2. 代码实现

让我们正式开始搭建接口：
2.1 pojo层 

首先，我们在pojo层创建用户的实体类，右键pojo->New->java类：

   实体类的属性为（id，name,password）注意，在上方加注解@Data,代码如下：

1. //我的测试类
2. package com.example.login.pojo;
3. import lombok.Data;
4. @Data
5. public class User {
6.     private int id;
7.     private String name;
8.     private String password;
9. }

复制代码

2.2 dao层

之后我们来写mapper层（mapper层是用来与数据库举行交互），右键dao->New->java类,选择接口类：

mapper代码如下：

1. package com.example.login.dao;
3. import com.example.login.pojo.User;
4. import org.apache.ibatis.annotations.Mapper;
6. import java.util.List;
8. @Mapper
9. public interface UserMapper {
10.      //查找所有用户
11.      List<User> findAllUsers();
12. }

复制代码

 接下来我们写xml配置文件来举行sql语句的查询，右键resources->New->新建文件夹（包名为mappers，与配置文件中的名称一致）：

xml文件代码如下：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!-- XML文档声明，指定XML文档的版本（1.0）和字符编码（UTF-8） -->
3. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
4. <!-- 文档类型定义（DTD），指定了当前XML文件遵循的DTD规范。这里指定的是MyBatis 3.0的DTD规范 -->
6. <mapper namespace="com.example.login.dao.UserMapper">
7.     <!-- 映射器（Mapper）的开始，定义了一个映射器。namespace属性指定了这个映射器的唯一命名空间，通常与对应的Java接口的全限定名一致 -->
8.    
9.     <select id="findAllUsers" resultType="com.example.login.pojo.User">
10.         <!-- SQL查询语句，用于获取所有用户信息 -->
11.         select * from users
12.     </select>
13. </mapper>
14. <!-- 映射器（Mapper）的结束 -->

复制代码

2.3 service层

service层用于处理从mapper拿到的数据：

1. package com.example.login.service;
3. import com.example.login.pojo.User;
5. import java.util.List;
6. //接口层
7. public interface UsersService {
8.     //查找所有用户
9.     List<User> findAllUsers();
10. }

复制代码

impl：

1. package com.example.login.service.impl;
4. import com.example.login.dao.UserMapper;
5. import com.example.login.pojo.User;
6. import com.example.login.service.UsersService;
7. import org.springframework.beans.factory.annotation.Autowired;
8. import org.springframework.stereotype.Service;
10. import java.util.List;
11. //实现类
12. @Service
13. public class UsersServiceImpl implements UsersService {
14.     @Autowired
15.     UserMapper userMapper;
17.     @Override
18.     public List<User> findAllUsers(){
19.         return userMapper.findAllUsers();
20.     }
22. }

复制代码

2.4 controller层

1. package com.example.login.service.impl;
3. import com.example.login.dao.UserMapper;
4. import com.example.login.pojo.User;
5. import com.example.login.service.UsersService;
6. import org.springframework.beans.factory.annotation.Autowired;
7. import org.springframework.stereotype.Service;
9. import java.util.List;
10. @Service
11. // 使用 @Service 注解标记这是一个服务层组件，Spring 会自动将其作为一个 Bean 进行管理
12. public class UsersServiceImpl implements UsersService {
13.     // 用户映射器接口的实例
14.     @Autowired
15.     // 使用 @Autowired 注解自动注入 UserMapper 的实例
16.     private UserMapper userMapper;
18.     @Override
19.     // 实现 UsersService 接口中的 findAllUsers 方法
20.     public List<User> findAllUsers() {
21.         // 调用 UserMapper 中的 findAllUsers 方法获取所有用户信息
22.         return userMapper.findAllUsers();
23.     }
25. }

复制代码

至此，我们的后端架构基本构建完成，项目目录布局图如下：

我们打开数据库，运行LoginApplication主文件：

数据库如图所示：

3. 接口测试

我们利用postman举行接口测试：
   GET方法，输入localhost:8080/springboot/usersList
  

或者打开欣赏器，输入localhost:8080/springboot/usersList

接口测试通过，拿到Json数据。
如许的话，我们后端基本构建完成了。
二、前端美满

1. 网络权限的添加

1.1 网络权限

接着前次做的项目来做，我们先添加网络请求权限 ，打开module.json5文件，加入网络权限 ：

1. "requestPermissions": [
2.    {
3.      "name": 'ohos.permission.INTERNET'
4.    }
5. ],

复制代码

位置如图所示:

1.2 打开终端下载axiso并导入

（具体axios参考OpenHarmony三方库中心仓）
   输入hpm install @ohos/axios下载axios对应的三方库，如果这条下令失败，可能就是配置ohpm的情况变量。
     ohpm install @ohos/axios
  

在首页导入axios
   import axios from '@ohos/axios' 
   打开index.ets文件：

加入网路请求的代码：

1. await axios.get<UsersModel,AxiosResponse<UsersModel[]>,null>('http://192.168.214.180:8080/springboot/usersList')
2.       .then((response: AxiosResponse<UsersModel[]>) => {
3.         // 获取到的数据赋值给users数组
4.         this.users=response.data;
5.         console.info('获取到的数据:'+JSON.stringify(this.users));
6.       })
7.       .catch((error: AxiosError) => {
8.         console.info('捕获到异常:',JSON.stringify(error));
9.         promptAction.showToast({
10.           message: '未连接到网络',
11.           duration: 3000,
12.         })
13.       })
14.       .then(()=> {
15.         // 总是会执行
16.       });

复制代码

注意：http://xxxx:8080必要查看本身的IP地址：
   方法：win+r，输入cmd：
  

  输入ipconfig，查看IPv4地址：
  

  2. 登录功能

接下来举行登录验证，将获取到的用户数据与输入框中的数据举行对比：

具体代码如下：

1. //用户名输入框的获取数据  @State private inputName: string = ''  //暗码输入框的获取数据  @State private inputPassword: string = ''  @State private users: UsersModel[] = [];  //获取后端用户数据，举行登录验证  async loginCommit() {    //利用axios读取用户列表 http://xxxx:8080/springboot/userslist'    await axios.get<UsersModel,AxiosResponse<UsersModel[]>,null>('http://192.168.214.180:8080/springboot/usersList')
2.       .then((response: AxiosResponse<UsersModel[]>) => {
3.         // 获取到的数据赋值给users数组
4.         this.users=response.data;
5.         console.info('获取到的数据:'+JSON.stringify(this.users));
6.       })
7.       .catch((error: AxiosError) => {
8.         console.info('捕获到异常:',JSON.stringify(error));
9.         promptAction.showToast({
10.           message: '未连接到网络',
11.           duration: 3000,
12.         })
13.       })
14.       .then(()=> {
15.         // 总是会执行
16.       });    //登录验证    for (let i=0;i<this.users.length;i++){      if (this.users[i].name==this.inputName&&this.users[i].password==this.inputPassword){        promptAction.showToast({          message: '登陆成功',          duration: 3000,        })        router.pushUrl({          url:"pages/Success"        })      }else {        console.log("登录失败")      }    }  }

复制代码

在登录按钮.oncilck()中调用loginCommit（）方法

 如许我们的登录功能就完成了。
     Harmonyos登录演示
  3. 注册功能

注册功能与登录功能雷同，我就不具体的描述了，如果有不懂的小伙伴，可以私信小编哦。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。