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

这篇具有很好参考价值的文章主要介绍了OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

流程图:
OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互,鸿蒙,网络,spring boot,交互,harmonyos,鸿蒙开发,鸿蒙next,移动开发

一、简单的交互

前端请求函数

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目录结构

OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互,鸿蒙,网络,spring boot,交互,harmonyos,鸿蒙开发,鸿蒙next,移动开发

前端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学习路线图

OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互,鸿蒙,网络,spring boot,交互,harmonyos,鸿蒙开发,鸿蒙next,移动开发

高清完整版曲线图,可以找我保存(附鸿蒙4.0&next版文档)如下:

OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互,鸿蒙,网络,spring boot,交互,harmonyos,鸿蒙开发,鸿蒙next,移动开发

OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互,鸿蒙,网络,spring boot,交互,harmonyos,鸿蒙开发,鸿蒙next,移动开发文章来源地址https://www.toymoban.com/news/detail-814256.html

四、总结

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

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

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

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

到了这里,关于OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月11日
    浏览(55)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月10日
    浏览(57)
  • Spring Boot项目使用 jasypt 加密组件进行加密(例如:数据库、服务的Key、等等进行加密)

    🍓 简介:java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢迎点赞 👍 收藏 ⭐留言 📝 🍓 更多文章请点击 密码配置项都不加密? 想啥呢? 一

    2024年02月07日
    浏览(76)
  • Java-web:使用Axios代替JSP进行前后端分离与数据交互

    使用Servlet注解代替配置web.xml文件 在servlet3.0版本支持使用注解 1.创建一个Servlet响应axios发送的请求 JSP代替: 还原JSP到HTML: Axios:将ajax进行封装,简化JS发送异步请求的代码 Axios官网:https://www.axios-http.cn/ 下载axios.js文件到本地然后再HTML头文件引入或者直接引用网址的JS头文

    2024年02月06日
    浏览(43)
  • 【Spring Boot】使用Spring Boot进行transformer的部署与开发

    Transformer是一个用于数据转换和处理的平台,使用Spring Boot可以方便地进行Transformer的部署与开发。 以下是使用Spring Boot进行Transformer部署与开发的步骤: 创建Spring Boot项目 可以使用Spring Initializr创建一个简单的Spring Boot项目。在创建项目时,需要添加以下依赖: 编写Transforme

    2024年02月11日
    浏览(38)
  • 【深入浅出 Spring Security(十三)】使用 JWT 进行前后端分离认证(附源码)

    JWT 全称 Java web Token,在此所讲述的是 JWT 用于身份认证,用服务器端生成的JWT去替代原始的Session认证,以提高安全性。 JWT本质是一个Token令牌,是由三部分组成的字符串,分别是头部(header)、载荷(payload)和签名(signature)。头部一般包含该 JWT 的基本信息,例如所使用的

    2024年02月12日
    浏览(42)
  • Spring Boot进阶(73):Spring Boot如何优雅地使用Feign进行服务间通信?

            在分布式系统中,服务间通信是非常常见的情况。而Feign就是一个开源的Java HTTP客户端,可以帮助我们在Spring Boot应用中快速构建和使用HTTP客户端,方便实现服务间的通信。本文将介绍如何优雅地使用Feign进行服务间通信。         那么,具体如何实现呢?这将又

    2024年02月06日
    浏览(54)
  • Spring Boot 如何使用 Spring Security 进行认证和授权

    在 Web 应用程序中,认证和授权是非常重要的功能。Spring Security 是一个基于 Spring 框架的强大的安全框架,它提供了完整的认证和授权解决方案,并且可以轻松地集成到 Spring Boot 应用程序中。本文将介绍如何在 Spring Boot 中使用 Spring Security 进行认证和授权,并提供示例代码。

    2024年02月11日
    浏览(41)
  • Spring Boot 如何使用 JUL 进行日志记录

    在 Spring Boot 中,我们可以使用多种日志框架进行日志记录。其中,JUL (Java Util Logging) 是 Java 平台自带的日志框架,它提供了简单的 API 和配置,可以轻松地进行日志记录。本文将介绍如何在 Spring Boot 中使用 JUL 进行日志记录,并提供示例代码。 默认情况下,Spring Boot 使用 L

    2024年02月10日
    浏览(50)
  • [AIGC] 使用Spring Boot进行单元测试:一份指南

    在现代软件开发过程中,确认你的应用正确运行是至关重要的一步。Spring Boot提供了一组实用工具和注解来辅助你在测试你的应用时,使得这个过程变得简单。下面就来分享一下如何在Spring Boot中进行单元测试。 单元测试是软件测试的基石。通过对代码的各个模块进行隔离测

    2024年04月11日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包