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?

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

3. Lösung

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

Nach dem Login kopieren

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

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

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!