6 Vue - 博客 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
<style>
    .active{
        border: 1px solid red;
    }

</style>
</head>
<body>

    <div id="app">
        <h3>博客</h3>
        <p>
            <input type="button" value="post请求_新增博客" @click="addblog">
            {{ addMsg }}
        </p>
        <p>
            <input type="button" value="get请求_获取博客列表" @click="getblogs">
            {{ getMsg }}
            <table border="1" >
                <tr>
                    <th>id</th>
                    <th>标题</th>
                    <th>内容</th>
                </tr>
                <!-- v-for: 遍历 -->
                <!-- template标签中的内容在页面中不显示 -->
                <template v-for="(items,index) in blogs">
                    <tr>
                        <td>{{ items[0] }}</td>
                        <td>{{ items[1] }}</td>
                        <td>{{ items[2] }}</td>
                    </tr>
                </template>
            </table>
        </p>

    </div>

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({     // 创建 Vue 应用
            el: '#app',         // 挂载点，挂载元素
            data: {             // 数据（响应式）
                blogs: "",
                getMsg: "this is getMsg",
                addMsg: ""
            },
            methods: {
                // 获取博客列表
                getblogs(){
                    // console.log(this.getMsg)
                    var that = this;
                    axios({
                        //设置请求方式，不设置默认是get
                        method: "GET",
                        //设置url和path
                        baseURL:"http://127.0.0.1:5000",
                        url:"/blog/list",
                        // 设置头信息
                        headers:{
                            "Content-Type":"application/json;charset=UTF-8"
                        },
                        // 请求数据
                        data:{

                        }
                    }).then(
                        function (response){
                            // axios 回调函数内部拿不到this
                            // console.log(this.getMsg);
                            // console.log(response.status);  状态码
                            // console.log(response.data);    数据
                            console.log(response);
                            console.log(response.data);
                            that.getMsg = response.data.msg;
                            // console.log(that.getMsg);
                            that.blogs = response.data.data;
                            // console.log(that.blogs);
                            // console.log(that.blogs[0]);


                        },
                        function(err){
                            console.log(err);
                        }
                    )
                },
                // 增加log
                addblog(){
                    // axios外边可以拿到this
                    console.log(this.addMsg);
                    var that = this;
                    axios({
                        //设置请求方式，不设置默认是get
                        method: "POST",
                        //设置url和path
                        baseURL:"http://127.0.0.1:5000",
                        url:"/blog/add",
                        // 设置头信息
                        headers:{
                            "Content-Type":"application/json;charset=UTF-8"
                        },
                        // 请求数据
                        data:{
                            title: "blog15",
                            content: "blog15"
                        }
                    }).then(
                        function (response){
                            // axios回调函数内部拿不到this
                            console.log(this.addMsg);
                            that.addMsg = response.data.msg;
                            console.log(that.addMsg);

                        },
                        function(err){
                            console.log(err);
                        }
                    )
                }

            }


        })
    </script>
</body>
</html>

 

posted @ 2021-04-11 20:24  栗子测试开发  阅读(76)  评论(0)    收藏  举报