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>