介绍
实现类似freeCodeCamp上的Use the Twitchtv JSON API练习,项目中使用斗鱼的api接口代替了Twitchtv接口,由于没有找到合适的接口数据,项目中使用online人数超过1000000状态代替online,低于的代替offline状态,后期代码优化的时候会用合适的api接口或者mock生成模拟数据,样式较丑勿怪。
所有博主显示
online博主
offline博主
其他功能介绍
刷新button重新获取数据
搜索button实现按博主名获取相应博主信息
all,online,offline三个button分别获取全部博主,在线博主,离线博主信息
主要功能实现
获取数据
getDatas: function() {
api.getData("http://capi.douyucdn.cn/api/v1/live?offset=0")
.then(res=>{
// console.log(res)
console.log(res.data)
this.allList=res.data
this.allListFirst=res.data//获取数据后做一个缓存,初始数据
let online=[]
let offline=[]
let onlineNum=[]
for (let index = 0; index < res.data.length; index++) {
onlineNum.push(res.data[index].online)
if(res.data[index].online>=1000000){
//假设online数超过1000000状态为online
online.push(res.data[index])
}else {
//假设online数低于1000000状态为offline
offline.push(res.data[index])
}
}
this.onlineList=online
this.onlineListFirst=online//获取数据后做一个缓存,初始数据
this.offlineList=offline
this.offlineListFirst=offline//获取数据后做一个缓存,初始数据
console.log(onlineNum)
})
.catch(err=>{
console.log(err)
})
}
博主信息
<div class="info">
<div class="info-all" v-show="allShow">
<div class="detial" v-for