最简单的ThinkPHP实例（3）接口

前端人，前端魂，前端最常打交道就是接口，来吧，用php撸两个~

1、html部分

application\index\view\index\index.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 app\index\controller;

// 引入系统数据类
use think\Db;
// 引入系统控制器类
use think\Controller;

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、效果

 

 

 

posted @ 2021-08-16 18:25  Mankii  阅读(585)  评论(0)  编辑  收藏  举报
返回顶部