API获取直播博主信息

介绍

实现类似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.datathis.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状态为onlineonline.push(res.data[index])}else {//假设online数低于1000000状态为offlineoffline.push(res.data[index])}}this.onlineList=onlinethis.onlineListFirst=online//获取数据后做一个缓存，初始数据this.offlineList=offlinethis.offlineListFirst=offline//获取数据后做一个缓存，初始数据console.log(onlineNum)}).catch(err=>{console.log(err)})}

博主信息

<div class="info"><div class="info-all" v-show="allShow"><div 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！