mluminary / chickenmusic

:baby_chick: ChickenMusic

Hey, This is Haoqin

🐹   Quick Facts

• 💻   Love the Front-end
• 🏢   Living in Shanghai
• 🎧   Like to listen to music
• 🎮   Like playing game

🎹   Code I like

👀   Visitors

chickenmusic's Issues

chicken music 项目我已经完成

chicken music 项目我已经完成，项目可以正常运行，音乐播放路径也已经接通。需要源代码可以找我:WeChat:13751817115，或者使用私人电邮联系我:[email protected]

获取qq音乐播放源

目标页面

https://y.qq.com/portal/player.html

在开发者工具的 network 中找到 type 为 media 的请求

请求参数

链接：http://dl.stream.qqmusic.qq.com/C400000QCwge3B6Ad1.m4a?vkey=F8733DBDC60A025D55966F427D5C1CCEE2BB294A6AA98D83157D1B3EFA4A0C359C80C3871438C58264F4CB62F7F6516F6A647A789CD7D717&guid=2180150330&uin=0&fromtag=66

参数

• vkey
• guid
• uin
• fromtag

获取需要的参数

继续找会发现此请求， 此请求的返回结果为下图

进一步查看此请求的 headers ，除了 songmid 和 filename 都是常量

代码

这里需要注意，获取 vkey 的请求不能直接发起，因为此网站设置了 referer ，因此需要用后台代理伪造设定的 referer 网址发起请求

前台代码

// config.js
export const commonParams = {
  g_tk: 5381,
  inCharset: 'utf-8',
  outCharset: 'utf-8',
  notice: 0,
  format: 'jsonp'
}

// name of callback
export const options = {
  param: 'jsonpCallback'
}

export const ERR_OK = 0


// song.js
// 获取歌曲来源
import axios from 'axios'
import { commonParams } from './config'

export function getMusicSource(mid) {
  // 前台请求的本地 url
  const url = '/api/getSongVkey'

  const data = Object.assign({}, commonParams, {
    songmid: mid,
    filename: 'C400' + mid + '.m4a',
    guid: 2180150330,
    platform: 'yqq',
    loginUin: 0,
    hostUin: 0,
    needNewCode: 0,
    format: 'json',
    cid: 205361747,
    uin: 0
  })

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

后台代理

const ReqHeader = {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      }

app.get('/api/getSongVkey', function(req, res) {
        // qq 音乐获取 vkey
        const url =
          'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'

        // 修改请求头去获取数据
        axios
          .get(url, {
            headers: {
              referer: ReqHeader.referer,
              host: ReqHeader.host
            },
            params: req.query // 将发送过来的数据接收再当参数传递
          })
          .then(response => {
            res.json(response.data)
          })
          .catch(e => {
            console.log(e)
          })
      })
    }

歌曲源地址的拼接

在前台页面中调用 getMusicSource(songmid) 即可获得 vkey , songmid 的获取在这就不详细说明，只需用 jsonp 方式获取就可以了，然后歌曲源 url 的拼接为

url: `http://dl.stream.qqmusic.qq.com/C400${
      musicData.songmid
    }.m4a?vkey=${songVkey}&guid=2180150330&uin=0&fromtag=66`

Unable to preventDefault inside passive event listener due to target being treated as passive

解决方案：

1、注册处理函数时，用如下方式，明确声明为不是被动的

window.addEventListener('touchmove', func, { passive: false })

2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
touch-action 还有很多选项，详细请参考touch-action

链接： https://segmentfault.com/a/1190000008512184

搜索结果 api 的使用

前几天发现自己搜索页面出了点问题，搜索结果无法获取，发现好像做了跨域处理，于是还是用老方法修改请求头去获取到对应数据，但是返回的是 jsonp 格式的数据。然后 jsonp 转 json 便如下

let num1 = res.indexOf('(')
let num2 = res.lastIndexOf(')')
let resultData = JSON.parse(res.substring(num1 + 1, num2))

关于 ref 的问题

<ul v-for="item in sequenceList">
    <li ref="listItem">{{item}}</li>
</ul>

当动态向 sequenceList 插入内容时，即使你插入的数据在 sequenceList 的前面或者中间，用 this.$refs.listItem 获取的时候，你都会发现你插入的数据在最后

伪造 referer 访问 api

对于限制 referer 的 api 接口，我们可以伪造

app.get('/api/getDiscList', function(req, res) {
      axios
          .get(url, {
            headers: {
              referer: ReqHeader.referer,
              host: ReqHeader.host
            },
            params: req.query
          })
          .then(response => {
            res.json(response.data)
          })
          .catch(e => {
            console.log(e)
          })
      })
})

添加其 url , 然后设置它期望的 referer 和 host 进行访问获取数据, 这样访问 本地链接/api/getDiscList 就被添加请求头并代理到受限的网址获取其数据

No parser and no file path given, couldn't infer a parser.

 error  in ./src/App.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:7051:13)
    at formatWithCursor (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:10370:12)
    at D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:31115:15
    at Object.format (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:31134:12)
    at Object.module.exports (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

 @ ./src/App.vue 11:0-354
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/components/HelloWorld.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:7051:13)
    at formatWithCursor (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:10370:12)
    at D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:31115:15
    at Object.format (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:31134:12)
    at Object.module.exports (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

 @ ./src/components/HelloWorld.vue 11:0-366
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

npm i prettier@~1.12.0

重新运行：

npm run dev

原因是prettier 更新到1.13.0导致的