So lassen Sie die Axios-Komponente von vue und das PHP-Backend Daten austauschen

Dieser Artikel stellt hauptsächlich vor, wie man Daten zwischen der Axios-Komponente und dem PHP-Backend austauscht. Jetzt kann ich ihn mit Ihnen teilen

1. Vorwort

Axios ist eine Komponente im Vue-Projekt, die Ajax-Technologie zum Austausch von Daten mit dem Backend verwendet. Auf Empfehlung des Autors von Vue begann eine beträchtliche Anzahl von Vue-Front-End-Entwicklern, sie zu verwenden. Während des eigentlichen Entwicklungsprozesses kommt es jedoch manchmal vor, dass das Backend die vom Frontend bereitgestellten Daten nicht empfangen kann. Nehmen wir als Beispiel den Hintergrund der PHP-Sprachentwicklung: Die native vordefinierte PHP-Variable $_POST kann nicht empfangen werden (da das Parsen fehlgeschlagen ist ). Der Zweck dieses Artikels besteht darin, die Front-End- und Back-End-Dateninteraktion zu untersuchen und verschiedene Lösungen als Referenz bereitzustellen.

2. Die derzeit von $_POST akzeptierten Datenformulare

Formulardaten
Dieses Datenformular ist eigentlich ein Schlüssel-Wert-Paar, wie z. B. id:1, Wenn es mehrere Sätze von Schlüssel-Wert-Paaren gibt und diese verschachtelt sind, sehen die vom PHP-Server empfangenen Daten tatsächlich wie folgt aus:

role-name:ta
role-desc:xxxxxxxxx
id:2
cloud[cla]:001
cloud[cla_baijia]:001
cloud[cla_gongkai]:001
local[soft5]:001
local[soft6]:001
mgmt[mgmt-clouditems]:01

Sind sie den Parametern der URL besonders ähnlich?

Die Daten dieses Schlüssel-Wert-Paares heißen

QueryString
Wenn das native Formular des Browsers diese Daten sendet, wird der Anforderungsheader auf application/x-www-form-urlencoded . QueryString kann von PHPs $_POST erfolgreich analysiert werden
Die Serialize()-Methode und die Param()-Methode von jQuery Ajax unter der klassischen Front-End-Bibliothek jQuery dienen zum Konvertieren der Daten in Die von QueryString bereitgestellte Lösung besteht darin, dass ersteres Formulardaten und letzteres JSON-Daten konvertiert. Darüber hinaus bestimmt die Ajax-Anfrage von jQuery die Form der eingehenden Daten und ruft implizit die Methode param() auf, um die JSON-Daten zu konvertieren, sodass der Benutzer die JSON-Daten nur direkt bereitstellen muss, um die Daten erfolgreich an den Hintergrund zu senden. Es muss explizit sein. Es gibt nicht viele Möglichkeiten, die param()-Methode (manuell) aufzurufen. Der von jq standardmäßig gesendete Anforderungsheader ist ebenfalls application/x-www-form-urlencoded. In den meisten Fällen muss der Benutzer ihn nicht manuell festlegen.

Zurück zu unseren Axios: Der von Axios standardmäßig gesendete Anforderungsheader lautet
application/json

Vereinfacht ausgedrückt wird JSON standardmäßig an das Backend übergeben und nicht in QueryString konvertiert .

3. Lösung

1. Das Frontend konvertiert die Daten in QueryString

Führt die qs-Bibliothek ein und ruft die Stringify-Methode auf

role-name=ta&role-desc=xxxxxxxxx&id=2&cloud%5Bcla%5D=001&cloud%5Bcla_baijia%5D=001&cloud%5Bcla_gongkai%5D=001&local%5Bsoft-5%5D=001&local%5Bsoft-6%5D=001&mgmt%5Bmgmt-clouditems%5D=01

2. Verwenden Sie das PHP-Backend php://input, um die Originaldaten zu erhalten

Ohne Änderungen am Frontend vorzunehmen, da die vordefinierte Variable $_POST nicht analysiert werden kann, kann das PHP-Backend nur php://input verwenden um die Originaldaten zu erhalten und sie dann in die gewünschte Datenform umzuwandeln.

Wenn das PHP-Backend native Entwicklung verwendet, können Sie eine Funktion anpassen, um die Daten jeder Anfrage zu verarbeiten.

Wenn das PHP-Backend mit einem bestimmten Framework entwickelt wird, hängt es davon ab, ob das Framework selbst die Verarbeitung von php://-Eingaben unterstützt. Eine einfache Testmethode besteht darin, im Volltext des Quellcodes nach php://-Eingaben zu suchen des Frameworks, wenn es gefunden werden kann, wenn es unterstützt wird, andernfalls wird es nicht unterstützt und Sie müssen den entsprechenden Verarbeitungscode selbst erweitern.

Durchsuchen Sie am Beispiel des PHP-Frameworks yii2.0 das Anbieterverzeichnis im Volltext. Sie können sehen, dass in Zeile 494 von yiisoft->yii2->web-> relevanter Verarbeitungscode vorhanden ist ;Request.php.
Bei der tatsächlichen Verwendung müssen Sie es nur in der Konfigurationsdatei web.php konfigurieren

<template>
  <p>
      <input type="button" name="login" value="数据提交" @click="post">
  </p>
</template>

<script>
import axios from "axios"
import qs from "qs"
var json={
              "role-name": "ta",
              "role-desc": "xxxxxxxxx",
              "id": 2,
              "cloud": {
                "cla": "001",
                "cla_baijia": "001",
                "cla_gongkai": "001"
              },
              "local": {
                "soft-5": "001",
                "soft-6": "001"
              },
              "mgmt": {
                "mgmt-clouditems": "01"
              }
    };

export default {
    methods:{
        post(){
            axios.post("http://localhost/web/index.php/admin/login/login",json,{
                //配置`transformRequest` ，在向服务器发送前，修改请求数据，axios会根据修改后的数据，自动设置请求头
                transformRequest:[function(data){
                    return qs.stringify(data);//把数据转化为QueryString
                }]
            }).then(res=>{
                console.log(res);
            })
        }
    }
}
</script>

Die oben genannten zwei Lösungen für die Front-End-Verarbeitung und die Back-End-Verarbeitung können entsprechend der tatsächlichen ausgewählt werden Situation

Das Obige ist der gesamte Inhalt des Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So richten Sie eine lange Verbindung für die Yii-Datenbank ein

Über Yiis Methode zur Verbesserung der Leistungsoptimierung von gleichzeitige Nummern

Das obige ist der detaillierte Inhalt vonSo lassen Sie die Axios-Komponente von vue und das PHP-Backend Daten austauschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!