Get/Delete-Methode zum Übergeben von Array-Parametern in Vue
|
Wenn Front-End und Back-End interagieren, müssen Sie manchmal ein Array per Get oder Delete an das Back-End übergeben. Das Back-End kann die Daten jedoch nicht direkt empfangen, da die Array-Parameter während des Übertragungsvorgangs übersetzt werden. Das Ergebnis ist wie folgt:
Lösung:Verwenden Sie das qs-Plugin, um Array-Parameter zu serialisieren
1. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// Ausgabe: 'a[0]=b&a[1]=c'
2. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'Klammern' })
// Ausgabe: 'a[]=b&a[]=c'
3. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'wiederholen' })
// Ausgabe: 'a=b&a=c'
4. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'Komma' })
// Ausgabe: 'a=b,c'Installieren npm installiere qs verwenden
//Im Axios-Anforderungs-Interceptor importiere qs von 'qs'
axios.interceptors.request.use(Anfrage => {
wenn (Anfragemethode === 'löschen' || Anfragemethode === 'abrufen') {
request.paramsSerializer = Funktion(Params) {
return qs.stringify(params, { arrayFormat: 'wiederholen' })
}
}
Rücksendeantrag
},(Fehler) =>{
returniere Promise.reject(Fehler);
})Wissenspunkterweiterung: Abrufen, Löschen, Posten, Einfügen von Parameterübergabe in Vue Nur als Referenz für unerfahrene Programmierer, die gerade erst mit Vue2.5 und höher in Berührung gekommen sind und nicht wissen, wie man Parameter übergibt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
</Kopf>
<Text>
/*Um besser mit dem Front- und Back-End zu interagieren, führen Sie die js-Datei axios.js ein*/
<script type="text/javascript" src="js/axios.js"></script>
<Skripttyp="text/javascript">
// Übergabe der Axios-Anforderungsparameter // Übergabe der Axios-Get-Anforderungsparameter // Get-Anforderung im traditionellen Format axios.get('http://localhost:3000/axios?id=123')
.dann(Funktion(ret){
Konsole.log(ret.data)
})
// RESTful-Get-Anfrage axios.get('http://localhost:3000/axios/123')
.dann(Funktion(ret){
Konsole.log(ret.data)
})
// Anfrage mit den Parametern axios.get('http://localhost:3000/axios', { abrufen
Parameter: {
ID: 789
}
}).dann(Funktion(ret) {
Konsole.log(ret.data)
})
// // Axios-Löschanforderungsparameter axios.delete('http://localhost:3000/axios', {
Parameter: {
ID: 111
}
}).dann(Funktion(ret) {
Konsole.log(ret.data)
})
//----------------------------------
//Verwende axios, um eine Post-Anfrage zu stellen, und übergebe standardmäßig JSON-Daten axios.post('http://localhost:3000/axios', {
'Name': 'lisi',
'Passwort': 123
}).dann(Funktion(ret) {
Konsole.log(ret.data)
})
// Verwenden Sie Axios, um eine Post-Anfrage zu stellen und Formulardaten zu übergeben. var params = new URLSearchParams();
params.append('uname', 'zhangsan');
Parameter.append('pwd', '111');
axios.post('http://localhost:3000/axios', Parameter)
.dann(Funktion (ret) {
Konsole.log(ret.data)
})
// Axios Put-Anforderungsparameter axios.put('http://localhost:3000/axios/123', {
Benutzername: 'lisi',
Passwort: 123
}).dann(Funktion(ret) {
Konsole.log(ret.data)
})
// Für Axios werden Parameter in Get- und Delete-Anfragen im Params-Attribut platziert // In Post- und Put-Anfragen werden Parameter direkt im Objekt platziert</script>
</body>
</html>Der Code, der die Anfrage an das Backend initiiert (einige Unternehmen erlauben es nicht, dass serverseitige Programmierer ihn schreiben). Der Frontend-Programmierer ist nur für die Prüfung zuständig
app.get('/adata', (req, res) => {
res.send('Hallo Axios!')
})
app.get('/axios', (req, res) => {
res.send('axios erhält Pass-Parameter' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
res.send('axios get (Restful) Parameter übergeben' + req.params.id)
})
app.delete('/axios', (req, res) => {
res.send('axios erhält Pass-Parameter' + req.query.id)
})
app.delete('/axios/:id', (req, res) => {
res.send('axios get (Restful) Parameter übergeben' + req.params.id)
})
app.post('/axios', (req, res) => {
res.send('Axios Post-Pass-Parameter' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
res.send('axios setze Pass-Parameter' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})Dies ist das Ende dieses Artikels über die Get/Delete-Methode zum Übergeben von Array-Parametern in Vue. Weitere relevante Inhalte zum Übergeben von Array-Parametern in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Hinweise zur Speicherverwaltung von Linux-Kernel-Gerätetreibern
>>: So ändern Sie die Kodierung in MySQL Version 5.7 unter Windows auf UTF-8
Artikel empfehlen
Die Bedeutung der 5 Leerzeichenarten in HTML
HTML bietet fünf Leerzeichen mit unterschiedliche...
Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen
Inhaltsverzeichnis Überblick Vom Binärbaum zum B+...
Sequenzimplementierungsmethode basierend auf MySQL
Das Team ersetzte den neuen Rahmen. Alle neuen Un...
Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing
Die erste Methode zur Parameterübergabe ist die d...
Linux-Swap-Partition (ausführliche Erklärung)
Inhaltsverzeichnis linux 1. Was ist SWAP 2. Was p...
Vue implementiert eine Eingabekomponente, die den Tastenkombinationseffekt der Tastenanzeige erhält
Ich bin auf die Anforderung gestoßen, Tastenkombi...
Linux-Installation Apache-Server-Konfigurationsprozess
Bereiten Sie die Taschen vor Installieren Überprü...
Zusammenfassung der in MySQL häufig verwendeten Typkonvertierungsfunktionen (empfohlen)
1. Concat-Funktion. Häufig verwendete Verbindungs...
Implementierung des WeChat-Tap-Animationseffekts basierend auf dem CSS3-Animationsattribut
Als ich die kürzlich beliebte WeChat-Tap-Funktion...
So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch
Inhaltsverzeichnis Vorwort 1. Einfügen von ignore...
So installieren und konfigurieren Sie die dekomprimierte Version der MySQL-Datenbank unter einem Linux-System
1. Entpacken Sie die Datei in das aktuelle Verzei...
Vue implementiert die Verpackung und Verwendung von Komponenten zur Kontrolle der Warenanzahl
Die Kapselung und Verwendung der Vue-Komponente z...
Lösen Sie das Problem von secure_file_priv null
Fügen Sie secure_file_priv = ' '； führen ...
WeChat-Applet implementiert Suchfeldfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Beispiel für die Konvertierung eines eindimensionalen JS-Arrays in ein dreidimensionales Array
Heute habe ich gesehen, wie ein Freund im Q&A...