vue/js - qs序列化插件的使用

╰+哭是因爲堅強的太久メ 2021-09-04 03:15 793阅读 0赞

### 一、安装以及引入使用： ###

#### （一）vue的使用方式 ####

##### 1、安装 #####

npm install qs

##### 2、使用 #####

###### （1）全局使用 ######

// 在main.js中引入
    	import qs from 'qs';
    	// 全局配置属性，将之挂在原型链上，在其他页面直接通过 this.$qs 使用即可
    	Vue.prototype.$qs = qs;
    	
    	// 使用
    	let str = "uid=cs11&pwd=000000als&username=cs11&password=000000als";
    	let obj= this.$qs.parse(str);
    	console.log("obj==========>",obj);

###### （2）局部使用 ######

// 引入
    	import qs from 'qs';
    	
    	// 使用
    	let str = "uid=cs11&pwd=000000als&username=cs11&password=000000als";
    	let obj= qs.parse(str);
    	console.log("obj==========>",obj);

#### （二）js的方式： ####

##### 1、引入 #####

###### （1）先下载 qs ，然后再引入使用，可以通过下面这个地址去下载： ######

*  链接: https://pan.baidu.com/s/19vg70kjYit5ubM-1yYChEQ
 *  提取码: jdbe

###### （2）引入代码 ######

##### 2、使用 #####

let qs = Qs;
    let data= { 
    	"date":getDate('now'),
    	"startDate":getDate('start'),
    	"endDate": getDate('end')
    }
    let params = qs.stringify(data)

### 二、使用详情（这里介绍的是引入局部的使用方式，全局使用跟这个差不多，将qs换成this.$qs即可） ###

**qs的使用方式有两种，分别是qs.parse()和qs.stringify()**

#### 1、qs.parse()方法的使用 ####

**qs.parse()是将url解析成对象的形式**

使用例子：

let str = "uid=cs11&pwd=000000als&username=cs11&password=000000als";
    	let obj= qs.parse(str);
    	console.log("obj==========>",obj);
    	/* { uid:"cs11", pwd:"000000als", username:"cs11", password:"000000als" } */

#### 2、qs.stringify()方法的使用 ####

**qs.stringify()是将对象序列化成url的形式以&进行拼接**

使用例子：

let obj = { 
    			uid:"cs11",
    			pwd:"000000als",
    			username:"cs11",
    			password:"000000als"
    		}
    	let str= qs.stringify(obj);
    	console.log("str==========>",str);
    	// uid=cs11&pwd=000000als&username=cs11&password=000000als

### 四、注意点：不要和JSON.parse()以及JSON.stringify()混淆 ###