解决Vue使用axios传递数组到SpringBoot后台

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

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

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

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

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

• 安装：npm 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

对于参数匹配后端接口方式，请参考：qs的arrayFormat与SpringBoot接收数组问题_蚍蜉叹的博客-CSDN博客