1. 程式人生 > >vue慕課網音樂專案手記:32-如何獲取歌詞的資料,並解析jsonp的格式為json的格式

vue慕課網音樂專案手記:32-如何獲取歌詞的資料,並解析jsonp的格式為json的格式

首先:在qq音樂的官網,能看到如下的歌詞資料

這是一個jsonp的資料,但是官方對它做了一些加密,所以還是要通過node去強制改變請求頭。

新建一個song.js

import { commonParams } from './config'
import axios from 'axios'

export function getLyric (mid) {
  const url = '/api/lyric'

  const data = Object.assign({}, commonParams, {
    g_tk: 1930664565,
    pcachetime: +new Date(),
    這裡是一段時間戳
    hostUin: 0, format: 'json',     因為是請求本地的介面,所以format是json     platform: 'yqq', needNewCode: 0, songmid: mid }) return axios.get(url, { params: data }).then((res) => { return Promise.resolve(res.data) }) }     
然後在node中去強行更改請求頭
app.get('/api/lyric', function (req, res) {
        var url = 'https://szc.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
        axios.get(url, {
          headers: {
            referer: 'https://y.qq.com/',
            host: 'c.y.qq.com'
          },
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })

然後獲取資料的方法封裝到class類中:

getLyric () {
    getLyric(this.mid).then((res) => {
      if (res.code === ERR_OK) {
        this.lyric = res.lyric
        console.log(this.lyric)
      }
    })
  }

因為請求的仍然是一個jsonp,所以要在後端做一點小小的處理:

 var ret = response.data
          if (typeof ret === 'string') {
            var reg = /^\w+\(({[^()]+})\)$/
            // 以單詞a-z,A-Z開頭,一個或多個
            // \(\)轉義括號以()開頭結尾
            // ()是用來分組
            // 【^()】不以左括號/右括號的字元+多個
            // {}大括號也要匹配到
            var matches = ret.match(reg)
            if (matches) {
              ret = JSON.parse(matches[1])
            // 對匹配到的分組的內容進行轉換
            }
          }
以上是通過正則表示式把獲取到的jsonp檔案轉換成json格式