Vue --- 记录Vue使用POST上传数组问题

记录Vue使用POST上传数组问题

后台代码:

    @PostMapping("/demo")
    public String demo(
            @RequestParam(value = "ids", required = false) List<Integer> ids,
            Integer id
    ) {
        log.info("集合:{}", ids);
        log.info("名称:{}", id);
        return "hello_world";
    }

这两天跟前端联调的时候碰到一个问题,前端给我传数据格式给我传了个这个过来,还说自己没问题,这就算了,这种问题不会百度么,百度不行找谷歌.差点没想拿起我82年的老拖鞋拍死她.

看看这个原因怎么产生的,无非就是用qs.stringify()习惯了,不管啥东西都无脑用这种.本来用这个没问题,它有很多种用法,但是你不能只会一种啊!上拖鞋打死她;

代码:

	let params = {
      ids: [1, 2, 3],
      id: 1
    }
   axios.post('http://localhost:8081/demo', qs.stringify(params)
   ).then(res => {
     console.log(res.data)
   })

这种是根本拿不到值的,或者直接抛出异常类型转换失败

之后跟这位姐姐思考了半天觉得不行于是决定换一种写法:不用qs.stringify函数了

              axios.post('http://localhost:8081/hello/world/demo', params
            ).then(res => {
                    console.log(res.data)
            })

然后 … :

特么的qs.stringify的那么多种形式被吃了吗?

	//形式: ids=1&ids=2&ids=3&id=1
	qs.stringify(params, { indices: false })
	
	//形式： ids%5B0%5D=1&ids%5B1%5D=2&ids%5B2%5D=3&id=1
	//其实这个形式是:ids[0]=1&ids[1]=2&ids[2]=3&id=1 用URL解码一下就好了
	// 默认也是这种格式
	qs.stringify(params, {arrayFormat: 'indices'})
	
	//形式： ids%5B%5D=1&ids%5B%5D=2&ids%5B%5D=3&id=1
	//其实这个形式是:ids[]=1&ids[]=2&ids[]=3&id=1 用URL解码一下就好了
	qs.stringify(params, {arrayFormat: 'brackets'})
	
	//形式:ids=1&ids=2&ids=3&id=1
	qs.stringify(params, {arrayFormat: 'repeat'})

第一种方式:

axios.post('http://localhost:8081/hello/world/demo', qs.stringify(params, { indices: false })
   ).then(res => {
                    console.log(res.data)
   })

它会将你的参数转换成如下形式: URL?ids=1&ids=2&ids=3
结果:

第二种方式:

	axios.post('http://localhost:8081/hello/world/demo', qs.stringify(params, {arrayFormat: 'repeat'})
            ).then(res => {
                    console.log(res.data)
            })

它和上面一种格式是一样的.
结果:

第三种方式:

axios.post('http://localhost:8081/hello/world/demo', qs.stringify(params, {arrayFormat: 'brackets'})
            ).then(res => {
                    console.log(res.data)
            })

这个格式: URL?ids[]=1&ids[]=2&ids[]=3
这种方式有点特殊需要后台改一下代码
后台代码:

    @PostMapping("/demo")
    public String demo(
            @RequestParam(value = "ids[]", required = false) List<Integer> ids,
            Integer id
    ) {
        log.info("集合:{}", ids);
        log.info("名称:{}", id);
        return "hello_world";
    }

结果:

这像啥,读书做选择题,完美避开三个正确答案