ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙应用ArkTS开发-利用axios举行网络请求（实现前后端交互） [打印本页]
作者: 张春    时间: 2024-9-25 05:15
标题: 鸿蒙应用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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4