API获取直播博主信息

ゝ一纸荒年。 2022-02-01 06:07 230阅读 0赞

# 介绍 #

实现类似freeCodeCamp上的Use the Twitchtv JSON API练习，项目中使用斗鱼的api接口代替了Twitchtv接口，由于没有找到合适的接口数据，项目中使用online人数超过1000000状态代替online，低于的代替offline状态，后期代码优化的时候会用合适的api接口或者mock生成模拟数据，样式较丑勿怪。

## 所有博主显示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]

## online博主 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 1]

## offline博主 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 2]

## 其他功能介绍 ##

刷新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>

## 搜索功能 ##

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][https_blog.csdn.net_qq_43043859_article_details_90065334]  
没有找到需求的接口，勉强实现一个类似功能

# 项目总结 #

项目是基于vue脚手架搭建，使用了mint-ui，使用axios获取数据

本来还想做一个分页功能，但是觉得上一页和下一页button类型的分页体验性不好，想实现类似mint-ui的Infinite scroll分页效果，先加载部门数据，触底上拉后再获取后段数据，考虑到直播数据应该是实时变化的数据，好像也不太适合，但若是做假分页，一次性加载全部数据之后再做分页感觉也不太合理，就放在后面填坑吧

全部代码地址：[https://github.com/ZLQstart/live][https_github.com_ZLQstart_live]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: /images/20220201/8a24827225564f958a7d937ba42f47f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 1]: /images/20220201/f3a540befd36453dae48e4a006a8f5e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 2]: /images/20220201/09161ba999e24504934ee8232cd0910e.png
[https_blog.csdn.net_qq_43043859_article_details_90065334]: https://blog.csdn.net/qq_43043859/article/details/90065334
[https_github.com_ZLQstart_live]: https://github.com/ZLQstart/live