Vue中qs序列化插件的使用

2021年5月4日 0 条评论 10 次阅读 1 人点赞

qs简述

qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串,或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。Vue中提供了qs这个插件,可以进行数据序列化。并且,其是具有一些附加安全性的querystring解析和字符串化库。
Github代码仓https://github.com/ljharb/qs

qs结合axios使用说明

安装依赖

npm install qs 
或
cnpm install qs (需淘宝镜像的才可以使用)

全局引入

在main.js中对js进行配置

//在main.js引入qs
import  qs from 'qs'
//配全局属性配置,在任意组件内可以使用this.$qs获取qs对象
 Vue.prototype.$qs = qs

qs序列化方法及实际应用

qs.parse()将URL解析成对象的形式

//qs.parse()案例
const qs = require('qs');
let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
qs.parse(url);
console.log(qs.parse(url));

如上代码输出结果:

{
method:'query_sql_dataset_data',
projectID:'85',
appToken:'7d22e38e-5717-11e7-907b-a6006ad3dba0'
}

qs.stringify()将对象 序列化成URL的形式以&进行拼接

const qs = require('qs');
let obj= {
     method: "query_sql_dataset_data",
     projectId: "85",
     appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
     datasetId: " 12564701"
   };
qs.stringify(obj);
console.log(qs.stringify(obj));

以上代码输出结果

method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0&datasetID=%12564701

Vue项目中的应用

//用户登入简单应用
this.$axios.post('/api/userController/login', this.$qs.stringify({
  userName: this.userName,
    password: this.password
    })).then((response) => {
......

JSON.stringify(param)与qs.stringify(param)的区别

//JSON.stringify(param)处理结果
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}

//qs.stringify(param)处理结果
uid=cs11&pwd=000000als&username=cs11&password=000000als

传输对象数组

避免踩坑,否则你的后端只会收到空集
- arrayFormat 可以格式化你的数组参数,以保证传输正确

qs.stringify({ 'list':this.excelData },{ arrayFormat: 'brackets' })
  • arrayformat选项输出 指定数组的格式
  qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'indices' })
  // 'id[0]=b&id[1]=c'
  qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'brackets' })
  // 'id[]=b&id[]=c'
  qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'repeat' })
  // 'id=b&id=c'
Master

Master

这个人太懒什么东西都没留下

文章评论(0)