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

引言：

我们上一章实现了简单的登录注册页面，今天小编来带着大家实现完整的登录注册功能。

一、后端的搭建 

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

1. 创建项目

在这里，小编使用的是Springboot搭建的后端，利用的是 IDEA（java编程语言的集成开发环境）

我们先将后端项目创建好,点击File->New->Project：

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

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

创建项目完成后，项目的目录结构如下：

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

代码如下：

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

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

代码如下：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
<dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.2</version>
</dependency>
<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.20</version>
</dependency>

 导入后重新加载依赖：

2. 代码实现

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

2.1 pojo层 

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

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

//我的测试类
package com.example.login.pojo;
import lombok.Data;
@Data
public class User {private int id;private String name;private String password;
}

2.2 dao层

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

mapper代码如下：

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

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

xml文件代码如下：

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

2.3 service层

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

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

impl：

package com.example.login.service.impl;import com.example.login.dao.UserMapper;
import com.example.login.pojo.User;
import com.example.login.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;
//实现类
@Service
public class UsersServiceImpl implements UsersService {@AutowiredUserMapper userMapper;@Overridepublic List<User> findAllUsers(){return userMapper.findAllUsers();}}

2.4 controller层

package com.example.login.controller;import com.example.login.pojo.User;
import com.example.login.service.UsersService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;@Slf4j
@Controller
public class UsersController {@AutowiredUsersService usersService;@PostMapping("userslist")public ResponseEntity<String> userslist(@RequestBody User user){//搜索前端传过来的用户名来搜索数据库的用户User loginUser = usersService.findByName(user.getName());if(loginUser == null){return ResponseEntity.ok("用户名不存在");}if(user.getPassword().equals(loginUser.getPassword())){return ResponseEntity.ok("success");}return ResponseEntity.ok("密码错误");}@PostMapping("adduser")public ResponseEntity<String> adduser(@RequestBody User user) {// 处理请求数据System.out.println(user.getName());usersService.addUser(user);// 返回响应return ResponseEntity.ok("success");}
}

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

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

数据库如图所示：

3. 接口测试

我们利用postman进行接口测试：

GET方法，输入localhost:8080/springboot/usersList

或者打开浏览器，输入localhost:8080/springboot/usersList

接口测试通过，拿到Json数据。

这样的话，我们后端基本构建完成了。

二、前端完善

1. 网络权限的添加

1.1 网络权限

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

"requestPermissions": [{"name": 'ohos.permission.INTERNET'}],

位置如图所示:

1.2 打开终端下载axiso并导入

（具体axios参考OpenHarmony三方库中心仓）

输入:ohpm install @ohos/axios下载axios对应的三方库，如果这条命令失败，可能就是配置ohpm的环境变量。

 ohpm install @ohos/axios

在首页导入axios

import axios from '@ohos/axios' 

 打开index.ets文件：

加入网路请求的代码：

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

注意：http://xxxx:8080需要查看自己的IP地址：

方法：win+r，输入cmd：

输入ipconfig，查看IPv4地址：

2. 登录功能

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

具体代码如下：

//用户名输入框的获取数据@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').then((response: AxiosResponse<UsersModel[]>) => {// 获取到的数据赋值给users数组this.users=response.data;console.info('获取到的数据:'+JSON.stringify(this.users));}).catch((error: AxiosError) => {console.info('捕获到异常:',JSON.stringify(error));promptAction.showToast({message: '未连接到网络',duration: 3000,})}).then(()=> {// 总是会执行});//登录验证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. 注册功能

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