Vue进阶（幺捌伍）：应用 qs 插件实现参数格式化

秒速五厘米 2022-11-14 14:39 200阅读 0赞

### 文章目录 ###

*   *  一、前言
     *  二、安装
     *  三、在组件中应用
     *  四、具体应用
     *  五、解析
     *   *  5.1 解析对象
         *  5.2 解析数组
         *  5.3 序列化
     *  六、拓展阅读

--------------------

## 一、前言 ##

在`vue`项目开发过程中，使用`axios`请求后台时，后台无法获取前端传参数据。

`qs` 是一个增加了一些安全性查询**字符串解析**和**序列化字符串**的库。

## 二、安装 ##

npm install qs

## 三、在组件中应用 ##

import qs from 'qs'

或定义为全局组件：

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

## 四、具体应用 ##

主要使用`qs.parse(),qs.string`。

*  `qs.parse()`是将`URL`解析成**对象**形式;
 *  `qs.stringify()`是将**对象**序列化成`URL`的形式，以`&`进行拼接;

具体例子如下：

let data = qs.stringify({ 
        "username":this.username,
        "password":this.password
    });

序列化后的结构如下：

username=renping&password=123456

## 五、解析 ##

### 5.1 解析对象 ###

//解析对象
    let res = this.$qs.parse('query[name]=zhangsan')
    console.log(res)
    //控制台输出结果：{query:{name:'zhangsan'}}
    
    //解析嵌套对象
    res = this.$qs.parse('query[name][nickname]=小三儿')
    console.log(res)
    //控制台输出结果：{query:{name:{nickname:'小三儿'}}}
    
    //当使用嵌套对象时，qs 在默认情况下最多解析到的深度是第五层（注：从第一个方括号到算起，到第五个方括号）
    res = this.$qs.parse('a[b][c][d][e][f][g][h][i]=j')
    console.log(res)
    //控制台输出结果：
    // a: { 
    // b: { 
    // c: { 
    // d: { 
    // e: { 
    // f: { 
    // '[g][h][i]': 'j'
    // }
    // }
    // }
    // }
    // }
    // }
    
    // depth 参数指定解析深度
    //当 qs 用于解析用户输入的时候，解析深度的限制有助于减轻用户的滥用行为
    res = this.$qs.parse('a[b][c][d][e][f][g][h][i]=j', {  depth: 1 })
    console.log(res)
    //控制台输出结果：
    // a: { 
    // b: { 
    // {[c][d][e][f][g][h][i]:'j'}
    // }
    // }
    // }
    
    // ignoreQueryPrefix忽略查询字符串开头的 ?
    res = this.$qs.parse('?a=b&c=d', {  ignoreQueryPrefix: true })
    console.log(res)
    //控制台输出结果：{a:'b':c:'d'}

### 5.2 解析数组 ###

//用[]解析数组
    let res = this.$qs.parse('a[]=b&a[]=c')
    console.log(res)
    //控制台输出结果：{a:['b','c']}
    
    //指定数组索引
    res = this.$qs.parse('a[0]=b&a[1]=c')
    console.log(res)
    //控制台输出结果：{a:['b','c']}
    
    //要将字符串解析成数组而不是对象，那么[]之间的值必须是一个数字
    //在创建具有特定索引的数组时，qs会将稀疏数组压缩为仅保留其顺序的现有值
    res = this.$qs.parse('a[1]=b&a[15]=c')
    console.log(res)
    //控制台输出结果：{a:['b','c']}
    
    //空字符串也是一个值，并将被保留
    res = this.$qs.parse('a[]=&a[]=b')
    console.log(res)
    //控制台输出结果：{a:['','c']}
    res = this.$qs.parse('a[0]=b&a[1]=&a[2]=c')
    console.log(res)
    //控制台输出结果：{a:['b',','c']}
    
    //qs 限制数组最大索引为 20，任何索引大于20的数组成员都将被转换为以索引为键的对象
    res = this.$qs.parse('a[100]=b')
    console.log(res)
    //控制台输出结果：{a:['100','b']}
    
    //arrayLimit 选项可以修改默认限制
    res = this.$qs.parse('a[1]=b', {  arrayLimit: 0 })
    console.log(res)
    //控制台输出结果：{a:['1','b']}
    
    //设置 parseArrays 为 false，字符串不解析成数组
    res = this.$qs.parse('a[1]=b', {  parseArrays: false })
    console.log(res)
    //控制台输出结果：{a:{'1','b'}}
    
    //如果混合使用两种格式，qs 会将字符串解析为对象：
    res = this.$qs.parse('a[0]=b&a[b]=c')
    console.log(res)
    //控制台输出结果：{a:{'0':'b',b:'c'}
    
    //创建元素为对象的数组
    res = this.$qs.parse('a[][b]=c')
    console.log(res)
    //控制台输出结果：{a:[{b:'c'}]}

### 5.3 序列化 ###

//对象序列化后
    let res = this.$qs.stringify({  a: 'b' })
    console.log(res)
    //控制台输出结果：a=b
    
    //对象序列化后进行URI编码后输出
    res = this.$qs.stringify({  a: {  b: 'c' } })
    console.log(res)
    //控制台输出结果：a%5Bb%5D=c
    
    res = this.$qs.parse(res)
    console.log(res)
    //控制台输出结果：{a:{b:c}}
    
    //设置 encode 为 false，禁止URI编码
    res = this.$qs.stringify({  a: {  b: 'c' } },{ encode:false})
    console.log(res)
    //控制台输出结果：a[b]=c
    
    //设置 encodeValuesOnly 为 true，禁止URI编码
    res = this.$qs.stringify( {  a: 'b', c: ['d', 'e=f'], g: [['h'], ['i']] }, {  encodeValuesOnly: true })
    console.log(res)
    //控制台输出结果：a=b&c[0]=d&c[1]=e%3Df&g[0][0]=h&g[1][0]=i
    
    //当 encode 被设置为true时，设置encoder 选项自定义编码方式
    res = this.$qs.stringify( {  a: {  b: 'c' } },{ encoder:function (str) { 
          return "a-b-c"
      }})
    console.log(res)
    //控制台输出结果：a-b-c=a-b-c
    
    //当数组被序列化时，默认显示索引
    res = this.$qs.stringify({  a: ['b', 'c', 'd'] })
    console.log(res)
    //控制台输出结果：a%5B0%5D=b&a%5B1%5D=c&a%5B2%5D=d 即：a[0]=b&a[1]=c&a[2]=d
    
    //设置 indices 为 false 不显示索引
    res = this.$qs.stringify({  a: ['b', 'c', 'd'] },{ indices:false})
    console.log(res)
    //控制台输出结果：a=b&a=c&a=d
    
    //设置 arrayFormat 选项指定数组输出格式
    res = this.$qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'indices' })
    console.log(res)
    //控制台输出结果：a%5B0%5D=b&a%5B1%5D=c 即：a[0]=b&a[1]=c
    res = this.$qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'brackets' })
    console.log(res)
    //控制台输出结果：a%5B%5D=b&a%5B%5D=c 即：a[]=b&a[]=c
    res = this.$qs.stringify({  a: {  a: ['b', 'c'] }},{  arrayFormat: 'repeat' })
    console.log(res)
    //控制台输出结果：a%5Ba%5D=b&a%5Ba%5D=c 即：a[a]=b&a[a]=c
    
    //对象序列化时，默认使用 []
    res = this.$qs.stringify({  a: {  b: {  c: 'd', e: 'f' } } })
    console.log(res)
    //控制台输出结果：a%5Bb%5D%5Bc%5D=d&a%5Bb%5D%5Be%5D=f 即：a[b][c]=d&a[b][e]=f
    
    //空字符串和null值将被省略，但是=会保留
    //值为 undefined 的属性将会被完全忽略
    //默认情况下，null 值被视为空对象
    res = this.$qs.stringify({  a:'',b: null, c: undefined })
    console.log(res)
    //控制台输出结果：a=&b=
    
    //没有值的键将什么也不返回（例如空对象或数组）
    res = this.$qs.stringify({  a: []  } )
    console.log(res)
    //控制台输出结果：
    res = this.$qs.stringify({  a: { } } )
    console.log(res)
    //控制台输出结果：
    res = this.$qs.stringify({  a: [{ }] } )
    console.log(res)
    //控制台输出结果：
    res = this.$qs.stringify({   a: {  b: []} } )
    console.log(res)
    //控制台输出结果：
    res = this.$qs.stringify({  a: {  b: { }} } )
    console.log(res)
    //控制台输出结果：
    
    //ddQueryPrefix 设置为 true可以在查询字符串前面加 ?
    res = this.$qs.stringify({  a: 'b', c: 'd' }, {  addQueryPrefix: true })
    console.log(res)
    //控制台输出结果：?a=b&c=d
    
    //序列化日期对象
    var date = new Date(7);
    res = this.$qs.stringify({  a: date })
    console.log(res)
    //控制台输出结果：a=1970-01-01T00%3A00%3A00.007Z //%3A对应的字符为:
    res = this.$qs.stringify({  a: date }, {  serializeDate: function (d) {  return d.getTime(); } })
    console.log(res)
    //控制台输出结果：a=7
    
    
    //使用 sort 选项来修改键的顺序
    function alphaSort(a, b) { 
      return a.localeCompare(b);
    }
    res = this.$qs.stringify({  a: 'c', z: 'y', b : 'f' }, {  sort: alphaSort })
    console.log(res)
    //控制台输出结果：a=c&b=f&z=y

## 六、拓展阅读 ##

*  [官网][Link 1]

[Link 1]: https://www.npmjs.com/package/qs