当前位置： 首页 > news >正文

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

news 2025/7/15 13:25:18

引言：

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

一、后端的搭建 

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 {@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");}
}

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

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. 注册功能

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

http://www.lryc.cn/news/504989.html

相关文章：

  • 【开源】使用环信UIKit for uniapp 做一个IM即时聊天应用
  • 计算机网络知识点全梳理（一.TCP/IP网络模型）
  • 神州数码DCME-320 online_list.php存在任意文件读取漏洞
  • 神经网络基础-神经网络搭建和参数计算
  • Linux入门攻坚——41、Linux集群系统入门-lvs（2）
  • 音视频入门基础：MPEG2-TS专题（17）——FFmpeg源码中，解析TS program map section的实现
  • 了解https原理，对称加密/非对称加密原理，浏览器与服务器加密的进化过程，https做了些什么
  • 山西省第十八届职业院校技能大赛高职组 5G 组网与运维赛项规程
  • tcpdump编译 wireshark远程抓包
  • Web开发 -前端部分-CSS
  • 用 Python Turtle 绘制流动星空：编程中的璀璨星河
  • Java从入门到工作2 - IDEA
  • fastadmin批量压缩下载远程视频文件
  • 【保姆级】Mac如何安装+切换Java环境
  • 2024首届世界酒中国菜国际地理标志产品美食文化节成功举办篇章
  • Springboot静态资源
  • MTK修改配置更改产品类型ro.build.characteristics
  • SQL 查询中的动态字段过滤
  • 数字IC后端零基础入门基础理论（Day1）
  • 【LC】240. 搜索二维矩阵 II
  • Redis应用—4.在库存里的应用
  • selenium获取请求头
  • Rust中自定义Debug调试输出
  • docker离线安装、linux 安装docker
  • 卓易通：鸿蒙Next系统的蜜糖还是毒药？
  • AI大模型学习笔记｜神经网络与注意力机制（逐行解读）
  • Linux 操作系统中的管道与共享内存
  • 恢复删除的文件:6个免费Windows电脑数据恢复软件
  • linux网络编程 | c | select实现多路IO转接服务器
  • 基于前后端分离的食堂采购系统源码：从设计到开发的全流程详解