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

已于 2024-09-05 11:36:08 修改
阅读量617 收藏 6
点赞数 21
分类专栏： 鸿蒙应用ArkTS开发 文章标签： harmonyos 网络 交互
于 2024-09-05 11:34:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovecspplon/article/details/141901256
版权

引言：

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

一、后端的搭建 

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

1. 创建项目

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

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

276f3a1b1ae540d78d60df038d5d267e.png

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

d8794925b4c14c1cb1ff1e3075a58ebe.png

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

15c0936237cd4880b950c95e71858953.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文件，将以下代码导入：

代码如下：

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

    @Override
    public List<User> findAllUsers(){
        return userMapper.findAllUsers();
    }

}

2.4 controller层

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
// 使用 @Service 注解标记这是一个服务层组件，Spring 会自动将其作为一个 Bean 进行管理
public class UsersServiceImpl implements UsersService {
    // 用户映射器接口的实例
    @Autowired
    // 使用 @Autowired 注解自动注入 UserMapper 的实例
    private UserMapper userMapper;

    @Override
    // 实现 UsersService 接口中的 findAllUsers 方法
    public List<User> findAllUsers() {
        // 调用 UserMapper 中的 findAllUsers 方法获取所有用户信息
        return userMapper.findAllUsers();
    }

}

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

我们打开数据库，运行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. 注册功能

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

剥了壳的螃蟹
关注
  • 21
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【鸿蒙版axios请求封装包】
06-03
2. **HarmonyOS SDK集成**：为了在HarmonyOS平台上运行，该封装包需要与HarmonyOS的SDK进行深度整合，包括使用JS Bridge来实现应用与操作系统的交互，以及利用HarmonyOS的网络模块进行数据传输。 3. **请求配置**：...
HTML使用极简的方式通过ajax请求实现前后端交互代码实现
06-17
在现代Web开发中，前后端交互是不可或缺的一部分，而AJAX（Asynchronous JavaScript and XML）技术使得这种交互变得更加高效和无缝。本篇文章将探讨如何使用HTML、JavaScript（jQuery库）和Ajax来实现前后端的数据...
HarmonyOS 鸿蒙应用开发 (七、HTTP网络组件 axios 介绍及封装使用)
热门推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-27 2万+
在HarmonyOS（OpenHarmony）中，@ohos/net.http 是官方提供的一个用于进行HTTP通信的基础模块。开发者可以利用这个模块发送和接收HTTP请求与响应，实现应用程序与服务器之间的数据交互。文档中心--HTTP数据请求。
使用网络组件axios与Spring Boot进行前后端交互
weixin_74292291的博客
12-30 1204
在OpenHarmony上使用网络组件axios与Spring Boot进行前后端交互
HarmonyOS鸿蒙实战（ Beta5版）@ohos/axios的网络请求实践规范
2401_84917132的博客
09-03 995
HarmonyOS鸿蒙实战（ Beta5版）@ohos/axios的网络请求实践规范
OpenHarmony：使用网络组件axios与Spring Boot进行前后端交互
2301_76813281的博客
01-21 1338
参数名称不一致参数类型（格式）不一致缺少必须的请求参数请求头信息不符合要求。
Vue+axios封装请求实现前后端分离
01-22
我们需要进行前后端分离开发，那么前后端的跨域问题就是无可避免的问题，前后端的请求也是无可避免的，Vue之中有一个请求组件是axios，我们可以对axios进行封装作为我们请求的工具组件 # 一、封装axios vue.config....
axios:前后端交互的实现方式
06-04
Axios 提供了简单易用的 API，通过创建实例、请求配置、拦截器、响应数据等方法进行网络请求。例如，发起一个 GET 请求： ```javascript axios.get('https://api.example.com') .then(function (response) { ...
vue基础知识--axios合并请求和slot
10-15
标题“vue基础知识--axios合并请求和slot”所涉及的知识点非常丰富，主要包括了Vue.js框架中关于axios的使用方法以及slot插槽的用法。接下来我将分别详细讲解这两个知识点。 **一、axios合并请求** 在Vue中，axios...
使用SymbolGlyph和SymbolSpan在HarmonyOS中实现高级图标效果
A1551143530的博客
09-03 537
不仅支持静态图标，还可以通过属性为图标添加动态效果。Column() {Text("弹跳动效示例")'停止' : '开始').onClick(() => {})这个示例展示了如何通过按钮控制图标的动效，利用实现图标的弹跳效果。这样的动效可以显著提升用户界面的动态感。和SymbolSpan组件提供了丰富的功能，使您能够在HarmonyOS中轻松创建和管理图标。通过掌握这些组件的用法，您可以在应用中实现精美的图标效果，并为用户带来更好的视觉体验。4o。
HarmonyOS开发实战（ Beta5版）线程间通信场景最佳实践
weixin_55362248的博客
09-02 1017
在应用开发中，经常会需要处理一些耗时的任务，如果全部放在主线程中执行就会导致阻塞，从而引起卡顿或者掉帧现象，降低用户体验，此时就可以将这些耗时操作放到子线程中处理。
【HarmonyOS 4.0】@ohos.events.emitter (Emitter)
票票的博客
09-04 131
@ohos.events.emitter (Emitter)
HarmonyOS开发实战（ Beta5版）跨线程序列化耗时点分析工具使用规范指南
weixin_55362248的博客
09-02 1363
DevEco Studio新增主线程序列化和反序列化检测能力，同时支持配置序列化/反序列化超时阈值。对于超过阈值的序列化和反序列化操作，在泳道中给出告警提示，并可以关联该时刻的调用栈信息，更好地帮忙开发者定位性能问题。
HarmonyOS开发实战（ Beta5版）减小应用包大小
weixin_55362248的博客
08-30 1728
当前DevEco Studio默认打包应用时不压缩so库文件，配置so压缩选项后，DevEco Studio会将so库文件以压缩形式打包到包中，从而减小应用包大小。
鸿蒙Next 单元测试框架——hypium
qq_39431405的博客
08-30 1523
单元测试框架(hypium)是HarmonyOS上的测试框架，提供测试用例编写、执行、结果显示能力，用于测试系统或应用接口。表1 单元测试框架功能特性。
HarmonyOS开发实战（ Beta5版）多线程能力场景化示例最佳实践
weixin_55362248的博客
09-02 1509
并发的意思是多个任务同时执行。并发模型分为两大类：基于内存共享的并发模型和基于消息传递的并发模型。
鸿蒙模拟器篇
qq_36859035的博客
08-29 633
1、首先需要在华为官网申请模拟器资格，附链接：鸿蒙模拟器（HarmonyOS Emulator）Beta活动申请填写相关信息提交申请，申请结果状态在个人中心 — 我的活动页面查看2、申请通过之后开始下载模拟器 注意：如果出现请先安装系统镜像或者下面图片上的错误，尝试重装DevEco Studio
HarmonyOS开发实战（ Beta5版）合理使用动画丢帧规范实践
最新发布
weixin_55362248的博客
09-04 626
在播放动画或者生成动画时，画面产生停滞而导致帧率过低的现象，称为动画丢帧。
axios实现django与vue前后端交互
06-06
要实现Django和Vue的前后端交互，可以使用Axios作为HTTP客户端库，Axios可以帮助我们向Django后端发送HTTP请求，并获取响应数据。 在Vue中，可以使用以下代码发送GET请求： ``` axios.get('/api/data/') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 其中，`/api/data/`是Django后端的API接口地址。 如果需要发送POST请求，可以使用以下代码： ``` axios.post('/api/data/', { data: 'example data' }) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 在Django中，需要使用Django REST framework (DRF)来创建API视图和序列化器，以便接收和返回JSON格式数据。 以下是一个简单的DRF视图代码示例： ```python from rest_framework.views import APIView from rest_framework.response import Response class DataAPIView(APIView): def get(self, request, format=None): data = {'key': 'value'} return Response(data) def post(self, request, format=None): serializer = MySerializer(data=request.data) if serializer.is_valid(): serializer.save() return Response(serializer.data, status=201) return Response(serializer.errors, status=400) ``` 其中，`MySerializer`是一个DRF序列化器，用于验证POST请求中的数据。 在Django的urls.py中，需要将API视图映射到URL： ```python from django.urls import path from myapp.views import DataAPIView urlpatterns = [ path('api/data/', DataAPIView.as_view()), ] ``` 这样，Vue前端就可以使用Axios发送请求到Django后端，获取API返回的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值