Vue應(yīng)用qs插件實現(xiàn)參數(shù)格式化示例詳解

更新時間：2023年09月25日 09:05:17 作者：SHQ5785

這篇文章主要為大家介紹了Vue應(yīng)用qs插件實現(xiàn)參數(shù)格式化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

一、前言

在vue項目開發(fā)過程中，使用axios請求后臺時，后臺無法獲取前端傳參數(shù)據(jù)。

qs 是一個增加了一些安全性查詢字符串解析和序列化字符串的庫。

二、安裝

npm install qs

三、在組件中應(yīng)用

import qs from 'qs'

或定義為全局組件：

//在main.js引入qs  
import qs from  'qs'  
//配全局屬性配置，在任意組件內(nèi)可以使用this.$qs獲取qs對象 
Vue.prototype.$qs = qs

四、具體應(yīng)用

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

qs.parse()是將URL解析成對象形式;
qs.stringify()是將對象序列化成URL的形式，以&進行拼接;

具體例子如下：

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

序列化后的結(jié)構(gòu)如下：

username=renping&password=123456

五、解析

5.1 解析對象

//解析對象
let res = this.$qs.parse('query[name]=zhangsan')
console.log(res)
//控制臺輸出結(jié)果：{query:{name:'zhangsan'}}
//解析嵌套對象
res = this.$qs.parse('query[name][nickname]=小三兒')
console.log(res)
//控制臺輸出結(jié)果：{query:{name:{nickname:'小三兒'}}}
//當(dāng)使用嵌套對象時，qs 在默認情況下最多解析到的深度是第五層（注：從第一個方括號到算起，到第五個方括號）
res = this.$qs.parse('a[b][c][d][e][f][g][h][i]=j')
console.log(res)
//控制臺輸出結(jié)果：
// a: {
//   b: {
//     c: {
//       d: {
//         e: {
//           f: {
//             '[g][h][i]': 'j'
//           }
//         }
//       }
//     }
//   }
// }
// depth 參數(shù)指定解析深度
//當(dāng) qs 用于解析用戶輸入的時候，解析深度的限制有助于減輕用戶的濫用行為
res = this.$qs.parse('a[b][c][d][e][f][g][h][i]=j', { depth: 1 })
console.log(res)
//控制臺輸出結(jié)果：
// a: {
//     b: {
//       {[c][d][e][f][g][h][i]:'j'}
//     }
//   }
// }
// ignoreQueryPrefix忽略查詢字符串開頭的 ?
res = this.$qs.parse('?a=b&c=d', { ignoreQueryPrefix: true })
console.log(res)
//控制臺輸出結(jié)果：{a:'b':c:'d'}

5.2 解析數(shù)組

//用[]解析數(shù)組
let res = this.$qs.parse('a[]=b&a[]=c')
console.log(res)
//控制臺輸出結(jié)果：{a:['b','c']}
//指定數(shù)組索引
res = this.$qs.parse('a[0]=b&a[1]=c')
console.log(res)
//控制臺輸出結(jié)果：{a:['b','c']}
//要將字符串解析成數(shù)組而不是對象，那么[]之間的值必須是一個數(shù)字
//在創(chuàng)建具有特定索引的數(shù)組時，qs會將稀疏數(shù)組壓縮為僅保留其順序的現(xiàn)有值
res = this.$qs.parse('a[1]=b&a[15]=c')
console.log(res)
//控制臺輸出結(jié)果：{a:['b','c']}
//空字符串也是一個值，并將被保留
res = this.$qs.parse('a[]=&a[]=b')
console.log(res)
//控制臺輸出結(jié)果：{a:['','c']}
res = this.$qs.parse('a[0]=b&a[1]=&a[2]=c')
console.log(res)
//控制臺輸出結(jié)果：{a:['b',','c']}
//qs 限制數(shù)組最大索引為 20，任何索引大于20的數(shù)組成員都將被轉(zhuǎn)換為以索引為鍵的對象
res = this.$qs.parse('a[100]=b')
console.log(res)
//控制臺輸出結(jié)果：{a:['100','b']}
//arrayLimit 選項可以修改默認限制
res = this.$qs.parse('a[1]=b', { arrayLimit: 0 })
console.log(res)
//控制臺輸出結(jié)果：{a:['1','b']}
//設(shè)置 parseArrays 為 false，字符串不解析成數(shù)組
res = this.$qs.parse('a[1]=b', { parseArrays: false })
console.log(res)
//控制臺輸出結(jié)果：{a:{'1','b'}}
//如果混合使用兩種格式，qs 會將字符串解析為對象：
res = this.$qs.parse('a[0]=b&a[b]=c')
console.log(res)
//控制臺輸出結(jié)果：{a:{'0':'b',b:'c'}
//創(chuàng)建元素為對象的數(shù)組
res = this.$qs.parse('a[][b]=c')
console.log(res)
//控制臺輸出結(jié)果：{a:[{b:'c'}]}

5.3 序列化

//對象序列化后
let res = this.$qs.stringify({ a: 'b' })
console.log(res)
//控制臺輸出結(jié)果：a=b
//對象序列化后進行URI編碼后輸出
res = this.$qs.stringify({ a: { b: 'c' } })
console.log(res)
//控制臺輸出結(jié)果：a%5Bb%5D=c
res = this.$qs.parse(res)
console.log(res)
//控制臺輸出結(jié)果：{a:{b:c}}
//設(shè)置 encode 為 false，禁止URI編碼
res = this.$qs.stringify({ a: { b: 'c' } },{encode:false})
console.log(res)
//控制臺輸出結(jié)果：a[b]=c
//設(shè)置 encodeValuesOnly 為 true，禁止URI編碼
res = this.$qs.stringify( { a: 'b', c: ['d', 'e=f'], g: [['h'], ['i']] }, { encodeValuesOnly: true })
console.log(res)
//控制臺輸出結(jié)果：a=b&c[0]=d&c[1]=e%3Df&g[0][0]=h&g[1][0]=i
//當(dāng) encode 被設(shè)置為true時，設(shè)置encoder 選項自定義編碼方式
res = this.$qs.stringify( { a: { b: 'c' } },{encoder:function (str) {
      return "a-b-c"
  }})
console.log(res)
//控制臺輸出結(jié)果：a-b-c=a-b-c
//當(dāng)數(shù)組被序列化時，默認顯示索引
res = this.$qs.stringify({ a: ['b', 'c', 'd'] })
console.log(res)
//控制臺輸出結(jié)果：a%5B0%5D=b&a%5B1%5D=c&a%5B2%5D=d   即：a[0]=b&a[1]=c&a[2]=d
//設(shè)置 indices 為 false 不顯示索引
res = this.$qs.stringify({ a: ['b', 'c', 'd'] },{indices:false})
console.log(res)
//控制臺輸出結(jié)果：a=b&a=c&a=d
//設(shè)置 arrayFormat 選項指定數(shù)組輸出格式
res = this.$qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
console.log(res)
//控制臺輸出結(jié)果：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)
//控制臺輸出結(jié)果：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)
//控制臺輸出結(jié)果：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)
//控制臺輸出結(jié)果：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)
//控制臺輸出結(jié)果：a=&b=
//沒有值的鍵將什么也不返回（例如空對象或數(shù)組）
res = this.$qs.stringify({ a: []  } )
console.log(res)
//控制臺輸出結(jié)果：
res = this.$qs.stringify({ a: {} } )
console.log(res)
//控制臺輸出結(jié)果：
res = this.$qs.stringify({ a: [{}] } )
console.log(res)
//控制臺輸出結(jié)果：
res = this.$qs.stringify({  a: { b: []} } )
console.log(res)
//控制臺輸出結(jié)果：
res = this.$qs.stringify({ a: { b: {}} } )
console.log(res)
//控制臺輸出結(jié)果：
//ddQueryPrefix 設(shè)置為 true可以在查詢字符串前面加 ?
res = this.$qs.stringify({ a: 'b', c: 'd' }, { addQueryPrefix: true })
console.log(res)
//控制臺輸出結(jié)果：?a=b&c=d
//序列化日期對象
var date = new Date(7);
res = this.$qs.stringify({ a: date })
console.log(res)
//控制臺輸出結(jié)果：a=1970-01-01T00%3A00%3A00.007Z  //%3A對應(yīng)的字符為:
res = this.$qs.stringify({ a: date }, { serializeDate: function (d) { return d.getTime(); } })
console.log(res)
//控制臺輸出結(jié)果：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)
//控制臺輸出結(jié)果：a=c&b=f&z=y

拓展閱讀官網(wǎng)

以上就是Vue應(yīng)用qs插件實現(xiàn)參數(shù)格式化示例詳解的詳細內(nèi)容，更多關(guān)于Vue qs參數(shù)格式化的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: