vue的axios組件如何與PHP後端交換數據

1、前言

axios是vue項目中用來使用ajax技術來與後臺交換數據的一個組件，在vue的做者推薦下，至關數量的vue前端開發人員開始使用它。可是在實際開發過程當中，卻時有出現後端接收不到前端post過來的數據的狀況。以PHP語言開發的後臺爲例，PHP原生的預約義變量$_POST就沒法接收（由於解析失敗）。本文的目的在於探討先後端數據交互，並給出不一樣的解決方案供你們參考。

2、目前$_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。

3、解決方法

一、前端把數據轉化爲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>

二、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' => 'yii\web\JsonParser'
            ],
            // 其餘配置
        ],
        //其餘組件配置
    ]

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