<!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>
原文：https://www.cnblogs.com/lizitestdev/p/14645346.html