OpenHarmony：使用网络组件axios与Spring Boot进行前后端交互
流程图：
一、简单的交互前端请求函数firstget(): promise{ return axios.get('http://192.168.211.1:8090/test/1');}getaaddb(a: number, b: number): promise{ return axios.get('http://192.168.211.1:8090/test/2', { params: { a: a, b: b } })}这两个函数是使用axios库发起http get请求的函数，用于与服务器进行通信
服务器端点： http://192.168.211.1:8090/test/1 这是我本机的ip地址和springboot运行端口，使用在windows终端输入ipconfig可查看返回值： 该函数返回一个promise，该promise在请求成功时将包含axiosresponse对象，其中包含了从服务器接收到的响应信息。后端controllerpackage com.example.demospring.controller;import org.springframework.web.bind.annotation.*;@requestmapping(/test)@restcontrollerpublic class test1 { @getmapping(/1) public string test11(){ return 这是axios发送get请求从后端获取的数据; } @getmapping(/2) public int ab(@requestparam int a, @requestparam int b){ return a + b; }}test1()方法:
功能： 当接收到get请求 /test/1 时，该方法返回一个字符串 “这是axios发送get请求从后端获取的数据”。备注： 这是一个简单的用于演示get请求的方法，返回字符串数据。二、axios与spring boot进行前后端交互的实现一、前后端交互配置arkts目录结构
前端axios封装一个简单的网络请求 在src/main/ets/network/axiosrequest.ets里
import axios, { axioserror, axiosresponse, internalaxiosrequestconfig } from '@ohos/axios' // 公共请求前缀 axios.defaults.baseurl = http://192.168.211.1:8090 // 添加请求拦截器... // 添加响应拦截器... // 导出 export default axios; export {axiosresponse}
后端用于配置跨域资源共享（cors）的设置 登录后复制 @override public void addcorsmappings(corsregistry registry) { registry.addmapping(/**) // 映射的路径，这里是所有路径 .allowedorigins( ) // 允许的来源，这里是所有来源，可以设置具体的域名或 ip 地址 .allowedmethods(put, get, post, delete) // 允许的 http 方法 .allowedheaders( ) // 允许的 http 头部 .allowcredentials(false) // 是否支持用户凭据，这里是不支持 .maxage(300); // 预检请求的有效期，单位秒 } @requestmapping(/hello)：这个注解用于类级别，表示所有在这个控制器中的方法的url映射的基本路径 登录后复制 @restcontroller @requestmapping(/hello) public class sumupcontroller { ... }二、不同请求的参数传递与后端接收返回代码1.get请求获取数据axios请求
export function get1(): promise { return axios.get('/hello/get1');}后端controller
@getmapping(/get1)public string get1(){ return 这是你拿到的数据;}2.get请求传递多个参数axios请求
export function get2(a: number, b: number): promise { return axios.get('/hello/get2', { //params字段包含了将要发送到后端的参数。 params: { a: a, b: b } });}后端controller
@getmapping(/get2) //使用@requestparam注解从url中获取参数a和b。 public string get2(@requestparam int a, @requestparam int b){ return 你传的两个数是 + a + + b; }@requestparam 注解允许你自定义请求参数的名称，并提供其他选项，如设置默认值或将参数标记为必需
3.get请求路径参数axios请求
export function get3(ps: number, pn: number): promise { //注意要用``(反引号) return axios.get(`/hello/get3/${pn}/${ps}`);}后端controller
@getmapping(/get3/{pn}/{ps})public string get3(@pathvariable(ps) int ps, @pathvariable(pn) int pn){ return 你的查找要求是一页 + ps + 条数据的第 + pn + 页;}@pathvariable(id) 表示要从路径中提取一个名为 “id” 的变量，并将其值绑定到 itemid 参数上。
4.get请求返回json数据axios请求
//定义请求接收的数据类型export interface responsedata { status: string; message: string;}export function get4(): promise< axiosresponse > { return axios.get('/hello/get4');}promise> 表示一个 promise 对象，该对象最终解决为 axios 发起的 http 请求的响应，而该响应的数据体应该符合 responsedata 类型的结构。
后端controller
//@data注解一个类时，lombok会自动为该类生成常见的方法，如tostring()、equals()，以及所有字段的getter和setter方法。@datapublic static class responsedata { private string status; private string message;}@getmapping(/get4)public responsedata get4() { responsedata responsedata = new responsedata(); responsedata.setstatus(success); responsedata.setmessage(这是一条成功的消息。); return responsedata;}5.post 使用对象作为请求参数axios请求
export function post1(person: { name: string, age: number }): promise { return axios.post(`/hello/post1`, person);}后端controller
@datapublic static class person { private string name; private int age;}@postmapping(/post1)public string post1(@requestbody person person) { return 你传的姓名: + person.getname() + 年龄: + person.getage() + 。;}6.post 使用map接收json数据axios请求
//json中，键和字符串值都应该被双引号包围如export function post2(data: any): promise { return axios.post(`/hello/post2`, data);}后端controller
@postmapping(/post2)public string post2(@requestbody map mp) { atomicreference data = new atomicreference(); mp.foreach((k, v) - >{ data.set(data + k); data.set(data + : ); data.set(data + v + ,); }); return 你传的键值对是: + data;}7.put请求axios请求
export function putexample(data: string): promise { return axios.put('/hello/putexample', {data: data});}后端controller
@putmapping(/putexample)public string putexample(@requestbody string data) { return 这是put请求，传入的数据是: + data;}8.delete请求axios请求
export function deleteexample(id: number): promise { return axios.delete(`/hello/deleteexample/${id}`);}后端controller
@deletemapping(/deleteexample/{id})public string deleteexample(@pathvariable(id) int id) { return 这是delete请求，要删除的数据id是: + id;}三、调用传参import router from '@ohos.router'import {get1, get2, get3, get4, post1, post2, putexample, deleteexample} from '../network/api/testapi'@entry@componentstruct index { @state get1: string = ; @state get2: number = undefined; @state get3: number = undefined; @state get4: {status: string, message: string} = null; @state post1: string = ; @state post2: string = ; @state put: string = ; @state delete: string = ; build() { column() { button(get1-get请求获取数据) .onclick(async () = >{ this.get1 = (await get1()).data; }) text(this.get1) .fontsize(20) button(get2-传递多个参数) .onclick(async () = >{ this.get2 = (await get2(1, 3)).data; }) text(`${this.get2!=undefined?this.get2:}`) .fontsize(20) button(get3-路径参数) .onclick(async () = >{ this.get3 = (await get3(3, 4)).data; }) text(`${this.get3!=undefined?this.get3:}`) .fontsize(20) button(get4-返回json数据) .onclick(async () = >{ this.get4 = (await get4()).data; }) text(this.get4!=null ? json.stringify(this.get4) : ) .fontsize(20) button(post1-使用对象作为请求参数) .onclick(async () = >{ this.post1 = (await post1({name: 张三, age: 18})).data; }) text(this.post1) .fontsize(20) button(post2-使用map接收json数据的post请求示例) .onclick(async () = >{ this.post2 = (await post2({id: 1, name: 李四, status: call})).data; }) text(this.post2) .fontsize(20) button(put请求) .onclick(async () = >{ this.put = (await putexample(put data)).data; }) text(this.put) .fontsize(20) button(delete请求) .onclick(async () = >{ this.delete = (await deleteexample(10)).data; }) text(this.delete) .fontsize(20) button(对一个表单的增删改查) .margin(20) .onclick(() = >{ router.pushurl({ url: pages/talenttabletest }) }) } .width('100%') .height('100%') .justifycontent(flexalign.center) }}以上就是鸿蒙开发的openharmony；使用网络组件axios与spring boot进行前后端交互的技术解析，更多有关鸿蒙开发的学习，可以去主页查找，找我保存技术文档。下面分享一张openharmony学习路线图 ：
高清完整版曲线图，可以找我保存 （附鸿蒙4.0&next版文档）如下：
机器视觉知识--手写字体是怎么识别的？
乾照光电宣布全资子公司乾照半导体收到研发投入补助款3000万元
log2在verilog中到底有什么用
科学家使用日常无人机检测和监测浅水区的海洋巨型动物
汽车研发生产企业江淮汽车发布2022第一季度报告
OpenHarmony：使用网络组件axios与Spring Boot进行前后端交互
如何用二极管来实现限幅电路和钳位电路
微电网能量管理系统 削峰填谷 配合储能设备、低充高放
磁敏气缸传感器优点和缺点
郑大附一院正在建设5G网络基站
比例遥控控制系统设计及其原理
自然灾害频发，人工智能如何帮助救灾？
Arm发布Cortex X4，功耗可降低40%！
Intel发布了首款消费级QLC固态硬盘——660p
不要以为诺基亚有一部诺基亚6，其实他还有好多你不知道机子！
实操视频加课件，方便您备课机器视觉及其应用技术
给示波器以云空间，泰克发布突破性的数据协同软件TekDrive
广州飞机维修公司将在亚太地区为波音飞机提供维修支持
labview读取三菱plc寄存器内容
MAX1847应用电路图(输入12V,输出负-48V)
一、简单的交互前端请求函数firstget(): promise{ return axios.get('http://192.168.211.1:8090/test/1');}getaaddb(a: number, b: number): promise{ return axios.get('http://192.168.211.1:8090/test/2', { params: { a: a, b: b } })}这两个函数是使用axios库发起http get请求的函数，用于与服务器进行通信
服务器端点： http://192.168.211.1:8090/test/1 这是我本机的ip地址和springboot运行端口，使用在windows终端输入ipconfig可查看返回值： 该函数返回一个promise，该promise在请求成功时将包含axiosresponse对象，其中包含了从服务器接收到的响应信息。后端controllerpackage com.example.demospring.controller;import org.springframework.web.bind.annotation.*;@requestmapping(/test)@restcontrollerpublic class test1 { @getmapping(/1) public string test11(){ return 这是axios发送get请求从后端获取的数据; } @getmapping(/2) public int ab(@requestparam int a, @requestparam int b){ return a + b; }}test1()方法:
功能： 当接收到get请求 /test/1 时，该方法返回一个字符串 “这是axios发送get请求从后端获取的数据”。备注： 这是一个简单的用于演示get请求的方法，返回字符串数据。二、axios与spring boot进行前后端交互的实现一、前后端交互配置arkts目录结构
前端axios封装一个简单的网络请求 在src/main/ets/network/axiosrequest.ets里
import axios, { axioserror, axiosresponse, internalaxiosrequestconfig } from '@ohos/axios' // 公共请求前缀 axios.defaults.baseurl = http://192.168.211.1:8090 // 添加请求拦截器... // 添加响应拦截器... // 导出 export default axios; export {axiosresponse}
后端用于配置跨域资源共享（cors）的设置 登录后复制 @override public void addcorsmappings(corsregistry registry) { registry.addmapping(/**) // 映射的路径，这里是所有路径 .allowedorigins( ) // 允许的来源，这里是所有来源，可以设置具体的域名或 ip 地址 .allowedmethods(put, get, post, delete) // 允许的 http 方法 .allowedheaders( ) // 允许的 http 头部 .allowcredentials(false) // 是否支持用户凭据，这里是不支持 .maxage(300); // 预检请求的有效期，单位秒 } @requestmapping(/hello)：这个注解用于类级别，表示所有在这个控制器中的方法的url映射的基本路径 登录后复制 @restcontroller @requestmapping(/hello) public class sumupcontroller { ... }二、不同请求的参数传递与后端接收返回代码1.get请求获取数据axios请求
export function get1(): promise { return axios.get('/hello/get1');}后端controller
@getmapping(/get1)public string get1(){ return 这是你拿到的数据;}2.get请求传递多个参数axios请求
export function get2(a: number, b: number): promise { return axios.get('/hello/get2', { //params字段包含了将要发送到后端的参数。 params: { a: a, b: b } });}后端controller
@getmapping(/get2) //使用@requestparam注解从url中获取参数a和b。 public string get2(@requestparam int a, @requestparam int b){ return 你传的两个数是 + a + + b; }@requestparam 注解允许你自定义请求参数的名称，并提供其他选项，如设置默认值或将参数标记为必需
3.get请求路径参数axios请求
export function get3(ps: number, pn: number): promise { //注意要用``(反引号) return axios.get(`/hello/get3/${pn}/${ps}`);}后端controller
@getmapping(/get3/{pn}/{ps})public string get3(@pathvariable(ps) int ps, @pathvariable(pn) int pn){ return 你的查找要求是一页 + ps + 条数据的第 + pn + 页;}@pathvariable(id) 表示要从路径中提取一个名为 “id” 的变量，并将其值绑定到 itemid 参数上。
4.get请求返回json数据axios请求
//定义请求接收的数据类型export interface responsedata { status: string; message: string;}export function get4(): promise< axiosresponse > { return axios.get('/hello/get4');}promise> 表示一个 promise 对象，该对象最终解决为 axios 发起的 http 请求的响应，而该响应的数据体应该符合 responsedata 类型的结构。
后端controller
//@data注解一个类时，lombok会自动为该类生成常见的方法，如tostring()、equals()，以及所有字段的getter和setter方法。@datapublic static class responsedata { private string status; private string message;}@getmapping(/get4)public responsedata get4() { responsedata responsedata = new responsedata(); responsedata.setstatus(success); responsedata.setmessage(这是一条成功的消息。); return responsedata;}5.post 使用对象作为请求参数axios请求
export function post1(person: { name: string, age: number }): promise { return axios.post(`/hello/post1`, person);}后端controller
@datapublic static class person { private string name; private int age;}@postmapping(/post1)public string post1(@requestbody person person) { return 你传的姓名: + person.getname() + 年龄: + person.getage() + 。;}6.post 使用map接收json数据axios请求
//json中，键和字符串值都应该被双引号包围如export function post2(data: any): promise { return axios.post(`/hello/post2`, data);}后端controller
@postmapping(/post2)public string post2(@requestbody map mp) { atomicreference data = new atomicreference(); mp.foreach((k, v) - >{ data.set(data + k); data.set(data + : ); data.set(data + v + ,); }); return 你传的键值对是: + data;}7.put请求axios请求
export function putexample(data: string): promise { return axios.put('/hello/putexample', {data: data});}后端controller
@putmapping(/putexample)public string putexample(@requestbody string data) { return 这是put请求，传入的数据是: + data;}8.delete请求axios请求
export function deleteexample(id: number): promise { return axios.delete(`/hello/deleteexample/${id}`);}后端controller
@deletemapping(/deleteexample/{id})public string deleteexample(@pathvariable(id) int id) { return 这是delete请求，要删除的数据id是: + id;}三、调用传参import router from '@ohos.router'import {get1, get2, get3, get4, post1, post2, putexample, deleteexample} from '../network/api/testapi'@entry@componentstruct index { @state get1: string = ; @state get2: number = undefined; @state get3: number = undefined; @state get4: {status: string, message: string} = null; @state post1: string = ; @state post2: string = ; @state put: string = ; @state delete: string = ; build() { column() { button(get1-get请求获取数据) .onclick(async () = >{ this.get1 = (await get1()).data; }) text(this.get1) .fontsize(20) button(get2-传递多个参数) .onclick(async () = >{ this.get2 = (await get2(1, 3)).data; }) text(`${this.get2!=undefined?this.get2:}`) .fontsize(20) button(get3-路径参数) .onclick(async () = >{ this.get3 = (await get3(3, 4)).data; }) text(`${this.get3!=undefined?this.get3:}`) .fontsize(20) button(get4-返回json数据) .onclick(async () = >{ this.get4 = (await get4()).data; }) text(this.get4!=null ? json.stringify(this.get4) : ) .fontsize(20) button(post1-使用对象作为请求参数) .onclick(async () = >{ this.post1 = (await post1({name: 张三, age: 18})).data; }) text(this.post1) .fontsize(20) button(post2-使用map接收json数据的post请求示例) .onclick(async () = >{ this.post2 = (await post2({id: 1, name: 李四, status: call})).data; }) text(this.post2) .fontsize(20) button(put请求) .onclick(async () = >{ this.put = (await putexample(put data)).data; }) text(this.put) .fontsize(20) button(delete请求) .onclick(async () = >{ this.delete = (await deleteexample(10)).data; }) text(this.delete) .fontsize(20) button(对一个表单的增删改查) .margin(20) .onclick(() = >{ router.pushurl({ url: pages/talenttabletest }) }) } .width('100%') .height('100%') .justifycontent(flexalign.center) }}以上就是鸿蒙开发的openharmony；使用网络组件axios与spring boot进行前后端交互的技术解析，更多有关鸿蒙开发的学习，可以去主页查找，找我保存技术文档。下面分享一张openharmony学习路线图 ：
高清完整版曲线图，可以找我保存 （附鸿蒙4.0&next版文档）如下：
机器视觉知识--手写字体是怎么识别的？
乾照光电宣布全资子公司乾照半导体收到研发投入补助款3000万元
log2在verilog中到底有什么用
科学家使用日常无人机检测和监测浅水区的海洋巨型动物
汽车研发生产企业江淮汽车发布2022第一季度报告
OpenHarmony：使用网络组件axios与Spring Boot进行前后端交互
如何用二极管来实现限幅电路和钳位电路
微电网能量管理系统 削峰填谷 配合储能设备、低充高放
磁敏气缸传感器优点和缺点
郑大附一院正在建设5G网络基站
比例遥控控制系统设计及其原理
自然灾害频发，人工智能如何帮助救灾？
Arm发布Cortex X4，功耗可降低40%！
Intel发布了首款消费级QLC固态硬盘——660p
不要以为诺基亚有一部诺基亚6，其实他还有好多你不知道机子！
实操视频加课件，方便您备课机器视觉及其应用技术
给示波器以云空间，泰克发布突破性的数据协同软件TekDrive
广州飞机维修公司将在亚太地区为波音飞机提供维修支持
labview读取三菱plc寄存器内容
MAX1847应用电路图(输入12V,输出负-48V)