axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端 在浏览器中可以帮助我们完成 ajax请求的发送 在node.js中可以向远程接口发送请求
获取数据
这里是要提前引入这两个文件
一个vue.min.js一个axios.min.js
<script src="vue.min.js"></script> <script src="axios.min.js"></script>
这个是请求接口
var app = new Vue({ el: '#app', data: { memberList: []//数组 }, created() { this.getList() }, methods: { getList(id) { //vm = this axios.get('http://localhost:8081/admin/ucenter/member') .then(response => { console.log(response) this.memberList = response.data.data.items }) .catch(error => { console.log(error) }) } } })
控制台查看输出
2、显示数据
<div id="app"> <table border="1"> <tr> <td>id</td> <td>姓名</td> </tr> <tr v-for="item in memberList"> <td>{{item.memberId}}</td> <td>{{item.nickname}}</td> </td> </tr> </table> </div>
自己写的测试案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <table border="1"> <tr> <td>姓名</td> <td>年龄</td> </tr> <!-- 把数组用v-for遍历 --> <tr v-for="item in memberList"> <td>{{item.name}}</td> <td>{{item.age}}</td> </td> </tr> </table> </div> <script src="vue.min.js"></script> <script src="axios.min.js"></script> <script> new Vue({ el: '#app', data: { //在data定义变量和初始值 //定义变量，空数组 memberList: []//数组 }, created() { //页面渲染之前执行 //调用定义的方法 this.getList() }, methods: { //编写具体的方法 //创建方法，查询所有用户数据 getList(id) { //使用axios发送ajax请求 //axios提交方式("请求接口路径").then(箭头函数).catch(箭头函数) // axios.get('http://localhost:8081/admin/ucenter/member') axios.get("data.json") .then(response => { //控制台输出response console.log(response) //将response的返回值赋值给memberList this.memberList = response.data.data.items })//请求成功执行then方法 .catch(error => { console.log(error) })//请求失败执行catch方法 } } }) </script> </body> </html>
请求的json数据
data.json
{ "success":true, "data":{ "items":[ {"name":"lucky","age":20}, {"name":"tom","age":40}, {"name":"jack","age":40} ] } }
