Vue知识点：qs

一、qs是什么？
qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。

二、qs的安装
qs，是axios中自带的，也是npm仓库所管理的包。

安装方式：
npm install qs
Vue项目中的导入方式：
import qs from 'qs'
Vue项目中的main.js中设置全局属性的方式：
Vue.prototype.$qs = qs
三、qs应用场景
使用axios，调用后端接口时使用到的。

请求方式为post，axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urllencoded'，将对象或数组的参数使用qs.stringify()进行序列化转化

四、qs使用
介绍它的两个方法：stringify和parse。

qs.stringify(data)
stringify方法，是将对象序列化成url形式的字符串，以&符号进行拼接。

示例及输出效果如下:

const userObj = {name:'xiaoming',password:'123123'}
qs.stringify(userObj)
console.log('转换后的格式：',qs.stringify(userObj)


// 转换后的格式：name=xiaoming&password=123123
qs.parse(data)
parse方法，是将URL形式的字符串解析成对象

示例及输出效果如下:

import qs from 'qs'

const userStr = 'name=xiaoming&password=123456'
//qs.parse(userStr)
console.log('转换后的格式：',qs.parse(userStr))

// Object{
// name:'xiaoming',
// password:'123456'
// }
五、qs与JSON的区别
一直不太了解qs与JSON到底有什么区别？！网上仔细查了一下，总结如下：

 

 

qs与JSON的区别
qs JSON
相同点 都是进行对象与字符串之间的转换
异同点 stringif方法 前后端交互时,将对象序列化为url形式的数据，用&拼接
数据转化为正常的json字符串格式

对象数据：{name:'xiaoming',password:'123123'}

转换后数据：

name=xiaoming&password=123123

对象数据：{name:'xiaoming',password:'123123'}

转换后数据：

’{"name":"xiaoming","password":"123123"}‘

parse方法
字符串数据：

name=xiaoming&password=123123

转换后数据：

{name:'xiaoming',password:'123123'}

字符串数据：

’{"name":"xiaoming","password":"123123"}‘

转换后数据：

{name:'xiaoming',password:'123123'}