axios是一个独立的项目,通常和vue一起使用,实现ajax操作
首先要引入vue.js和axios.js
其次启动后端服务以及开启跨域访问权限
<div id="app">
<table width="80%" align="center" border="1px">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tbody v-for="item in userList">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tbody>
</table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
//固定结构
data: {//在data定义变量和初始值
//定义变量,空数组,便于后面赋值
userList: []
},
created() {
//页面渲染之前执行
//调用定义的方法
this.getUserList()
},
methods: {
//编写具体的方法
//创建方法查询用户数据
getUserList() {
//使用axios发ajax请求
//axios.请求方式("请求的接口的路径").then(箭头函数).catch(箭头函数)
axios.get('http://localhost:8080/user')
.then(response => {
//response就是请求返回的数据
console.log(response)//可以去控制台看得到的数据的结构
//通过response获取具体数据赋值给自己定义的空数组
this.userList = response.data.data.items
//console.log(this.userList)测试获得的数据
})//请求成功执行then方法
.catch(error => {
})//请求失败执行catch方法
}
//箭头函数 变量名=>{}
}
})
</script>