• 周一. 8月 15th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

最简单的ThinkPHP实例(3)接口

admin

11月 28, 2021

前端人,前端魂,前端最常打交道就是接口,来吧,用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/[email protected]/dist/vue.js"></script>
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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、效果

发表回复

您的电子邮箱地址不会被公开。