vue慕课网音乐项目手记：43-搜索页面的数据获取以及使用

第一步：search组件里面监听search-box的query的变化：

<search-box ref="searchBox" @query="changeQuery"></search-box>

data里面定义一个query

query: ''

然后，如果query发生改变，就赋值给query

changeQuery (query) {
      this.query = query
    }

这时候把query的值传给suggest组件。
然后定义去数据的接口，这里面有三个值是变化的，所以要传入三个变量：

export function search (query, page, zhida) {
  const url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'

  const data = Object.assign({}, commonParams, {
    w: query,
    p: page,
    catZhida: zhida ? 1 : 0,
    uin: 0,
    platform: 'h5',
    needNewCode: 1,
    zhidaqu: 1,
    t: 0,
    flag: 1,
    ie: 'utf-8',
    sem: 1,
    aggr: 0,
    perpage: 20,
    n: 20,
    remoteplace: 'txt.mqq.all',
    _: +new Date()
  })

  return jsonp(url, data, options)
}

然后在组件里面使用：

_search () {
      search(this.query, this.page, this.showSinger).then((res) => {
        if (res.code === ERR_OK) {
          console.log(res)
          this.result = this._geyResult(res.data)
          console.log(this.result)
        }
      })
    },

这时候拿到的数据格式不是理想的：

处理函数：

_geyResult (data) {
      let ret = []
      if (data.zhida && data.zhida.singerid) {
        ret.push({...data.zhida, ...{type: TYPE_SINGER}})
      }
      if (data.song) {
        ret = ret.concat(data.song，list)
      }
      return ret
    }

番外篇：es6 …需要学习。

数据的使用：

<li class="suggest-item" v-for="item in result" :key="item.index">
        <div class="icon">
          <i :class="getIconCls(item)"></i>
        </div>
        <div class="name">
          <p class="text" v-html="getDisplayName(item)"></p>
        </div>
      </li>

getIconCls (item) {
      if (item.type === TYPE_SINGER) {
        return 'icon-mine'
      } else {
        return 'icon-music'
      }
    },
    getDisplayName (item) {
      if (item.type === TYPE_SINGER) {
        return item.singername
      } else {
        return `${item.songname}-${item.singer[0].name}`
      }
    },