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

Webseiten-Erlebnis: Planung und Design

1. Klären Sie die Designrichtung <br />Zuers...

In welchen Szenarien in JavaScript können Pfeilfunktionen nicht verwendet werden?

Inhaltsverzeichnis 1. Objektmethoden definieren 2...

Verwenden Sie Vue, um die Funktion für handschriftliche Signaturen zu implementieren

Persönliche Implementierungs-Screenshots: Install...

Detaillierte Erläuterung des Nest.js-Hashing- und Verschlüsselungsbeispiels

0x0 Einführung Zunächst einmal: Was ist ein Hash-...

Javascript realisiert 10-Sekunden-Countdown zur Bezahlung

In diesem Artikel wird der spezifische Code von J...

Detaillierte Installation und Verwendung von SSH in der Ubuntu-Umgebung

SSH steht für Secure Shell, ein sicheres Übertrag...

Das Problem, dass beim Verbinden mit der MySQL-Datenbank in Idea chinesische Zeichen verstümmelt erscheinen

Problem: Bei Verwendung von JDBC zur Verbindung m...

Tutorial-Diagramm zur Installation von TomCat unter Windows 10

Installieren Sie TomCat unter Windows Dieser Arti...

Erhalten Sie schnell Datenbankverbindungsinformationen und einige Erweiterungen über Zabbix

Hintergrund Da die Anzahl der Anwendungssysteme w...

Detaillierte Erklärung zur Verwendung der React-Listenleiste und der Warenkorbkomponenten

In diesem Artikelbeispiel wird der spezifische Co...

So starten und stoppen Sie das Shell-Skript zur Bereitstellung eines SpringBoot-JAR-Programms unter Linux

Lassen Sie mich Ihnen ohne weitere Umschweife den...

So optimieren Sie die MySQL-Abfragegeschwindigkeit

In den vorherigen Kapiteln haben wir die Auswahl ...

Unterschiede zwischen MySQL MyISAM und InnoDB

Der Unterschied: 1. InnoDB unterstützt Transaktio...

So ändern Sie die Ubuntu-Quellliste (Quellliste) - detaillierte Erklärung

Einführung Die Standardquelle von Ubuntu ist kein...

Linux CentOS6.5 yum installiere mysql5.6

In diesem Artikel wird der einfache Prozess der I...