大佬教程收集整理的这篇文章主要介绍了最简单的ThinkPHP实例(3)接口,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
前端人,前端魂,前端最常打交道就是接口,来吧,用php撸两个~
1、html部分
applicationindexviewindexindex.html
<!DOCTYPE html> <html lang="en"> <head> <@H_688_16@meta charset="UTF-8"> <@H_688_16@meta http-equiv="X-UA-Compatible" content="IE=edge"> <@H_688_16@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、效果
以上是大佬教程为你收集整理的最简单的ThinkPHP实例(3)接口全部内容,希望文章能够帮你解决最简单的ThinkPHP实例(3)接口所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。