解决Vue使用axios传递数组到SpringBoot后台
首先为了解决这个bug测试了几十遍,不断的重启测试,最终,终于找到了解决方案使用最笨的方法,将数组里面的值,在循环里拼接在URL后面第二种方法就是使用QS第一种这里就不说了,大家自行去测试即可,这里主要收一下第二种方法,因为看了很多网上的方案,都说的很含糊,导致会产生很多bug首先可以在自己的vue项目里安装QS(也可以不用安装,有些库它自带,如果怕出现问题最好还是安装i一下)安装:nmp ins
首先为了解决这个bug测试了几十遍,不断的重启测试,最终,终于找到了解决方案
-
使用最笨的方法,将数组里面的值,在循环里拼接在URL后面
-
第二种方法就是使用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博客
更多推荐
所有评论(0)