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日
    浏览(54)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

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

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

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

    2024年02月07日
    浏览(73)
  • 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日
    浏览(40)
  • 【Spring Boot】使用Spring Boot进行transformer的部署与开发

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

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

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

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

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

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

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

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

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

    2024年02月10日
    浏览(49)
  • spring boot整合cache使用Ehcache 进行数据缓存

    之前的文章 spring boot整合 cache 以redis服务 处理数据缓存 便捷开发 带着大家通过spring boot整合了 cache 缓存 那么 我们就来说说 其他服务的缓存 而spring boot默认的缓存方案就是 cache 用simple模式 spring boot的强大在于它的整合能力 它将其他缓存技术整合 统一了接口 简单说 所有的

    2024年02月19日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包