自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2025-01-23 00:07 harmonyos  网络  交互  

引言：

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

一、后端的搭建 

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

1. 创建项目

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

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

276f3a1b1ae540d78d60df038d5d267e.png

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

d8794925b4c14c1cb1ff1e3075a58ebe.png

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

15c0936237cd4880b950c95e71858953.png

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

3eb3945e54574965858dfadfa9d88a08.png

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

b861ab97a5c3425d942bd5fd4d272eb5.png

代码如下：

# 指定服务器监听的端口号
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文件，将以下代码导入：

e18e5b0fff1b4d90bb392dc8b35612a4.png

代码如下：

<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>

 导入后重新加载依赖：9fa5e1ae9fb845a9950ed3a55f76f62d.png

2. 代码实现

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

2.1 pojo层 

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

7ff01e5c607b41b7b86de1d370425c3e.png

实体类的属性为（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类,选择接口类：

2ad1984dbe954fd280171050ca4a650b.png

2ae20427dd0a4eb6a958f2c022a7959f.png

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，与配置文件中的名称一致）：

713a744b83264291a3dada70aac76d6f.png

5a110aa606d643f0b6d7ec282a2900c7.png

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 {
    @Autowired
    UserMapper userMapper;

    @Override
    public 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 {
    @Autowired
    UsersService 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");
    }
}

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

af542ed341364f7bac36f1b111fe9e53.png

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

0d0543fd0ac74adb9b092a7b1be20a19.png

数据库如图所示：

155b5dd6474148d2a6061e07c16cf555.png3. 接口测试

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

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

ad52f4b5039641b0a158c5e4a7d7854d.png

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

5ef71f9c03244ee9831ac77869856169.png

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

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

二、前端完善

1. 网络权限的添加

1.1 网络权限

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

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

位置如图所示:723a2356142c4654a86f3c64e50a8228.png

1.2 打开终端下载axiso并导入

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

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

 ohpm install @ohos/axios

d9269a03d30142edb9e1025838cd475c.png

在首页导入axios

import axios from '@ohos/axios' 

 打开index.ets文件：

2a537797521844b5bd195cb7cbb504f7.png

加入网路请求的代码：

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：

d7542112e74c4fa894d385e52c079898.png

输入ipconfig，查看IPv4地址：

fc05a49e14b14c53a58856de39d3ee28.png

2. 登录功能

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

e11f01c026d34b3a9567716cc7522147.png

具体代码如下：

//用户名输入框的获取数据
  @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（）方法

4bb28ab729e0429d9731e6ff9cf2d310.png

 这样我们的登录功能就完成了。

Harmonyos登录演示

3. 注册功能

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


原文地址：https://blog.csdn.net/lovecspplon/article/details/141901256

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2025