vue + ElementUI + axios + php 前后端数据接口通信示例

最新推荐文章于 2023-12-06 10:17:18 发布

super6662321313

最新推荐文章于 2023-12-06 10:17:18 发布

阅读量1.4k

点赞数

文章标签： vue php axios elementui 数据接口

本文链接：https://blog.csdn.net/ASUKA2020/article/details/84539885

版权

学不动 Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue + elementUI</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../js/elementui/index.css">
</head>

<body>
    <div id="app">
        <el-input v-model="input" class="my-input" placeholder="请输入内容...">
        </el-input>
        <el-button plain @click="sendMessage">
            发送
        </el-button>
        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4}" placeholder="返回内容" v-model="textarea" class="my-textarea">
        </el-input>
    </div>
</body>
<!-- 引入vue.js -->
<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<!-- vue的js文件要先于elementui的js文件引入，否则会报错 -->
<script src="../js/elementui/index.js"></script>
<!-- 引入axios -->
<script src="../js/axios.js"></script>
<script>
var app = new Vue({
    el: '#app',
    data() {
        return {
            //在这里进行变量初始化操作
            input: '',
            textarea: ''
        }
    },
    methods: {
        sendMessage() {
            var self = this;
            // input 输入框中的值
            var value = self.input;
            //使用 axios 和后端进行通信
            axios({
                    method: 'post',
                    url: 'http://testcode.com/testphp/php001.php',
                    data: {
                        'param1': value,
                        // 'param2':value
                    },
                    transformRequest: [function(data) { // 从官方手册中获取 https://www.kancloud.cn/yunye/axios/234845；英文文档：https://github.com/axios/axios
                        // 转化 data 中的数据格式 类似 param1=123&param2=123&
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(function(response) {
                    //这里是服务器端相应的内容
                    // console.log(response);
                    var status = response.data.status;
                    if (status == 200) {
                        // console.log(response.data.data.message);
                        var content = response.data.data.message;
                        //将内容回显到页面上
                        self.textarea = content;

                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    },
    mounted() {}

})
</script>
<style scoped>
.my-input {
    width: 300px;
}

.my-textarea {
    width: 402px;
    display: block;
    margin-top: 10px;

}
</style>

</html>

后端代码：

<?php

//接收前台传递的参数
$value = $_POST['param1'];

// 提供 vue 通过axios 请求的接口数据
$res = array(
'status'=>200,
'data'=>array(
    'message'=>"hello {$value} ，I am php in Welcome :) " ,
),
);


$send = json_encode($res);


echo $send;

页面显示效果：
（1）发送前：
在这里插入图片描述

（2）发送后：

在这里插入图片描述

super6662321313

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue + ElementUI + axios + php 前后端数据接口通信示例

前端代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫