1. 程式人生 > >Vue音樂項目筆記(四)(搜索頁面提取重寫)

Vue音樂項目筆記(四)(搜索頁面提取重寫)

isp catch gsl zone http open referer ace chcon

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文件中

技術分享圖片
 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         })

Vue音樂項目筆記(四)(搜索頁面提取重寫)