前端人，前端魂，前端最常打交道就是接口，来吧，用php撸两个~
1、html部分
applicationindexviewindexindex.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> --> </head> <body> <div id="app"> <div>----------- GET方法 ------------</div> <input type="text" v-model="text" /> <button @click="get()">GET方法</button> <div>GET方法返回值：{{ getRes }}</div> <br/> <div>----------- POST方法 ------------</div> <input type="text" v-model="text2" /> <button @click="post()">POST方法</button> <div>POST方法返回值：{{ postRes }}</div> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="/js/qs.js"></script> <script> var axiosAjax = axios.create({ baseURL:'/', // <---- 这里使用 qs 转换参数 transformRequest: [function (data) { // 转换数据 data = Qs.stringify(data); // 通过Qs.stringify转换为表单查询参数 return data; }], headers:{ 'Content-Type':'application/x-www-form-urlencoded' } }) var app = new Vue({ el: '#app', data: { text: '', getRes: '', text2: '', postRes: '' }, methods: { get(){ // get方法 axios.get('/index/index/user?text='+this.text) .then( (response) => { console.log(response); this.getRes = response.data }) .catch( (error) => { console.log(error); }); }, post(){ // post方法 axiosAjax.post('/index/index/user_post', { text: this.text2 }) .then( (response) => { console.log(response); this.postRes = response.data }) .catch( (error) => { console.log(error); }); } } }) </script> </body> </html>
2、控制器部分
<?php namespace appindexcontroller; // 引入系统数据类 use thinkDb; // 引入系统控制器类 use thinkController; class Index extends Controller { public function index() { return view(); } public function user() { // print_r($_GET); $a = [ "data" => "我是GET返回值", "text" => "用户输入了：".$_GET["text"] ]; // json_encode是转换成json字符串 第二个参数是解决中文乱码问题 return json_encode($a, JSON_UNESCAPED_UNICODE); } public function user_post() { // 获取payload json数据，转换成数组形式 // $postData = file_get_contents('php://input'); // $requests = !empty($postData) ? json_decode($postData, true) : array(); // print_r($requests); $a = [ "data" => "我是POST返回值", "text" => "用户输入了：".$_POST["text"] ]; // json_encode是转换成json字符串 第二个参数是解决中文乱码问题 return json_encode($a, JSON_UNESCAPED_UNICODE); } }
要注意的是axios为post方法时，传参是payload方式，php的$_POST是获取不到参数的
所以前端要转换一下参数，变成form-data，代码参考html部分的transofmrRequest。
参考文档：
QS.js：https://github.com/ljharb/qs（直接引入时引入dist文件夹中的qs.js）
payload问题参考：Vue使用axios POST提交数据PHP却无法接收到参数？
3、效果
