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)
           })
         })