vue3中get请求参数数组格式序列化

微笑么么哒

已于 2023-09-01 10:21:06 修改

阅读量1k

点赞数

文章标签：前端 javascript vue.js

于 2023-09-01 10:14:51 首次发布

本文链接：https://blog.csdn.net/qq_37759901/article/details/132617936

版权

方法一：

//对lineNames :[A,B] 进行序列化：lineNames=A&lineNames=B 
state.lineNames=[A,B]
function convertArrayToUrlParameters(paramName, arr){
    let str = ''
    for (let i = 0; i < arr.length; i++) {
        str += `${paramName}=${encodeURIComponent(arr[i])}&`
    }
    return str
}
  const lineNames = convertArrayToUrlParameters('lineNames',state.lineNames);
  //打印结果：lineNames=A&lineNames=B

方法二：

安装qs插件。qs，是axios中自带的，也是npm仓库所管理的包。
npm install qs
import { stringify,parse } from 'qs';//vue3get传参数组序列化
function paramsSerializer(params){
	return stringify(params, { indices: false, allowDots: true });
}
 const lineNames =paramsSerializer({lineNames:state.lineNames})
   //打印结果：lineNames=A&lineNames=B 
   
不想封装方法可直接引用如下：
  let lineNames =stringify({lineNames:state.lineNames}, { indices: false, allowDots: true })
    //打印结果：lineNames=A&lineNames=B 
此外：
Vue2项目中的导入方式：
import qs from 'qs'
Vue.prototype.$qs = qs   //Vue2项目中的main.js中设置全局属性的方式：

项目引用：

查询应用：
http://10.115.120.111:5173/api/j03//DeviceAnalysis/StatusRecord-Query?startDate=2023-08-02&endDate=2023-09-01&lineNames=A&lineNames=B&pageIndex=1&pageSize=10&Status=-1
导出应用：其中${lineNames}已经安装上面方法序列化过的数据
接口：
window.open(`/api/j03/DeviceAnalysis/StatusRecord-Export?Status=${state.Status}&${lineNames}${deviceNames}startDate=${startDate}&endDate=${endDate}`, '_blank');
URL地址：
http://10.115.120.111:5173/api/j03/DeviceAnalysis/StatusRecord-Export?Status=0&lineNames=A&lineNames=B&deviceNames=SM-P2-MA-164_%E5%90%8D%E7%A7%B0&deviceNames=SM-P7-MA-039-1_%E5%90%8D%E7%A7%B0&startDate=2023-08-02&endDate=2023-09-01&type=5

接口应用

export function AlarmRecordExport(params : object) {
	return createAxios({
		url: baseurl + '/DeviceAnalysis/AlarmRecord-Export',
		method: 'get',
		params: params,
		paramsSerializer: params => {
			return stringify(params, { indices: false, allowDots: true });
		}
	})
}