[JavaScript知识库]解决Vue使用axios传递数组到SpringBoot后台

首先为了解决这个bug测试了几十遍，不断的重启测试，最终，终于找到了解决方案

1. 使用最笨的方法，将数组里面的值，在循环里拼接在URL后面

2. 第二种方法就是使用QS

第一种这里就不说了，大家自行去测试即可，这里主要收一下第二种方法，因为看了很多网上的方案，都说的很含糊，导致会产生很多bug

• 首先可以在自己的vue项目里安装QS（也可以不用安装，有些库它自带，如果怕出现问题最好还是安装i一下）

• 安装：nmp install qs 即可

• 然后在组件页面的<script>标签里导入即可，import QS from 'qs'，也可以在main.js里导入（全局导入）

希望大家测试的时候先跟我写的一模一样，成功后再修改自行去测试，避免走弯路！！！

这里提供一下后台的接口

?    @RequestMapping("/delete")
? ? ?@ResponseBody
? ? ?public String deleteById(@RequestParam(value = "id[]") Integer[] id) {
? ? ? ? ?System.out.println(id.length);
? ? ? ? ?String str = "";
? ? ? ? ?for (Integer integer : id) {
? ? ? ? ? ? ?str += integer;
? ? ? ?  }
? ? ? ? ?return str;
? ?  }

这里只是简单的接受数组，然后返回给前端看能不能接收，一般我们用来做批量删除

注意形参列表，务必要写成

@RequestParam(value = "id[]") Integer[] id

前端请求

?this.axios({
? ? ? ?  method: "post",
? ? ? ?  url: "http://localhost:8081/delete",
? ? ? ?  data: QS.stringify({'id': [1, 2, 3, 4]}, {arrayFormat: 'brackets'})
? ? ?  }).then(resp => {
? ? ? ?  alert(resp.data);
? ? ?  });

注意：请求方式必须是?post

大功告成！！！

?

补充：

arrayFormat的取值有三种：brackets，repeat，indices

indices：解析后 -> id[0]=1 & id[1]=2 & id[2]=3

brackets：解析后 -> id[]=1 & aid[]=2 & id[]=3

repeat：解析后 -> id=1 & id=2 & id=3

对于参数匹配后端接口方式，请参考：https://blog.csdn.net/pifutan/article/details/86320705