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文件中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 app.get('/api/searchCon', function (req, res) { 2 var url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp' 3 axios.get(url, { 4 headers: { 5 referer: 'https://y.qq.com/m/index.html', //从音乐网站上得的 6 host: 'c.y.qq.com' 7 }, 8 params: req.query 9 }).then((response) => { 10 res.json(response.data) 11 }).catch((e) => { 12 console.log(e) 13 }) 14 })
在api-search.js文件中:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 export function search(query, page, zhida, perpage) { 2 const url = '/api/searchCon' 3 4 const data = Object.assign({}, commonParams, { 5 w: query, 6 p: page, 7 perpage, 8 n: perpage, 9 catZhida: 1, 10 zhidaqu: 1, 11 t: 0, 12 flag: 1, 13 ie: 'utf-8', 14 sem: 1, 15 aggr: 0, 16 remoteplace: 'txt.mqq.all', 17 uin: 0, 18 needNewCode: 1, 19 platform: 'h5', 20 format: 'json' 21 }) 22 23 return axios.get(url, { 24 params: data 25 }).then((res) => { 26 return Promise.resolve(res.data) 27 }) 28 }
7. 歌单信息获取也是禁止访问状态
修改同上 切记一定要把format 改为json
1 app.get('/api/getSongsList', function (req, res) { 2 var url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg' 3 axios.get(url, { 4 headers: { 5 referer: 'https://y.qq.com/w/taoge.html', //从音乐网站上得的 6 host: 'c.y.qq.com' 7 }, 8 params: req.query 9 }).then((response) => { 10 res.json(response.data) 11 }).catch((e) => { 12 console.log(e) 13 }) 14 })