vue的axios組件怎樣與PHP後端交流數據

2023年7月29日 135次阅读 来源: 雲呆

一、媒介

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' => 'yii\web\JsonParser'
            ],
            // 其他設置
        ],
        //其他組件設置
    ]

以上就是前端處置懲罰和後端處置懲罰兩種解決方案，可依據現實狀況挑選

    原文作者：雲呆
    原文地址: https://segmentfault.com/a/1190000014826911
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞