Vue插件之qs

淡淡的烟草味﹌ 2022-12-20 02:53 189阅读 0赞

# 简介 #

简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

在项目中使用命令行工具输入

> cnpm install qs

安装完成后在需要用到的组件中

> import qs from 'qs’  
> Vue.prototype.$qs = qs

两个常用的方法：

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

# 解析 #

## 示例：解析对象 ##

//解析对象
    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'}

## 示例：解析数组 ##

//用[]解析数组
    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'}]}

# 序列化 #

//对象序列化后
    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