#星计划# 在OpenHarmony上使用网络组件axios与Spring Boot进行前后端交互 原创

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
      }
   })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

export function get1(): Promise<AxiosResponse> {
  return axios.get('/hello/get1');
}
1.
2.
3.

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

export function get2(a: number, b: number): Promise<AxiosResponse> {
  return axios.get('/hello/get2', {
  	//params字段包含了将要发送到后端的参数。
    params: {
      a: a,
      b: b
    }
  });
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

 @GetMapping("/get2")
 //使用@RequestParam注解从URL中获取参数a和b。
 public String get2(@RequestParam int a, @RequestParam int b){
 	return "你传的两个数是" + a + " " + b;
 }
1.
2.
3.
4.
5.

export function get3(ps: number, pn: number): Promise<AxiosResponse> {
  //注意要用``(反引号)
  return axios.get(`/hello/get3/${pn}/${ps}`);
}
1.
2.
3.
4.

@GetMapping("/get3/{pn}/{ps}")
public String get3(@PathVariable("ps") int ps, @PathVariable("pn") int pn){
	return "你的查找要求是一页" + ps + "条数据的第" +  pn + "页";
}
1.
2.
3.
4.

//定义请求接收的数据类型
export interface ResponseData {
  status: string;
  message: string;
}
export function get4(): Promise<AxiosResponse<ResponseData>> {
  return axios.get('/hello/get4');
}
1.
2.
3.
4.
5.
6.
7.
8.

//@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;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

export function post1(person: { name: string, age: number }): Promise<AxiosResponse> {
  return axios.post(`/hello/post1`, person);
}
1.
2.
3.

@Data
public static class Person {
    private String name;
    private int age;
}
@PostMapping("/post1")
public String post1(@RequestBody Person person) {
    return "你传的姓名: " + person.getName() + " 年龄: " + person.getAge() + "。";
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

//JSON中，键和字符串值都应该被双引号包围如
export function post2(data: any): Promise<AxiosResponse> {
  return axios.post(`/hello/post2`, data);
}
1.
2.
3.
4.

@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;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

export function putExample(data: string): Promise<AxiosResponse> {
  return axios.put('/hello/putExample', {data: data});
}
1.
2.
3.

@PutMapping("/putExample")
public String putExample(@RequestBody String data) {
    return "这是PUT请求，传入的数据是: " + data;
}
1.
2.
3.
4.

export function deleteExample(id: number): Promise<AxiosResponse> {
  return axios.delete(`/hello/deleteExample/${id}`);
}
1.
2.
3.

@DeleteMapping("/deleteExample/{id}")
public String deleteExample(@PathVariable("id") int id) {
	return "这是DELETE请求，要删除的数据ID是: " + id;
}
1.
2.
3.
4.

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)
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.