6.开发阶段—排行、搜索

完整展示：

排行榜接口处理

在排行界面中，主要就是针对将获取到的排行数据进行渲染，但是网易云排行界面的接口数据随时都是动态变化内容具有不确定性，不一定匹配到我们指定的榜单名，所以不一定有rank字段，需要做判断。如果没有查找到对应的榜单应该把此数据删除。

榜单接口封装

export const getTopListDetail = () => {
  return new Promise((resolve, reject) => {
    const category = {
      officialList: [
        { name: '飙升榜', id: 3 },
        { name: '新歌榜', id: 0 },
        { name: '原创榜', id: 2 },
        { name: '热歌榜', id: 1 }
      ],
      recList: [
        { name: '云音乐说唱榜', id: 23 },
        { name: '云音乐电音榜', id: 25 },
        { name: '云音乐欧美新歌榜', id: 32 },
        { name: '网络热歌榜', id: 26 },
        { name: '云音乐古风榜', id: 22 },
        { name: '听歌识曲榜', id: 24 }
      ],
      globalList: [
        { name: '中国新乡村音乐排行榜', id: 29 },
        { name: '美国Billboard榜', id: 6 },
        { name: 'UK排行榜周榜', id: 5 },
        { name: 'Beatport全球电子舞曲榜', id: 21 },
        { name: '日本Oricon榜', id: 10 },
        { name: '法国 NRJ Vos Hits 周榜', id: 8 }
      ],
      otherList: [
        { name: 'KTV唛榜', id: 7 },
        { name: '云音乐日语榜', id: 19 },
        { name: '云音乐摇滚榜', id: 27 },
        { name: '云音乐韩语榜', id: 28 },
        { name: '潜力爆款榜', id: 30 },
        { name: '云音乐欧美热歌榜', id: 31 }
      ],
      titles: { officialList: '官方榜', recList: '推荐榜', globalList: '全球榜', otherList: '更多榜单' }
    }
    Network.get('toplist/detail')
      .then(data => {
      data.list.forEach(obj => {
        let flag = false
        for (const key in category) {
          for (let i = 0; i < category[key].length; i++) {
            if (category[key][i].name === obj.name) {
              // 查找到该榜单，就添加到rank中
              category[key][i].rank = obj
              flag = true
              break
            }
          }
          if (flag) {
            break
          }
        }
      })
      // 校验category中的每一个榜单中是否含有rank
      for (const item in category) {
        if (item === 'titles') {
          continue
        }
        category[item] = category[item].filter(obj => obj.rank !== undefined)
      }
      resolve(category)
    })
      .catch(err => {
      reject(err)
    })
  })
}

完整榜单：

榜单缺失情况处理：

搜索界面—节流指令

在搜索栏的搜索交互中，由于正常输入的情况会频繁触发搜索结果，因此需要对搜索栏做一个类似于百度搜索的节流处理。在组件中定义一个局部指令，定义每间隔1s触发一次指定的函数

directives: {
  throttle: {
    // 节流指令
    inserted: function (el, binding) {
      let timerId = null
      let flag = true
      el.addEventListener('input', () => {
        if (!flag) return
        flag = false
        timerId && clearTimeout(timerId)
        timerId = setTimeout(function () {
          flag = true
          binding.value()
        }, 1000)
      })
    }
  }
}

<input v-throttle="search" type="text" placeholder="搜索歌曲、歌手、专辑" v-model="keywords">

搜索界面—非法关键字处理

对于一些无效或是非法的关键字也要进行一些处理，因为无效或非法关键字是没有搜索结果的，如果不及时处理，搜索列表的渲染就会出现问题。

methods: {
  search () {
    if (this.keywords.length !== 0) {
      getSearchList({ keywords: this.keywords.trim() })
        .then(data => {
        if (data.result !== undefined) {
          if (data.result.songCount !== 0) {
            this.songs = data.result.songs
          }
        } else {
          this.songs = [
            {
              name: '暂未搜索结果',
              id: -1,
              artists: [{ name: '请重新输入' }]
            }
          ]
        }
      })
        .catch(err => {
        console.log(err)
      })
    }
  }
}