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’,