什么是axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
Axios特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
案例
<!--第一步引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入axios.js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- json数据
{
"code": 0,
"msg": "",
"count": 15,
"data": [
{
"logId": "1",
"url": "https://gitee.com/layuicms/layuicms2.0",
"method" : "GET",
"ip": "192.169.39.11",
"timeConsuming":"125",
"isAbnormal": "正常",
"operator": "驊驊龔頾",
"operatingTime": "2017-04-14 00:00:00"
},
{
"logId": "2",
"url": "https://gitee.com/layuicms/layuicms2.0",
"method" : "POST",
"ip": "192.169.39.11",
"timeConsuming":"89",
"isAbnormal": "异常",
"operator": "驊驊龔頾",
"operatingTime": "2017-04-14 00:00:00"
},
{
"logId": "3",
"url": "https://gitee.com/layuicms/layuicms2.0",
"method" : "GET",
"ip": "192.169.39.11",
"timeConsuming":"125",
"isAbnormal": "正常",
"operator": "admin",
"operatingTime": "2017-04-14 00:00:00"
}
]
}
- 请求json数据
<script>
/*第二步创建Vue并绑定对象*/
var vm=new Vue({
el:"#app",
/*Model层 :数据*/
/*注意:data属性和data方法不一样*/
/* data:{
message:'Vue hello!',
}*/
data(){ /*返回json的数据内容*/
return{
info:{
count:null,
data:[{
logId:null,
url:null,
method:null,
ip:null,
timeConsuming:null,
isAbnormal:null
}]
}
}
},
mounted(){ /*请求json数据*/
axios.get('../logs.json').then(response=>(this.info=response.data));
}
});
</script>
- 渲染数据
<div id="app" v-clock>
{{info.count}}<!--//取单个值-->
<li v-for="item in info.data"><!--取数组对象的值-->
{{item.logId}}
<a v-bind:href="item.url">点击</a><!--使用v-bind绑定数据赋值-->
{{item.method}}
{{item.ip}}
{{item.timeConsuming}}
</li>
</div>
- 解决模板闪烁问题:
<!--v-clock解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
截图: