流程圖：

一、簡單的交互

前端請求函數

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進行前后端交互的實現

一、前后端交互配置

前端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> 表示一個 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)
  }
}