Vue音乐项目笔记（四）（搜索页面提取重写）

1.如何通过betterScroll组件实现上拉刷新 https://blog.csdn.net/weixin_40814356/article/details/80478440

2.搜索页面跳转单曲页面 https://blog.csdn.net/weixin_40814356/article/details/80484183

3. 搜索页面边界情况的处理 https://blog.csdn.net/weixin_40814356/article/details/80490841

当没有搜索结果的时候。添加一个图片

每一次输入和删除字符，都会发一次请求，input的节流

滚动列表的时候，收起键盘

4.搜索历史数据的处理 https://blog.csdn.net/weixin_40814356/article/details/80494165

5. 搜索列表的点击删除、删除全部的交互事件 https://blog.csdn.net/weixin_40814356/article/details/80496097

6. 搜索信息页面突然禁止访问

修改如下：

在webpack.dev.conf.js文件中

app.get('/api/searchCon', function (req, res) {
          var url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
          axios.get(url, {
            headers: {
              referer: 'https://y.qq.com/m/index.html',  //从音乐网站上得的
              host: 'c.y.qq.com'
            },
            params: req.query
          }).then((response) => {
            res.json(response.data)
          }).catch((e) => {
            console.log(e)
          })
        })

在api-search.js文件中：

export function search(query, page, zhida, perpage) {
  const url = '/api/searchCon'

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

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

7. 歌单信息获取也是禁止访问状态

修改同上 切记一定要把format 改为json

app.get('/api/getSongsList', function (req, res) {
          var url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg'
          axios.get(url, {
            headers: {
              referer: 'https://y.qq.com/w/taoge.html',  //从音乐网站上得的
              host: 'c.y.qq.com'
            },
            params: req.query
          }).then((response) => {
            res.json(response.data)
          }).catch((e) => {
            console.log(e)
          })
        })