vue.js + thinkPHP实现前后端数据联动

最近在琢磨VUE建设网站，同时学习ThinkPHP搭建小程序的过程，想来想去似乎还缺少前后端数据链接的过程，所以就在特地研究一下怎样打通vue与thinkphp之间的数据连接

先是两篇相关资料：
1）、Vuejs发送Ajax请求——https://www.cnblogs.com/EricZLin/p/9380406.html
2）、vuejs怎么和thinkphp结合——https://www.php.cn/phpkj/thinkphp/425653.html

其实看上面两篇文章就能联通了，我这边只是记录一下自己的操作，毕竟以后查找以来更方便使用：
根据上面文章我们先建立工程文件夹用于放置工程文件：取名vueAndThinkPHP，本地路径为E:\web\vueAndThinkPHP

既然是要读取数据库，那就需要有表：
我们在mysql数据库中建立test库，建立test_base_book表，并存入数据：sql语句见下：

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

---

– Table structure for test_base_book

---

DROP TABLE IF EXISTS test_base_book;
CREATE TABLE test_base_book (
id int(10) NOT NULL AUTO_INCREMENT,
name varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
author varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
num int(5) UNSIGNED NULL DEFAULT NULL,
price decimal(10, 2) NULL DEFAULT NULL,
PRIMARY KEY (id) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;

---

– Records of test_base_book

---

INSERT INTO test_base_book VALUES (1, ‘java’, ‘javer’, 2, 12.56);
INSERT INTO test_base_book VALUES (2, ‘javascript’, ‘js’, 4, 25.10);
INSERT INTO test_base_book VALUES (3, ‘2’, ‘2’, 2, 2.00);
INSERT INTO test_base_book VALUES (4, ‘3’, ‘3’, 3, 3.00);

SET FOREIGN_KEY_CHECKS = 1;

模拟数据建好了，就是编写后端读取数据接口啦，这部分是通过thinkPHP实现的。
1）、解压下载好的thinkphp框架文件，放到建立好的测试文件夹中，取名php
2）、配置database.config文件：
// 数据库类型
‘type’ => ‘mysql’,
// 服务器地址
‘hostname’ => ‘127.0.0.1’,
// 数据库名
‘database’ => ‘test’,
// 端口
‘hostport’ => ‘3306’,
// 数据库表前缀
‘prefix’ => ‘test_’,
// 数据集返回类型 array–数组；collection–数据集（方便model处理查询数据）
‘resultset_type’ => ‘collection’,
3）、虽然这个案例查询很简单，我还是把控制层controller和模型层model分开编写；在controller控制层中新建index.php,在model中新建BaseBook.php
4）、先编写model层业务，简单一句全表数据的返回：
class BaseBook extends Model
{
public static function getAllBook(){
$books = self::all();
return $books;
}
}
5）、然后在controller层的index.php中调用model中方法：这边我先写model层的原因就是在写controller层的时候phpstrom会自动填充，一是方便书写，不会出错，二是如果没有出现自动填充选项说明连接配置有错，这个时候就可以找寻遗漏点，省去写完了再回头找错的麻烦：
public function getAllBook()
{
$books=BaseBookModel::getAllBook();returnjson($books);
}

当然需要先引入model：use app\index\model\BaseBook as BaseBookModel;
6）、至此，我们获取book信息的接口就编写结束了

数据接口编写之后我们需要先对接口进行验证：按照引文中方法我们先建议虚拟域名，方便测试：
环境搭建我是使用的xampp
选择apache后面的config按钮，点击Apache进入到 \xampp\apache文件夹内，打开\xampp\apache\conf\extra 文件夹中的httpd-vhosts.conf文件，在最后面添加如下代码：

DocumentRoot “E:\web\vueAndThinkPHP\dist”
ServerName vue.think.com
DirectoryIndex index.html

DocumentRoot “E:\web\vueAndThinkPHP\php\public”
ServerName vue.thinkphp.com
DirectoryIndex index.php

设置apache地址还需要在本地环境中设置一遍识别该虚拟域名：
打开文件C:\Windows\System32\drivers\etc\hosts
最后加上：
127.0.0.1 vue.think.com
127.0.0.1 vue.thinkphp.com

重启apache之后，浏览器地址栏输入vue.thinkphp.com若打开php欢迎页面说明域名配置成功
在postman中测试接口 vue.thinkphp.com/index/index/getAllBook 能否获取到数据：
[
{“id”: 1,“name”: “java”,“author”: “javer”,“num”: 2,“price”: “12.56”
},{“id”: 2,“name”: “javascript”,“author”: “js”,“num”: 4,“price”: “25.10”
},{“id”: 3,“name”: “2”,“author”: “2”,“num”: 2,“price”: “2.00”
},{“id”: 4,“name”: “3”,“author”: “3”,“num”: 3,“price”: “3.00”
}
]

测试通过，就可以继续编写前端页面
我使用的是Vue CLI 2.9.6.所以新建工程的命令为 vue init webpack vue_thinkPHP
若使用Vue CLI 3，则可以使用 vue create vue_thinkPHP来新建项目
新建工程完成之后打开工程文件夹:cd vue_thinkPHP
安装axios: npm install axios
运行工程：npm run dev
在新建工程的helloworld.vue中删除多余页面元素，新增一个按钮用来交互

在script中引入axios：import axios from ‘axios’;

methods中创建数据调用方法：
methods: {
getphpdata() {
axios({
method:‘get’,
url:‘http://vue.thinkphp.com/index/index/getAllBook’
}).then(function(resp){
console.log(resp.data);
}).catch(err=>{
console.log(‘请求失败:’+err.status+’,’+err.statusText);
});
},
}

文件编写好之后，在浏览器localhost：8080查看页面点击按钮控制台会报错：Access to XMLHttpRequest at ‘http://vue.thinkphp.com/index/index/getAllBook’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

使用npm run build对文件进行打包，打包完毕我们对引文中的方法进行尝试：
跨域模式：
将打包好的dist文件放到E:\web\vueAndThinkPHP中，在浏览器中输入 vue.think.com打开页面，点击按钮会发现跟上文一样的报错
按引文方法配置后端：但他这个在公用控制器设置跨域配置，嗯，就不清楚他的公用控制器是哪一个文件了，我在controller、模块index、application下都建立common.php控制器，均无效；
所以我们转用同域方法：
同域模式：
将打包好的dist文件夹放置到PHP工程index模块下的view文件家中，在index 的controller中重定向首页：
public function index()
{
return $this->fetch(‘dist/index’);
}
这里为了保持文件引入的地址，所以讲dist文件夹中的static文件夹剪切放置到php工程的public文件夹中，在浏览器输入vue.thinkphp.com，便能打开刚刚写的带按钮的前端页面。
点击按钮会看到控制台成功获取数据。
如此便成功将vue前端页面与php后台接口结合起来，便于开发。但仍然有问题
1、当前我们写的接口连接中包含了我们设置的虚拟域名，一但换了工程位置，就获取不到改地址，所以我们尝试去掉店面的虚拟域名，地址为：url:’/index/index/getAllBook’，经重新打包使用同域方法，发现依然可以实现。
2、如果开发的时候要一直通过这种方法来调试会浪费很多时间，所以需要找寻一种不用打包就能联调的方法：使用chrome浏览器实现：右键chrome选择属性，在目标中地址后面加上 --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData（注意前面有空格），然后用带有后缀的快捷方式打开浏览器，输入localhost:8080,此时点击按钮亦能获取到数据。但此种方式需注意开发的时候接口连接中需带上接口域名。

遗留问题：打包之后跨域问题未能实现，但是通过观察控制台却发现接口调用200，且有返回数据，但页面console未获取到接口返回值。需再行琢磨。