Get / delete method to pass array parameters in Vue
|
When the front-end and back-end interact, sometimes you need to pass an array to the back-end through get or delete. However, the back-end cannot receive data directly because the array parameters will be translated during the transmission process. The result is as follows:
Solution:Use the qs plugin to serialize array parameters
1. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// Output: 'a[0]=b&a[1]=c'
2. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// Output: 'a[]=b&a[]=c'
3. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// Output: 'a=b&a=c'
4. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// Output: 'a=b,c'Install npm install qs use
//In the axios request interceptor import qs from 'qs'
axios.interceptors.request.use(request => {
if (request.method === 'delete' || request.method === 'get') {
request.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
return request
},(error) =>{
return Promise.reject(error);
})Knowledge point extension: Get, Delete, Post, Put passing parameters in Vue For reference only for novice programmers who have just come into contact with Vue2.5 and above and do not understand how to pass parameters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
/*In order to better interact with the front and back ends, introduce the js file axios.js*/
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
// axios request parameter passing // axios get request parameter passing // traditional format get request axios.get('http://localhost:3000/axios?id=123')
.then(function(ret){
console.log(ret.data)
})
// RESTful get request axios.get('http://localhost:3000/axios/123')
.then(function(ret){
console.log(ret.data)
})
// Get request with parameters axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret) {
console.log(ret.data)
})
// // axios delete request parameter axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret) {
console.log(ret.data)
})
//-----------------------------------
// Use axios to make a post request, passing json data by default axios.post('http://localhost:3000/axios', {
'uname': 'lisi',
'pwd': 123
}).then(function(ret) {
console.log(ret.data)
})
// Use axios to make a post request and pass form data var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params)
.then(function (ret) {
console.log(ret.data)
})
// axios put request parameter axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret) {
console.log(ret.data)
})
// For axios, in get and delete requests, parameters are placed in the params attribute // In post and put requests, parameters are placed directly in the object</script>
</body>
</html>The code that initiates the request to the backend (some companies do not allow server-side programmers to write it) The front-end programmer is only for the examination
app.get('/adata', (req, res) => {
res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
res.send('axios get pass parameter' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
res.send('axios get (Restful) pass parameters' + req.params.id)
})
app.delete('/axios', (req, res) => {
res.send('axios get pass parameter' + req.query.id)
})
app.delete('/axios/:id', (req, res) => {
res.send('axios get (Restful) pass parameters' + req.params.id)
})
app.post('/axios', (req, res) => {
res.send('axios post pass parameters' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
res.send('axios put pass parameters' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})This is the end of this article about the get/delete method of passing array parameters in vue. For more relevant content about passing array parameters in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Linux kernel device driver memory management notes
>>: How to change the encoding to utf-8 in mysql version 5.7 under windows
Recommend
Various front-end printing methods of web: CSS controls web page printing style
CSS controls the printing style of web pages : Use...
A few front-end practice summaries of Alipay's new homepage
Of course, it also includes some personal experien...
Detailed explanation of the solution to Tomcat's crash when double-clicking startup.bat
As a programmer who has just learned Tomcat, this...
Summary of frequently used commands for Linux file operations
0. New operation: mkdir abc #Create a new folder ...
Complete steps to build a Laravel development environment using Docker
Preface In this article, we will use Docker to bu...
Solution to mysql failure to start due to insufficient disk space in ubuntu
Preface Recently, I added two fields to a table i...
Examples of optimization techniques for slow query efficiency in MySQL IN statements
The table structure is as follows. There are only...
The qualities and abilities a web designer should have
Web design is an emerging marginal industry that c...
Design Reference Beautiful and Original Blog Design
All blogs listed below are original and uniquely ...
Detailed explanation of Vue.js directive custom instructions
Customize a demo command The syntax of Vue custom...
MAC+PyCharm+Flask+Vue.js build system
Table of contents Configure node.js+nvm+npm npm s...
Detailed explanation of the code for querying data of a certain day, month, or year in MySQL
today select * from table name where to_days(time...
Detailed explanation of the use cases of Vue listeners
The first one is to use jQuery's ajax to send...
Web page custom selection box Select
Everyone may be familiar with the select drop-dow...
SQL function to merge a field together
Recently, I need to query all the fields in a rel...