2023-04-03 vue get请求传数组

GET请求直接传数组给后端，格式会错误，如下所示：

image.png

这样传的数组格式显然后端解析不了，后端希望的格式要么是list=1&list=2&list=3，要么是list=1,2,3

我们就来list = 1,2,3
1.手动转换
定义转换方法：

    converToUrl(requestParams){
      let params = [];
      Object.entries(requestParams).forEach(([key, value]) => {
        let param = value;
        params.push(param);
      });
      return  params.join('&');
    },

使用方式如下：
 let param = { ids: [1,2,3,4] };
 var converParam = this.converToUrl(param);

使用方法

if(this.listForm.normalFlagList){
          let param = { normalFlagList: this.listForm.normalFlagList };
          var converParam = this.converToUrl(param);
          if(converParam && param){
            this.listQuery.normalFlagList = converParam
          }
        }
        console.log('导出参数: ', converParam);

通过qs插件

// 在项目中使用命令行工具输入
npm install qs
// 引入qs插件
import qs from 'qs'

使用方式如下：

 let param = { ids: [1,2,3,4] };
 var converParam = qs.stringify(param, { arrayFormat: 'repeat' });

在URL链接后面加上一个？即可

api.url + '?' + converParam

后端直接通过如下方式接收即可：

    @GetMapping("/delete")
    @ApiOperation("删除")
    public CommonResult<Boolean> delete(@RequestParam("ids") List<Long> ids) {
        return success(true);
    }