OpenHarmony：使用网络组件axios与Spring Boot进行前后端交互

news2025/1/12 20:37:46

流程图：

一、简单的交互

前端请求函数

firstGet(): Promise<AxiosResponse>{
    return axios.get('http://192.168.211.1:8090/test/1');
}
getAaddB(a: number, b: number): Promise<AxiosResponse>{
   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对象，其中包含了从服务器接收到的响应信息。

后端controller

package com.example.demospring.controller;
import org.springframework.web.bind.annotation.*;
@RequestMapping("/test")
@RestController
public 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<AxiosResponse> {
  return axios.get('/hello/get1');
}

后端controller

@GetMapping("/get1")
public String get1(){
    return "这是你拿到的数据";
}

2.get请求传递多个参数

axios请求

export function get2(a: number, b: number): Promise<AxiosResponse> {
  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<AxiosResponse> {
  //注意要用``(反引号)
  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<ResponseData>> {
  return axios.get('/hello/get4');
}

Promise<AxiosResponse> 表示一个 Promise 对象，该对象最终解决为 Axios 发起的 HTTP 请求的响应，而该响应的数据体应该符合 ResponseData 类型的结构。

后端controller

//@Data注解一个类时，Lombok会自动为该类生成常见的方法，如toString()、equals()，以及所有字段的getter和setter方法。
@Data
public 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<AxiosResponse> {
  return axios.post(`/hello/post1`, person);
}

后端controller

@Data
public 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<AxiosResponse> {
  return axios.post(`/hello/post2`, data);
}

后端controller

@PostMapping("/post2")
public String post2(@RequestBody Map<String, String> mp) {
    AtomicReference<String> 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<AxiosResponse> {
  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<AxiosResponse> {
  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
@Component
struct 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版文档）如下：

四、总结

一、请求参数错误的常见情况：

  1. 参数名称不一致
  2. 参数类型（格式）不一致
  3. 缺少必须的请求参数
  4. 请求头信息不符合要求

二、不同请求方式与参数传递方式的对应关系：

  1. RESTful风格的API通常使用路径变量传递参数。在Spring框架中，可以使用@PathVariable注解来接收这些参数。
  2. URL中使用params传递参数时，通常使用@RequestParam注解来接收参数。
  3. 当客户端通过请求体传递JSON数据时，可以使用@RequestBody注解来接收。
  4. @ModelAttribute用于绑定方法参数或方法返回值到模型中，通常用于将请求参数与模型属性进行绑定。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1401523.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智慧校园统一信息门户平台介绍

智慧校园统一信息门户平台介绍

统一信息门户平台是以统一身份认证平台为基础，将校内分散、异构的应用和信息资源进行整合，通过统一的访问入口，实现各种应用系统的无缝接入和集成，并围绕校内人员之间的人际关系，构建一个支持信息访问、传递、以及协作的集成化环境，实现个性化业务应用的高效开发、集成、…
阅读更多...
【Linux系统编程】进程优先级

【Linux系统编程】进程优先级

文章目录 1. 优先级的基本概念2. 为什么存在优先级3. 查看系统进程4. PRI and NI5. top命令修改已存在进程的nice值6. 其他概念 1. 优先级的基本概念 本篇文章讲解进程优先级&#xff0c;首先我们来了解一下进程优先级的概念&#xff1a; cpu资源分配的先后顺序&#xff0c;就…
阅读更多...
linux系统中Makefile的基本使用方法

linux系统中Makefile的基本使用方法

Makefile是一种编译控制文件&#xff0c;广泛用于项目的自动化构建。它定义了一系列的规则来指导构建的过程。通过Makefile&#xff0c;开发者可以轻松管理大型项目的编译链接、清理等任务。本文将从Makefile的基础用法讲起&#xff0c;逐步深入到更高级的应用&#xff0c;为你…
阅读更多...
003 摄像头的配置

003 摄像头的配置

string realm_s “IP Camera(J4605)”; 需要根据摄像头的具体型号进行修改&#xff1b; IP Camera(L3433) 张XX的摄像头 正常的启动信息 connect 0. connect success. -------------------------SEND OPTIONS------------------------------ OPTIONS rtsp://192.168.1.64:55…
阅读更多...
C#串口通讯控制4路继电上位机

C#串口通讯控制4路继电上位机

C#串口通讯控制4路继电上位机 界面如下 源码如下 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text;//引入空间 using System.Windows.Forms; using System.I…
阅读更多...
PS滤镜插件：Adobe Camera Raw 16 for Mac中文激活版

PS滤镜插件：Adobe Camera Raw 16 for Mac中文激活版

Adobe Camera Raw是Adobe公司开发的一款用于处理数码相机RAW格式文件的软件插件。它可以在Adobe Photoshop、Adobe Bridge和Adobe Lightroom等软件中使用&#xff0c;用于调整RAW文件的曝光、白平衡、对比度、色彩饱和度、锐化等参数&#xff0c;从而得到更好的图像质量。 软件…
阅读更多...
接口测试 04 -- Jsonpath断言、接口关联处理

接口测试 04 -- Jsonpath断言、接口关联处理

1. JsonPath基本介绍 1.1 JsonPath简介 JsonPath是一种用于在JSON数据中定位和提取特定数据的表达式语言。它类似于XPath用于XML的定位和提取&#xff0c;可以帮助我们灵活地从复杂的JSON结构中获取所需的数据。 1.2 JsonPath的特点 ● JsonPath可处理的报文类型为字典类型 …
阅读更多...
运动的解析：从机械运动到自由落体，探索物体运动的基本规律与数学描述

运动的解析：从机械运动到自由落体，探索物体运动的基本规律与数学描述

文章目录 一、机械运动&#xff08;一&#xff09;运动概念&#xff08;二&#xff09;运动形式&#xff08;三&#xff09;参照物 二、质点&#xff08;一&#xff09;理想化模型&#xff08;二&#xff09;质点概念 三、位移和路程&#xff08;一&#xff09;位移&#xff08…
阅读更多...
python基础学习-01

python基础学习-01

Python 是一种简单易学并且结合了解释性、编译性、互动性和面向对象的脚本语言。Python提供了高级数据结构&#xff0c;它的语法和动态类型以及解释性使它成为广大开发者的首选编程语言。 Python 是解释型语言&#xff1a; 开发过程中没有了编译这个环节。类似于PHP和Perl语言。…
阅读更多...
如操作系统的心跳，运行状况无可逃避：Shell脚本揭示系统鲜活秘密！

如操作系统的心跳，运行状况无可逃避：Shell脚本揭示系统鲜活秘密！

简介 Ubuntu 系统保姆监控脚本&#xff0c;全自动化解读系统运行状态&#xff01;脚本轻量化、资源节约&#xff0c;并且能够定期检测硬盘容量、内存占用和缓存情况。一旦发现缓存占用过高&#xff0c;即刻自动清理缓存&#xff0c;并将结果写入指定目录的日志文件中。日志文件…
阅读更多...
鸿蒙开发-UI-布局-相对布局

鸿蒙开发-UI-布局-相对布局

鸿蒙开发-UI-布局 鸿蒙开发-UI-布局-线性布局 鸿蒙开发-UI-布局-层叠布局 鸿蒙开发-UI-布局-弹性布局 文章目录 前言 一、基本概念 二、设置依赖 1.锚点设置 2.设置相对于锚点的对齐位置 三、使用场景 总结 前言 上文详细学习常见布局方式-弹性布局&#xff0c;学习弹性布局容…
阅读更多...
知识图谱KG+大模型LLM

知识图谱KG+大模型LLM

LLM-based KG KnowLM OpenSPGKG-based RAG 基本原理 从query出发的语义解析 pre-LLM方法 思想&#xff1a;直接将问题解析为对应的逻辑表达式&#xff0c;然后到知识图谱中查询。 方法&#xff1a;通常包含逻辑表达式、语义解析算法、语义解析模型训练三部分。一般步骤是将问句…
阅读更多...
NODE介绍和环境安装

NODE介绍和环境安装

浏览器是JS的前端运行环境 Node.js是JS的后端运行环境 Node.js中无法调用DOM和BOM等浏览器内置API 基于Express框架&#xff0c;快速构建web应用 基于Electron框架&#xff0c;构建跨平台桌面应用 基于restify框架快速构建API接口项目 读写数据库 下载Node.js环境 网址&…
阅读更多...
linux下的nginx相关配置练习

linux下的nginx相关配置练习

1.基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!! [rootlocalhost ~]# systemctl stop firewalld.service #关闭防火墙 [rootlocalhost ~]# setenforce 0 #关闭selinux [rootlocalhost www]# vim /etc/nginx/conf.d/test_ope…
阅读更多...
python 之 指定小数的输出

python 之 指定小数的输出

文章目录 **使用 round() 函数&#xff1a;****使用字符串格式化&#xff1a;****使用f-字符串&#xff1a;****使用 decimal 模块&#xff1a;** 在Python中&#xff0c;可以使用不同的方法来指定浮点数的小数位数。以下是其中一些常见的方式&#xff1a; 使用 round() 函数&…
阅读更多...
mapboxGL中的航线动画

mapboxGL中的航线动画

概述 借用上篇文章中二阶贝塞尔曲线的生成&#xff0c;本文实现mapboxGL中的航线动画。 效果 实现 1. 初始化地图 const from [101.797439042302, 36.5937248286007]; const to [106.9733, 35.217]; const points new ArcLine(from, to); const line new Geometry(poin…
阅读更多...
【Qt】—— Qt的基本介绍

【Qt】—— Qt的基本介绍

目录 &#xff08;一&#xff09;什么是Qt &#xff08;二&#xff09; Qt的发展史 &#xff08;三&#xff09;Qt⽀持的平台 &#xff08;四&#xff09; Qt版本 &#xff08;五&#xff09;Qt的优点 &#xff08;六&#xff09;Qt的应⽤场景 &#xff08;七&#xff09…
阅读更多...
tag 标签

tag 标签

tag 标签 在使用 Git 版本控制的过程中&#xff0c;会产生大量的版本。如果我们想对某些重要版本进行记录&#xff0c;就可以给仓库历史中的某一个commit 打上标签&#xff0c;用于标识。 在本章中&#xff0c;我们将会学习如何列出已有的标签、如何创建和删除新的标签、以及…
阅读更多...
Windows使用wsl2安装docker教程

Windows使用wsl2安装docker教程

windows环境搭建专栏&#x1f517;点击跳转 win系统环境搭建&#xff08;十一&#xff09;——Windows安装docker 文章目录 win系统环境搭建&#xff08;十一&#xff09;——Windows安装docker1.搭建WSL2环境1.1 docker官网对环境要求的描述[System requirements](https://do…
阅读更多...
JavaScript 学习笔记（WEB APIs Day3）

JavaScript 学习笔记（WEB APIs Day3）

「写在前面」 本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. JavaScript 学习笔记&#xff08;Day1&#xff09; 2. JavaSc…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023