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);
});
复制代码

此时后台代码依旧使用上面的就能够返回请求参数了