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.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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值