vue的axios元件如何與PHP後端交換資料

雲呆發表於2019-02-16
VueiOS元件PHP後端

一、前言

axios是vue專案中用來使用ajax技術來與後臺交換資料的一個元件，在vue的作者推薦下，相當數量的vue前端開發人員開始使用它。但是在實際開發過程中，卻時有出現後端接收不到前端post過來的資料的情況。以PHP語言開發的後臺為例，PHP原生的預定義變數$_POST就無法接收（因為解析失敗）。本文的目的在於探討前後端資料互動，並給出不同的解決方案供大家參考。

二、目前$_POST可接收的資料形式

Form Data
這種資料形式其實就是鍵值對，例如id:1，如果有多組鍵值對並且有巢狀的情況，則如下

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

PHP服務端接收到的資料其實是這樣子的

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

是不是與url的引數特別像？
這種鍵值對的資料被稱為QueryString，瀏覽器的原生 form 表單傳送這種資料時會把請求頭設為application/x-www-form-urlencoded。
QueryString就能被PHP的$_POST成功解析

經典的前端庫jQuery下的jQuery ajax 的 serialize()方法和param()方法就是為把資料轉化為QueryString而提供的解決方案，前者轉化表單資料，後者轉化JSON資料。
而且jQuery的ajax請求中會判斷傳入的資料形式，隱式呼叫param()方法來轉化json資料，所以使用者只需直接提供json資料即可成功把資料成功提交到後臺，需要顯式（手動）呼叫param()方法的機會不多。jq預設的傳送的請求頭也是application/x-www-form-urlencoded，大多數情況下並不需要使用者手動設定。

回到我們的axios中，axios預設傳送的請求頭為application/json，簡單來說，它預設就是會把json傳到後端，並不轉化為QueryString。

三、解決方法

1、前端把資料轉化為QueryString

引入qs庫，呼叫stringify方法

<template>
  <div>
      <input type="button" name="login" value="資料提交" @click="post">
  </div>
</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>

2、PHP後端使用php://input獲取原始資料

在前端不做任何改變的情況下，因為預定義變數$_POST無法解析，php後端只能使用php://input獲取原始的資料，然後再轉化為想要的資料形式。
如果PHP後臺使用原生開發，則可自定義一個函式處理每次請求的資料。
如果PHP後臺使用特定的框架開發，則要看框架本身是否支援處理php://input，簡單的一個測試方法就是在框架的原始碼全文搜尋php://input，如果能搜到，則有支援，否則不支援，需要自己擴充套件相關的處理程式碼。

以PHP框架yii2.0為例，全文搜尋vendor目錄，可知在yiisoft->yii2->web->Request.php的494行有相關處理程式碼。
實際使用只需在配置檔案web.php配置

    `components` => [
        `request` => [
            `parsers` => [
                `application/json` => `yiiwebJsonParser`
            ],
            // 其他配置
        ],
        //其他元件配置
    ]

以上就是前端處理和後端處理兩種解決方案，可根據實際情況選擇

相關文章