目录

• 需求
• 环境准备
• • 前端
  • 后端
• 成功实现的案例
• • 以JSON形式发送double数组
  • 以JSON形式发送对象，对象中有数组
  • 以JSON形式发送对象，对象中有二维数组
  • 以x-www-form-urlencoded形式发送一维数组

需求

前端或postman发送数组，后端controller做为入参接收

环境准备

前端

// src/utils/request.js
const axiosInstance = axios.create({baseURL: 'http://localhost:8081/',// baseURL: 'http://106.14.92.82:8081/',timeout: 10000
})
export default axiosInstance

import request from 'src/utils/request'
request({method: 'post',url: '/tests',headers: { 'Content-Type': 'application/json' },data: 要发送的数据,}).then((res) => {console.log(res) // 打印一下返回的结果})

后端

springboot spingmvc

成功实现的案例

以JSON形式发送double数组

不是k-v，直接是一个数值数组

• 前端

request({method: 'post',url: '/tests',headers: { 'Content-Type': 'application/json' },data: JSON.stringify([1,2,3]),}).then((res) => {console.log(res)})

• postman（与上方的前端代码等效）
  

• 后端
  JSON要用@RequestBody去接收

    @PostMapping(value = "/tests")public void test(@RequestBody List BS){log.info(BS); // 打印 [1.0, 2.0, 3.0]}

    @PostMapping(value = "/tests")public void locateByFang(@RequestBody String BS){log.info(BS); // [1,2,3]      这是个长度为7的String}

以JSON形式发送对象，对象中有数组

• 前端

const data0 = {'ld': [1,2,3],'s':'一个字符串'}
request({method: 'post',url: '/tests',headers: { 'Content-Type': 'application/json' },data: data0}).then((res) => {console.log(res)})

• postman
  

• 后端

public class TestEntity
{ // 记得补全getter setter toStringList ld; // 注意@RequestBody不能自动映射大写字母开头的属性，这里都是小写，大写的需要@JsonProperty("XX")String s;}

@PostMapping(value = "/tests")public void test(@RequestBody TestEntity BS){log.info(BS); // testEntity{ld=[1.0, 2.0, 3.0], s='一个字符串'}log.info(BS.getLd().size()); // 3log.info(BS.getS()); // 一个字符串}

以JSON形式发送对象，对象中有二维数组

• 前端或postman
  data0或者postman框中的文本改为

{"ld":[[1,2,3],[4,5,6],[7,8,9]],"s":"一个字符串"
}

• 后端
  把TestEntity的ld改成List>类型

log.info(BS); // testEntity{ld=[[1.0, 2.0, 3.0], [4.0, 5.0, 6.0], [7.0, 8.0, 9.0]], s='一个字符串'}
log.info(BS.getLd().size());// 3
log.info(BS.getLd().get(0).size()); // 3
log.info(BS.getS()); // 一个字符串

以x-www-form-urlencoded形式发送一维数组

• 前端

let oneDimArr = [1,2,3]
const usp = new URLSearchParams();
usp.append('BS', oneDimArr);
request({method: 'post',url: '/tests',headers: {'Content-Type': 'application/x-www-form-urlencoded'},data: usp
})

• postman
  

• 后端

@PostMapping(value = "/tests")
public void locateByFang(@RequestParam(value="BS") double[] BS){for(double s : BS) log.info(s);
}
// 或者
@PostMapping(value = "/tests")
public void locateByFang(@RequestParam(value="BS") List BS){log.info(BS);
}

暂时没有实现使用x-www-form-urlencoded传输二维数组，3×3的数组到了后端变成了9×1的数组