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
How to implement draggable components in Vue
This article shares with you how to implement dra...
How to achieve 3D dynamic text effect with three.js
Preface Hello everyone, this is the CSS wizard - ...
How to install and configure the decompressed version of MySQL database under Linux system
1. Unzip the file to the current directory Comman...
Detailed explanation of Nginx static file service configuration and optimization
Root directory and index file The root directive ...
The data folder failed to be created automatically during the installation of mysql8.0.14.zip. The service cannot be started.
After reinstalling the system today, I reinstalle...
The main idea of dynamically setting routing permissions in Vue
I have seen some dynamic routing settings on the ...
How to start jar package and run it in the background in Linux
The Linux command to run the jar package is as fo...
Vue login function implementation
Table of contents Written in front Login Overview...
JavaScript implements H5 gold coin function (example code)
Today I made a Spring Festival gold coin red enve...
Detailed explanation of JavaScript axios installation and packaging case
1. Download the axios plugin cnpm install axios -...
Navicat for MySQL scheduled database backup and data recovery details
Database modification or deletion operations may ...
Win10 installation of MySQL 5.7 MSI version of the tutorial with pictures and text
I installed it in msi format, mainly to see the m...
Vue uses OSS to upload pictures or attachments
Use OSS to upload pictures or attachments in vue ...
Detailed explanation of component development of Vue drop-down menu
This article example shares the specific code for...
Design theory: the basics of font design
<br />Words are the inevitable product of hu...