站長資訊網(wǎng)
qs的兩個方法是：1、stringify方法，用于將對象序列化成url形式的字符串，以“&”符號進(jìn)行拼接，語法“qs.stringify(data)”；2、parse方法，用于將URL形式的字符串解析成對象，語法“qs.parse(data)”。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
一、qs是什么？
qs 是一個增加了一些安全性的查詢字符串解析和序列化字符串的庫?？梢赃M(jìn)行對象與字符串之間的一個轉(zhuǎn)換。
二、qs的安裝
qs，是axios中自帶的，也是npm倉庫所管理的包。
安裝方式：
npm install qs
Vue項目中的導(dǎo)入方式：
import qs from 'qs'
Vue項目中的main.js中設(shè)置全局屬性的方式：
Vue.prototype.$qs = qs
三、qs應(yīng)用場景
使用axios，調(diào)用后端接口時使用到的。
請求方式為post，axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urllencoded'，將對象或數(shù)組的參數(shù)使用qs.stringify()進(jìn)行序列化轉(zhuǎn)化
四、qs使用
介紹它的兩個方法：stringify和parse。
qs.stringify(data)
stringify方法，是將對象序列化成url形式的字符串，以&符號進(jìn)行拼接。
onst 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));
如上面代碼所示,輸出結(jié)果如下
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"} uid=cs11&pwd=000000als&username=cs11&password=000000als
qs.parse(data)
parse方法，是將URL形式的字符串解析成對象
示例及輸出效果如下:
import qs from 'qs' const userStr = 'name=xiaoming&password=123456' //qs.parse(userStr) console.log('轉(zhuǎn)換后的格式：',qs.parse(userStr)) // Object{ // name:'xiaoming', // password:'123456' // }
五、qs與JSON的區(qū)別
一直不太了解qs與JSON到底有什么區(qū)別？！網(wǎng)上仔細(xì)查了一下，總結(jié)如下：
| qs | JSON | ||
|---|---|---|---|
| 相同點(diǎn) | 都是進(jìn)行對象與字符串之間的轉(zhuǎn)換 | ||
| 異同點(diǎn) | stringif方法 | 前后端交互時,將對象序列化為url形式的數(shù)據(jù)，用&拼接 |
數(shù)據(jù)轉(zhuǎn)化為正常的json字符串格式 |
|
對象數(shù)據(jù)：{name:'xiaoming',password:'123123'} 轉(zhuǎn)換后數(shù)據(jù)： name=xiaoming&password=123123 |
對象數(shù)據(jù)：{name:'xiaoming',password:'123123'} 轉(zhuǎn)換后數(shù)據(jù)： ’{"name":"xiaoming","password":"123123"}‘ |
||
| parse方法 |
字符串?dāng)?shù)據(jù)： name=xiaoming&password=123123 轉(zhuǎn)換后數(shù)據(jù)： {name:'xiaoming',password:'123123'} |
字符串?dāng)?shù)據(jù)： ’{"name":"xiaoming","password":"123123"}‘ 轉(zhuǎn)換后數(shù)據(jù)： {name:'xiaoming',password:'123123'} |
|
【
