2回答

ustbhuangyi

2018-12-23

已采纳

建议看这个 issue: https://github.com/ustbhuangyi/vue-music/issues/111
修改记录在：https://github.com/ustbhuangyi/vue-music/commit/5907ffd57bf1724fa67d133bbc9832b1dfd41c9f

0

2

一十xwjian

不知道为何? getSongsUrl(songs) '/api/getPurlUrl' 有时候会特别卡。请求一次大约要 60s 左右。有时候 一下就获取到数据了。。。不知道老师有没有遇到过。。。

2019-01-04

共2条回复

一十xwjian

提问者

2018-12-23

已经解决: 具体修改页面如下: 

1. singer-detail.vue

2. common/js/song.js

3. aip/song.js

4.common/js/uid.js

5.webpack.dev.conf.js

获取的地址如下: http://dl.stream.qqmusic.qq.com/C400002rYtyJ18h28f.m4a?guid=8226510984&vkey=D31C14EA40A202A9D1EC994B68159FF4542047EDAB36D18C8C4BB1FE13D8D7D1769865819E5D13335F717BC7500D34DEA184191C0FC451CF&uin=0&fromtag=38

// 1. singer-detail.vue 
// 添加 processSongsUrl
import {createSong, Song, processSongsUrl} from 'common/js/song'

getSingerDetail(this.singer.id).then((res) => {
    if (res.code === ERR_OK) {
        // 调用 processSongsUrl
        processSongsUrl(this._normalizeSongs(res.data.list)).then((songs) => {
            this.songs = songs
            console.log(this.songs)
        })
        // 原来的处理方式
        // this.songs = this._normalizeSongs(res.data.list)
    }
})

// 2.common/js/song.js
// 添加 getSongsUrl 去获取接口
import { getSongsUrl } from 'api/song'
import { ERR_OK } from 'api/config'

export class Song {
    constructor({ id, mid, singer, name, album, duration, image, url}) {
        // ...
        // 此处修改
        this.url = url
    }
}

export function createSong(musicData) {
    return new Song({
        // ...
        // 此处修改
        url: musicData.url
    })
}

// 此处全部添加
export function processSongsUrl(songs) {
    return getSongsUrl(songs).then((res) => {
        if (res.code === ERR_OK) {
            let urlMid = res.url_mid
            if (urlMid && urlMid.code === ERR_OK) {
            let midUrlInfo = urlMid.data.midurlinfo
            midUrlInfo.forEach((info, index) => {
                let song = songs[index]
                song.url = `http://dl.stream.qqmusic.qq.com/${info.purl}`
            })
        }
    }
        return songs
    })
}

// 3. aip/song.js

// 添加获取 UID
import { getUid } from 'common/js/uid'

// 添加获取 URL
export function getSongsUrl(songs) {
    const url = '/api/getPurlUrl'
    let mids = []
    let types = []

songs.forEach(song => {
    mids.push(song.mid)
    types.push(0)
})

const data = Object.assign({}, commonParams, {
    g_tk: 5381,
    format: 'json',
    platform: 'h5',
    needNewCode: 1,
    uin: 0
})

return axios.post(url, {
    comm: data,
    url_mid: genUrlMid(mids, types)
})
.then((res) => {
        return Promise.resolve(res.data)
    })
}

// 添加获取 URL MID
function genUrlMid(mids, types) {
    const guid = getUid()
    return {
        module: 'vkey.GetVkeyServer',
        method: "CgiGetVkey",
        param: {
            guid,
            songmid: mids,
            songtype: types,
            uin: '0',
            loginflag: 0,
            platform: '23'
        }
    }
}

// 4.common/js/uid.js (此处是新创建的文件)

let _uid = ''

export function getUid() {
    if (_uid) {
        return _uid
    }
    if (!_uid) {
        const t = (new Date).getUTCMilliseconds()
        _uid = '' + Math.round(2147483647 * Math.random()) * t % 1e10
    }
    return _uid
}

// 5. webpack.dev.conf.js

// ...
const portfinder = require('portfinder')
const axios = require('axios')
// 此处添加 bodyParser
const bodyParser = require('body-parser')

devServer: {
    before(app) {
        // 此处添加 /api/getPurlUrl
        app.post('/api/getPurlUrl', bodyParser.json(), function (req, res) {
            const url = 'https://u.y.qq.com/cgi-bin/musicu.fcg'
            axios.post(url, req.body, {
            headers: {
                referer: 'https://y.qq.com/',
                origin: 'https://y.qq.com',
                'Content-type': 'application/x-www-form-urlencoded'
            }
        }).then((response) => {
            res.json(response.data)
        }).catch((e) => {
            console.log(e)
        })
    })
},

以上是我获取的。。。

以上有点粗，如果看着乱，请参考老师给的 github 地址(或者直接问我，哈哈哈)

修改地址

https://github.com/ustbhuangyi/vue-music/commit/5907ffd57bf1724fa67d133bbc9832b1dfd41c9f

此处有一个心得, 先找到的入口点, (singer-detail.vue) 然后逐步推进。

2

5

慕少8273844

同学 方便给我手机号吗 我有个问题想咨询一下您

2019-04-10

共5条回复