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}
]
}
}
