上一章已经申请完api接口了，下一步就是使用接口
接口文档已经有js的获取方法
在vue里面，我们能用到的就是formatterDateTime方法，还有传递的参数
首先，创建index.vue作为网站入口文件
在其methods里面定义三个方法
一个getNews（），通过axios获取数据，具体用法可以看axios的文档。这里只进行简单get和post，所以不进行封装
一个formatterDateTime()，格式化日期，api文档提供的方法
一个getid(),获取每一条数据的id和channelName，并跳转到news.vue界面，在news.vue我们接收路由传参用作请求
定义好方法之后在created页面完成后执行getNews方法即刻获取到数据
完整代码
<script>
export default {
data() {
return {
channelList:[]
}
},
methods: {
getNews() {
this.$axios.get('http://route.showapi.com/109-34', {
params: {
"showapi_timestamp": this.formatterDateTime,
"showapi_appid": '00017', //这里需要改成自己的appid
"showapi_sign": 'a0ec01b1ee3241eeaeeeeeeaee8c715', //这里需要改成自己的应用的密钥secret
}
}).then(res => {
if(res.status == 200){
this.channelList = res.data.showapi.res.body.channelList
console.log(this.channelList);
}
}).catch(err => {
console.log("erro");
});
},
formatterDateTime: function() {
var date = new Date()
var month = date.getMonth() + 1
var datetime = date.getFullYear() +
"" // "年"
+
(month >= 10 ? month : "0" + month) +
"" // "月"
+
(date.getDate() < 10 ? "0" + date.getDate() : date
.getDate()) +
"" +
(date.getHours() < 10 ? "0" + date.getHours() : date
.getHours()) +
"" +
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date
.getMinutes()) +
"" +
(date.getSeconds() < 10 ? "0" + date.getSeconds() : date
.getSeconds());
return datetime;
},
getId(id,name){
this.$router.push({
name:'news',
params:{
id:id,
name:name
}
})
}
},
created() {
this.getNews();
}
}
</script>
用v-for循环channelList，然后打开网页，我在getNews里log返回的数据,打开开发者就能看到返回的数据
那么这一章就结束，下一章是news.vue获取路由传来的参数并执行post请求
网友评论