Comment laisser le composant axios de vue et le backend PHP échanger des données

Cet article présente principalement comment échanger des données entre le composant axios de Vue et le backend PHP. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

1. Préface

axios est un composant du projet vue qui utilise la technologie ajax pour échanger des données avec l'arrière-plan. Sous la recommandation de l'auteur de vue, un nombre considérable de développeurs front-end de vue ont commencé à l'utiliser. Cependant, au cours du processus de développement proprement dit, il arrive parfois que le backend ne puisse pas recevoir les données postées par le frontend. En prenant comme exemple le contexte du développement du langage PHP, la variable prédéfinie native de PHP $_POST ne peut pas être reçue (car

l'analyse a échoué ). Le but de cet article est d'explorer l'interaction des données front-end et back-end et de proposer différentes solutions pour votre référence.

2. Les formulaires de données actuellement acceptés par $_POST

Données du formulaireCe formulaire de données est en fait une paire clé-valeur, telle que id:1, s'il y en a S'il existe plusieurs ensembles de paires clé-valeur et qu'elles sont imbriquées, alors les données reçues par le serveur PHP ressemblent en fait à ceci :

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

Est-ce la même chose que le paramètre de l'URL ? Particulièrement similaire ?

Les données de cette paire clé-valeur sont appelées

QueryString

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

Lorsque le formulaire natif du navigateur envoie ces données, l'en-tête de la requête sera défini sur

application/x-www-form-urlencoded <.>.
QueryString peut être analysé avec succès par $_POST de PHPLa méthode serialize() et la méthode param() de jQuery ajax sous la bibliothèque frontale classique jQuery consistent à convertir les données into La solution fournie par QueryString est que le premier convertit les données du formulaire et le second convertit les données JSON.
De plus, la requête ajax de jQuery déterminera la forme des données entrantes et appellera implicitement la méthode param() pour convertir les données json, de sorte que l'utilisateur n'a qu'à fournir directement les données json pour réussir à soumettre les données en arrière-plan. Cela doit être explicite. Il n'y a pas beaucoup de possibilités d'appeler la méthode param() (manuellement). L'en-tête de requête envoyé par jq par défaut est également application/x-www-form-urlencoded. Dans la plupart des cas, l'utilisateur n'a pas besoin de le définir manuellement. Retour à notre axios, l'en-tête de requête envoyé par axios par défaut est

application/json

Pour faire simple, il transmettra json au backend par défaut et ne le convertira pas en QueryString. .

3. Solution

1. Le front-end convertit les données en QueryString

Introduit la bibliothèque qs et appelle la méthode stringify

2. Après PHP La fin utilise php://input pour obtenir les données d'origine

Sans apporter aucune modification au front-end, car la variable prédéfinie $_POST ne peut pas être analysée, le backend php ne peut utiliser que php : //input pour obtenir les données originales, puis les convertir sous la forme de données souhaitée.

Si le backend PHP utilise le développement natif, vous pouvez personnaliser une fonction pour traiter les données de chaque requête.

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

Si le backend PHP est développé à l'aide d'un framework spécifique, cela dépend si le framework lui-même prend en charge le traitement de php://input. Une méthode de test simple consiste à rechercher php://input dans le texte intégral du code source. du framework. S'il peut être trouvé, s'il est pris en charge, sinon il n'est pas pris en charge et vous devez étendre vous-même le code de traitement correspondant.

En prenant le framework PHP yii2.0 comme exemple, recherchez le répertoire des fournisseurs en texte intégral et vous pouvez voir qu'il y a du code de traitement pertinent dans la ligne 494 de yiisoft->yii2->web-> ;Requête.php.

En utilisation réelle, il vous suffit de le configurer dans le fichier de configuration web.php

Voici deux solutions pour le traitement front-end et le traitement back-end. Vous pouvez choisir en fonction. la situation actuelle

Ce qui précède est cet article. Le contenu entier, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

    'components' => [
        'request' => [
            'parsers' => [
                'application/json' => 'yii\web\JsonParser'
            ],
            // 其他配置
        ],
        //其他组件配置
    ]

Recommandations associées :

Comment configurer une longue connexion pour la base de données yii

À propos de la méthode de yii pour améliorer l'optimisation des performances de numéros simultanés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!