介绍
实现类似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="(item,index) in allList" :key="index">
<img :src="item.avatar_small" >
<span>{{item.nickname}}</span>
<span>{{item.online}}</span>
</div>
</div>
<div class="info-online" v-show="onlineShow">
<div class="detial" v-for="(item,index) in onlineList" :key="index">
<img :src="item.avatar_small" >
<span>{{item.nickname}}</span>
<span>{{item.online}}</span>
</div>
</div>
<div class="info-offline" v-show="offlineShow">
<div class="detial" v-for="(item,index) in offlineList" :key="index">
<img :src="item.avatar_small" >
<span>{{item.nickname}}</span>
<span>{{item.online}}</span>
</div>
</div>
</div>
搜索功能
<div class="search">
<input placeholder="Filter by name" v-model="name">
<mt-button type="primary" icon="search" @click="search"></mt-button>
</div>
search: function () {
let self = this
console.log(self.name)
console.log(self.allList)
let all= self.allShow
let online= self.onlineShow
let offline = self.offlineShow
let state
if (all) {
state = 0
console.log("0all")
} else if (!all&&online) {
state = 1
console.log("1online")
} else {
state = 2
console.log("2offline")
}
let allSel=[]
let onlineSel=[]
let offlineSel=[]
if (self.name=='') {
MessageBox('Notice','请输入搜索内容')
}else {
// console.log("allShow"+self.allShow)
// console.log("onlineShow"+self.onlineShow)
// console.log("offlineShow"+self.offlineShow)
switch (state) {
case 0:
console.log("all")
for (let index = 0; index < self.allList.length; index++) {
if(self.allList[index].nickname.indexOf(self.name)>=0){
console.log("111allShow")
allSel.push(self.allList[index])
}
}
if (allSel=='') {
console.log("未找到")
MessageBox.confirm('', {
message: '未找到',
title: 'Notice',
showCancelButton: false,
confirmButtonText: '确定',
// cancelButtonText: '取消'
})
.then(action => {
console.log("确认")
self.name=''
})
.catch(err => {
console.log(err)
})
} else {
console.log(allSel)
self.allList=allSel
self.name=''
}
break;
case 1:
console.log("online")
for (let index = 0; index < self.onlineList.length; index++) {
if(self.onlineList[index].nickname.indexOf(self.name)>=0){
console.log("222onlineShow")
onlineSel.push(self.onlineList[index])
}
}
if (onlineSel=='') {
console.log("未找到")
MessageBox.confirm('', {
message: '未找到',
title: 'Notice',
showCancelButton: false,
confirmButtonText: '确定',
// cancelButtonText: '取消'
})
.then(action => {
console.log("确认")
self.name=''
})
.catch(err => {
console.log(err)
})
} else {
console.log(onlineSel)
self.onlineList=onlineSel
self.name=''
}
break;
case 2:
console.log("offline")
for (let index = 0; index < self.offlineList.length; index++) {
if(self.offlineList[index].nickname.indexOf(self.name)>=0){
console.log("333offlineShow")
offlineSel.push(self.offlineList[index])
}
}
if (offlineSel=='') {
console.log("未找到")
MessageBox.confirm('', {
message: '未找到',
title: 'Notice',
showCancelButton: false,
confirmButtonText: '确定',
// cancelButtonText: '取消'
})
.then(action => {
console.log("确认")
self.name=''
})
.catch(err => {
console.log(err)
})
} else {
console.log(offlineSel)
self.offlineList=offlineSel
self.name=''
}
break;
default:
break;
}
}
}
斗鱼api接口
详情见： https://blog.csdn.net/qq_43043859/article/details/90065334
没有找到需求的接口，勉强实现一个类似功能
项目总结
项目是基于vue脚手架搭建，使用了mint-ui，使用axios获取数据
本来还想做一个分页功能，但是觉得上一页和下一页button类型的分页体验性不好，想实现类似mint-ui的Infinite scroll分页效果，先加载部门数据，触底上拉后再获取后段数据，考虑到直播数据应该是实时变化的数据，好像也不太适合，但若是做假分页，一次性加载全部数据之后再做分页感觉也不太合理，就放在后面填坑吧
全部代码地址：https://github.com/ZLQstart/live