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

Methoden und Techniken zur Gestaltung einer interessanten Website (Bild)

Haben Sie schon einmal eine Situation erlebt, in d...

Bootstrap 3.0-Lernunterlagen für Anfänger

Als ersten Artikel dieser Studiennotiz beginnen w...

Detaillierte Erläuterung der Wertübertragung von nicht über- und untergeordneten Komponenten in Vue3

Inhaltsverzeichnis App.vue sub1.vue sub2.vue Zusa...

Detaillierte Erläuterung des Lese-Commits der MySQL-Transaktionsisolationsebene

MySQL-Transaktionsisolationsebene anzeigen mysql&...

Wie autorisiert man in Linux den gesamten Inhalt eines Ordners für einen bestimmten Benutzer?

【Problemanalyse】 Wir können den Befehl chown verw...

Anleitung zum Zurücksetzen des MySQL/MariaDB-Root-Passworts

Vorwort Vergessene Passwörter sind ein Problem, d...

Erfahren Sie, wie Sie eine MySQL-Datenbank auf dem Mac installieren

Laden Sie MySQL für Mac herunter: https://downloa...

Entmystifizierung des HTML 5-Arbeitsentwurfs

Das World Wide Web Consortium (W3C) hat einen Entw...

Gründe und Lösungen für das Nicht-Wirksamwerden der MySQL-SQL-Modus-Änderung

Inhaltsverzeichnis Vorwort Szenariosimulation Zus...

So stellen Sie mit C++ eine Verbindung zu MySQL her

C++ stellt zu Ihrer Information eine Verbindung z...

JavaScript implementiert die H5-Goldmünzenfunktion (Beispielcode)

Heute habe ich eine Aktivität für einen roten Ums...

So erzwingen Sie die vertikale Anzeige auf mobilen Seiten

Ich habe kürzlich bei der Arbeit eine mobile Seit...

Detaillierte Erklärung von MySQL Explain

Bei unserer täglichen Arbeit führen wir manchmal ...

Detaillierte Erklärung zur Verwendung von $emit in Vue.js

1. Übergeordnete Komponenten können Props verwend...

MySQL8.0-Installationsprozess unter Centos7 in VMware Workstation16 und Navicat-Remoteverbindung

Inhaltsverzeichnis 1. CentOS7+MySQL8.0, Yum-Quell...