CodeIgniter + Vue.js先後端分離之axios請求

時間 2019-11-16

標籤 codeigniter vue.js vue 後端分離 axios 請求欄目 Apache 简体版

原文原文鏈接

傳統php + jQuery的 Ajax 交互模式

前端代碼：javascript

<html>
<head>
  <meta charset="UTF-8">
  <title>JQueryAjax+PHP</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
  用戶名:<input type="text" id="username" name="username" /><br>
  密碼:<input type="password" id="password" name="password" /><br>
  <button type="button" class="butn">ajax提交</button><br>
  <span class="con"></span>
  <script type="text/javascript"> $(document).ready(function () { $(".butn").click(function () { var username = $("#username").val(); var password = $("#password").val(); $.post('./back.php', { name: username, pwd: password }, function (data) { console.log(data); $(".con").html(data); }) }) }) </script>
</body>
</html>
複製代碼

後端代碼：php

<?php  
echo '用戶名:',$_POST['name'],',密碼：',$_POST['pwd']."<br>"; 
echo "操做完畢"; 
複製代碼

Codeigniter + Vue.js 的 axios 交互

原本覺得照着文檔將axios格式複製過來就能夠了，然而並無想象中那麼容易html

初始化頁面時調查詢接口先發了get請求前端

// 初始化時查詢全部人員信息
queryStuffInfo() {
  axios.get("/home/queryStuffInfo").then(res => {
    this.tableData = res.data;
  });
},
複製代碼

public function queryStuffInfo() {
    $this->load->database();
    $sql = 'select * from t_stuff_info'; 
    $result = $this->db->query($sql);
    $data = $result->result();
    echo json_encode($data);
}
複製代碼

直接能夠得到數據並在頁面展現，當調用增長人員接口（post請求）時先發了option請求，即預請求(preflight request)，然而發完預請求後沒有返回值，因此無法繼續發post請求因而給php代碼作配置java

// 一、對普通的GET/POST/PUT請求,請求頭設置以下:
// 設置json格式請求頭
header("Content-type:application/json; charset=utf-8");
//跨域請求容許的域名設置,由於須要傳遞cookie,不能使用*
header("Access-Control-Allow-Origin: *");
// 跨域請求容許的請求頭
header("Access-Control-Allow-Headers: Content-type");
// 跨域請求贊成發送Cookie
header("Access-Control-Allow-Credentials: true");

// 二、非簡單請求每次請求前,都會發送一個一次」預檢「請求,它是 options的請求方式。它主要是詢問服務器是否容許這個非簡單請求訪問,若是咱們容許,則返回所須要的迴應頭信息(response header),這個預檢請求的請求頭設置以下:
//設置json格式請求頭
header("Content-type:application/json; charset=utf-8");
// 跨域請求容許的域名設置
header("Access-Control-Allow-Origin: *");
// 跨域請求容許的請求頭
header("Access-Control-Allow-Headers: Content-type");
header("Vary: Accept-Encoding, Origin");
// 跨域請求贊成發送Cookie
header("Access-Control-Allow-Credentials: true");
// options請求中所容許的方法
header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS");
// OPTIONS這個預請求的有效時間,20天
header("Access-Control-Max-Age: 1728000");
複製代碼

這樣設置頭部就能夠，而後調用後端接口jquery

// 新增一條人員信息 入庫
addStuff() {
  const reqData = {
    name: this.name,
    sex: this.sex,
    province: this.province,
    city: this.city
  };
  axios.post("/home/addStuff", reqData).then(res => {
    console.log(res);
  });
},
複製代碼

// test 後端獲取前端post傳過來的值
public function addStuff() {
	$name = $this->input->post('name');
	$sex = $this->input->post('sex');
	$province = $this->input->post('province');
	$city = $this->input->post('city');
	$arr = array(
		'name' => $name,
		'sex' => $sex,
		'province' => $province,
		'city' => $city,
	);
	echo json_encode($arr);
}
複製代碼

此時會報post過來的四個值爲nullios

百度上找到form表單提交的請求頭信息和ajax請求頭信息ajax

Content-Type: application/x-www-form-urlencoded // form表單提交
Content-Type: application/json;charset=UTF-8 // ajax
複製代碼

因而在axios請求參數中修改請求頭信息，無效sql

在模仿form表單提交中發現 axios 文檔中有可修改項 (文檔中 Using application/x-www-form-urlencoded format部分)npm

let params = new URLSearchParams();
params.append("name", this.name);
params.append("sex", this.sex);
params.append("province", this.province);
params.append("city", this.city);
axios.post("/home/addStuff", params).then(res => {
console.log(res);
});
複製代碼