Get/Delete-Methode zum Übergeben von Array-Parametern in Vue

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:

Parameter: { name : [ 1, 2, 3 ] }
Übersetzungseffekt: http://aaa.com?name[]=1&name[]=2&name[]=3
Zielwirkung: http://aaa.com?name=1&name=2&name=3

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:
  • Beispiel für die Übergabe von Array-Parametern in einer Get-Anfrage in Vue
  • Vue Axios Datenanforderung abrufen, Post-Methode und Beispiel ausführliche Erklärung
  • Vue erhält URL-Parameter und gibt Arrays von Get-Parametern zurück
  • So übergeben Sie Array-Parameter in der Get-Methode\Post-Methode in Vue

<<:  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

Lösen Sie das Problem, dass die Zeitzone in der Linux-Umgebung nicht eingestellt werden kann

Beim Ändern der Zeitzone unter Linux ist es immer...

Zweistündiges Docker-Einführungstutorial

Inhaltsverzeichnis 1.0 Einleitung 2.0 Docker-Inst...

Element-Beispielcode zum Implementieren dynamischer Tabellen

Inhaltsverzeichnis 【Code-Hintergrund】 【Code-Imple...

Detaillierte Erklärung des gesamten Prozesses und der Schritte zur Installation von Clion auf Ubuntu16.04

Erklären Sie den gesamten Prozess von CLion von G...

CSS3-Countdown-Effekt

Ergebnisse erzielen Implementierungscode html <...

Fallstudie zum JavaScript DOMContentLoaded-Ereignis

DOMContentLoaded-Ereignis Es wird buchstäblich au...

Detaillierte Erläuterung der Konfiguration und Serialisierung von Nest.js-Umgebungsvariablen

Eine kurze Beschreibung der Umgebungsvariablenkon...

Detaillierte Erläuterung zum Erstellen und Aufrufen von gespeicherten MySQL-Prozeduren

Inhaltsverzeichnis Vorwort Gespeicherte Prozedur:...

Der Unterschied zwischen HTML Empty Link href="#" und href="javascript:void(0)"

# enthält eine Standortinformation. Der Standardan...

Lösung für das Vue-Datenzuweisungsproblem

Lassen Sie mich ein Problem zusammenfassen, mit d...

Beispielcode zur Implementierung einer schwebenden Seitenbox basierend auf JS

Wenn die Bildlaufleiste nach unten gezogen wird, ...

Verwenden Sie den Linux-Befehl „seq“, um eine Zahlenfolge zu generieren (empfohlen)

Der Linux-Befehl „seq“ kann blitzschnell Zahlenli...

So kapseln Sie Paging-Komponenten manuell in Vue3.0

In diesem Artikel wird der spezifische Code der m...

Zusammenfassung der für MySQL erforderlichen allgemeinen Kenntnisse

Inhaltsverzeichnis Primärschlüsseleinschränkung E...

Verstehen von MySQL-Deadlock-Routinen durch eindeutige Index-S-Sperre und X-Sperre

In „MySQL-Deadlock-Probleme anhand des Quellcodes...