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

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

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

一、前言

在vue項(xiàng)目開(kāi)發(fā)過(guò)程中，使用axios請(qǐng)求后臺(tái)時(shí)，后臺(tái)無(wú)法獲取前端傳參數(shù)據(jù)。

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

二、安裝

npm install qs

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

import qs from 'qs'

或定義為全局組件：

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

四、具體應(yīng)用

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

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

具體例子如下：

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

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

username=renping&password=123456

五、解析

5.1 解析對(duì)象

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

5.2 解析數(shù)組

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

5.3 序列化

//對(duì)象序列化后
let res = this.$qs.stringify({ a: 'b' })
console.log(res)
//控制臺(tái)輸出結(jié)果：a=b
//對(duì)象序列化后進(jìn)行URI編碼后輸出
res = this.$qs.stringify({ a: { b: 'c' } })
console.log(res)
//控制臺(tái)輸出結(jié)果：a%5Bb%5D=c
res = this.$qs.parse(res)
console.log(res)
//控制臺(tái)輸出結(jié)果：{a:{b:c}}
//設(shè)置 encode 為 false，禁止URI編碼
res = this.$qs.stringify({ a: { b: 'c' } },{encode:false})
console.log(res)
//控制臺(tái)輸出結(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)
//控制臺(tái)輸出結(jié)果：a=b&c[0]=d&c[1]=e%3Df&g[0][0]=h&g[1][0]=i
//當(dāng) encode 被設(shè)置為true時(shí)，設(shè)置encoder 選項(xiàng)自定義編碼方式
res = this.$qs.stringify( { a: { b: 'c' } },{encoder:function (str) {
      return "a-b-c"
  }})
console.log(res)
//控制臺(tái)輸出結(jié)果：a-b-c=a-b-c
//當(dāng)數(shù)組被序列化時(shí)，默認(rèn)顯示索引
res = this.$qs.stringify({ a: ['b', 'c', 'd'] })
console.log(res)
//控制臺(tái)輸出結(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)
//控制臺(tái)輸出結(jié)果：a=b&a=c&a=d
//設(shè)置 arrayFormat 選項(xiàng)指定數(shù)組輸出格式
res = this.$qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
console.log(res)
//控制臺(tái)輸出結(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)
//控制臺(tái)輸出結(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)
//控制臺(tái)輸出結(jié)果：a%5Ba%5D=b&a%5Ba%5D=c   即：a[a]=b&a[a]=c
//對(duì)象序列化時(shí)，默認(rèn)使用 []
res = this.$qs.stringify({ a: { b: { c: 'd', e: 'f' } } })
console.log(res)
//控制臺(tái)輸出結(jié)果：a%5Bb%5D%5Bc%5D=d&a%5Bb%5D%5Be%5D=f   即：a[b][c]=d&a[b][e]=f
//空字符串和null值將被省略，但是=會(huì)保留
//值為 undefined 的屬性將會(huì)被完全忽略
//默認(rèn)情況下，null 值被視為空對(duì)象
res = this.$qs.stringify({ a:'',b: null, c: undefined })
console.log(res)
//控制臺(tái)輸出結(jié)果：a=&b=
//沒(méi)有值的鍵將什么也不返回（例如空對(duì)象或數(shù)組）
res = this.$qs.stringify({ a: []  } )
console.log(res)
//控制臺(tái)輸出結(jié)果：
res = this.$qs.stringify({ a: {} } )
console.log(res)
//控制臺(tái)輸出結(jié)果：
res = this.$qs.stringify({ a: [{}] } )
console.log(res)
//控制臺(tái)輸出結(jié)果：
res = this.$qs.stringify({  a: { b: []} } )
console.log(res)
//控制臺(tái)輸出結(jié)果：
res = this.$qs.stringify({ a: { b: {}} } )
console.log(res)
//控制臺(tái)輸出結(jié)果：
//ddQueryPrefix 設(shè)置為 true可以在查詢字符串前面加 ?
res = this.$qs.stringify({ a: 'b', c: 'd' }, { addQueryPrefix: true })
console.log(res)
//控制臺(tái)輸出結(jié)果：?a=b&c=d
//序列化日期對(duì)象
var date = new Date(7);
res = this.$qs.stringify({ a: date })
console.log(res)
//控制臺(tái)輸出結(jié)果：a=1970-01-01T00%3A00%3A00.007Z  //%3A對(duì)應(yīng)的字符為:
res = this.$qs.stringify({ a: date }, { serializeDate: function (d) { return d.getTime(); } })
console.log(res)
//控制臺(tái)輸出結(jié)果：a=7
//使用 sort 選項(xiàng)來(lái)修改鍵的順序
function alphaSort(a, b) {
  return a.localeCompare(b);
}
res = this.$qs.stringify({ a: 'c', z: 'y', b : 'f' }, { sort: alphaSort })
console.log(res)
//控制臺(tái)輸出結(jié)果：a=c&b=f&z=y

拓展閱讀官網(wǎng)

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

您可能感興趣的文章: