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

前端代码:


<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 + elementUItitle>
    
    <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>

<script src="../js/vue.js">script>


<script src="../js/elementui/index.js">script>

<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¶m2=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>

后端代码:



//接收前台传递的参数
$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)发送前:
vue + ElementUI + axios + php 前后端数据接口通信示例_第1张图片

(2)发送后:

vue + ElementUI + axios + php 前后端数据接口通信示例_第2张图片

你可能感兴趣的:(学不动,Vue)