- Vue快速入门（下）（应急用）
- 八、使用Axios实现异步通信（重点）
- 8.1 什么是Axios
- 8.2 第一个Axios应用程序
- 九、表单输入绑定
- 十、组件基础
- 十一、Vue-cli搭建demo
- 十二、Vue-cli目录结构
Axios是一个开源的可以用在浏览器端和Nodejs的异步通信框架，他的主要作用就是实现Ajax异步通信，其功能特点如下：
- 从浏览器中创建XMLHttpRequests
- 从node.js中创建http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF（跨站请求伪造）
首先，我们肯定要导入相关的js。
然后我们写我们要显示的标签：(数据是从我们的数据库中拿的，通过访问我之前SpringBoot+MyBatisPlus项目的一个RestController下的接口，记得要在RestController下添加注解@CrossOrigin）
显示的代码如下：
- {{item.id}}--{{item.name}}--{{item.email}}--{{item.age}}
然后最重要的是写我们的axios：
我们的axios，可以参照生命周期那一小节，他让我们写在mounted，人家开发的框架，叫咱怎么写，咱就怎么写就好了。其实，get请求就是.get，post请求就是.post，然后.then表示获取成功的话要怎么执行，.catch表示获取失败的话要怎么执行。（res=>{。。。}是ES6的语法，可以不精通，但是要会用好吧）
new Vue({
el:"#studentList",
data:{
students: []
},
mounted(){
axios.get("http://localhost:8080/list")
.then(res => {
this.students = res.data
})
.catch(function (err) {
console.log(err)
});
}
});
完整代码如下：
获取Json数据
测试
- {{item.id}}--{{item.name}}--{{item.email}}--{{item.age}}
结果：
如果是post请求就麻烦一点，但是看一下下面的代码基本上应该也可以仿着写一个：
添加Json数据
测试
九、表单输入绑定
我们可以用 v-model 指令在表单 、