#星计划# 在OpenHarmony上使用网络组件axios与Spring Boot进行前后端交互 原创
在OpenHarmony上使用网络组件axios与Spring Boot进行前后端交互
#jitoa# 此博客由金陵科技学院-开放原子开源社 李俊杰编写
仓库地址: axiosTest · AtomGit_开放原子开源基金会代码托管平台
结果演示:在OpenHarmony上使用网络组件axios与Spring Boot进行前后端交互_哔哩哔哩_bilibili
一,简单的交互
前端请求函数
这两个函数是使用axios库发起HTTP GET请求的函数,用于与服务器进行通信
-
服务器端点: http://192.168.211.1:8090/test/1
这是我本机的ip地址和springboot运行端口,使用在windows终端输入ipconfig可查看
-
返回值: 该函数返回一个Promise,该Promise在请求成功时将包含AxiosResponse对象,其中包含了从服务器接收到的响应信息。
后端controller
test1()
方法:
- 功能: 当接收到GET请求
/test/1
时,该方法返回一个字符串 “这是axios发送get请求从后端获取的数据”。 - 备注: 这是一个简单的用于演示GET请求的方法,返回字符串数据。
二,axios与Spring Boot进行前后端交互的实现
一,前后端交互配置
-
Arkts目录结构
前端axios封装一个简单的网络请求在src/main/ets/network/AxiosRequest.ets里
-
后端用于配置跨域资源共享(CORS)的设置
@RequestMapping("/hello")
:这个注解用于类级别,表示所有在这个控制器中的方法的URL映射的基本路径
二,不同请求的参数传递与后端接收返回代码
1.get请求获取数据
axios请求
后端controller
2.get请求传递多个参数
axios请求
后端controller
@RequestParam 注解允许你自定义请求参数的名称,并提供其他选项,如设置默认值或将参数标记为必需
3.get请求路径参数
axios请求
后端controller
@PathVariable("id")
表示要从路径中提取一个名为 “id” 的变量,并将其值绑定到 itemId
参数上。
4.get请求返回JSON数据
axios请求
Promise<AxiosResponse<ResponseData>>
表示一个 Promise 对象,该对象最终解决为 Axios 发起的 HTTP 请求的响应,而该响应的数据体应该符合 ResponseData
类型的结构。
后端controller
5.post 使用对象作为请求参数
axios请求
后端controller
6.post 使用Map接收JSON数据
axios请求
后端controller
7.put请求
axios请求
后端controller
8.delete请求
axios请求
后端controller
三,调用传参
四,总结
一、请求参数错误的常见情况:
- 参数名称不一致
- 参数类型(格式)不一致
- 缺少必须的请求参数
- 请求头信息不符合要求
二、不同请求方式与参数传递方式的对应关系:
- RESTful风格的API通常使用路径变量传递参数。在Spring框架中,可以使用
@PathVariable
注解来接收这些参数。 - URL中使用params传递参数时,通常使用
@RequestParam
注解来接收参数。 - 当客户端通过请求体传递JSON数据时,可以使用
@RequestBody
注解来接收。 @ModelAttribute
用于绑定方法参数或方法返回值到模型中,通常用于将请求参数与模型属性进行绑定。
三,参考:
网络组件axios可以在OpenHarmony上使用了-鸿蒙开发者社区-51CTO.COM
基于 axios 封装一个简单的网络请求-鸿蒙开发者社区-51CTO.COM
HTTP 条件请求 - HTTP | MDN (mozilla.org)
五,补充:
一、什么是请求体
请求体(RequestBody)是在HTTP协议中用于传输客户端向服务器发送的数据的部分。它是HTTP请求中可选的组成部分,用于向服务器传递请求所需的参数、内容或者数据。请求体通常出现在POST、PUT等请求方法中,用于发送客户端的数据给服务器。请求体可以包含各种类型的数据,如表单数据、JSON数据、文件等。具体的数据类型由请求头中的Content-Type字段来指定。常见的请求体格式有以下几种:
- 表单数据(application/x-www-form-urlencoded):以key-value形式编码
- JSON数据(application/json):用于传递结构化数据
- 文件上传(multipart/form-data):传递文件二进制数据和元数据
二、HTTP方法的常见使用场景:
大佬牛
不得不说,很有帮助
很不错啊