What are the two methods of qs in vue

The two methods of qs are: 1. The stringify method is used to serialize the object into a string in the form of a URL, splicing it with the "&" symbol, and the syntax is "qs.stringify(data)"; 2. The parse method is used to parse a string in the form of a URL into an object. The syntax is "qs.parse(data)".

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

1. What is qs?

qs is a library for query string parsing and string serialization that adds some security. A conversion between objects and strings can be performed.

2. Installation of qs

qs comes with axios and is also a package managed by the npm warehouse.

Installation method:

npm install qs

Import method in the Vue project:

import qs from 'qs'

main in the Vue project How to set global properties in .js:

Vue.prototype.$qs = qs

3. QS application scenario

Use axios to call the back-end interface.

The request method is post, axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urllencoded', use qs.stringify() for the parameters of the object or array Perform serialization conversion

4. QS uses

Introducing its two methods: stringify and parse.

qs.stringify(data)

The stringify method is to serialize the object into a string in the form of url, with & Symbols are spliced.

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));

As shown in the above code, the output result is as follows

{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als

qs.parse(data)

The parse method parses a string in the form of a URL into an object.

The example and output effect are as follows:

import qs from 'qs'

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

// Object{
//          name:'xiaoming',
//          password:'123456'
//        }

5. The difference between qs and JSON

I’ve never quite understood the difference between qs and JSON? ! I checked carefully online and summarized it as follows:

The difference between qs and JSONThe same pointsSimilarities and DifferencesConvert data to normal json string formatObject data: {name:'xiaoming',password:'123123'}parse method##[Related recommendations: vuejs video tutorial、

	##qs	JSON
are all about conversion between objects and strings
stringif method	When the front-end and back-end interact, the object is serialized into data in url form and spliced ​​with &
		Converted data: name=xiaoming&password=123123 ##Object data: {name:'xiaoming',password:'123123'}	Converted data: '{"name":"xiaoming","password":"123123"}'
	String data:	name=xiaoming&password=123123 Converted data: {name:'xiaoming',password:'123123'} String data:	'{"name":"xiaoming","password":"123123"}' Converted data ： {name:'xiaoming',password:'123123'}

web front-end development

】

The above is the detailed content of What are the two methods of qs in vue. For more information, please follow other related articles on the PHP Chinese website!