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

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

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

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

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

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

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

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

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

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

修改如下：

在webpack.dev.conf.js文件中

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

View Code

在api-search.js文件中：

 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 }

View Code

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

 

转载于:https://www.cnblogs.com/aimeeblogs/p/9492683.html