1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue 高仿qq音乐热门歌单推荐之详情页数据获取

Vue 高仿qq音乐热门歌单推荐之详情页数据获取

时间:2018-09-04 08:37:44

相关推荐

Vue 高仿qq音乐热门歌单推荐之详情页数据获取

准备:

先在components目录下新建disc.vue,然后

在router的index.js里这样导入Disc:

import Disc from '@/components/disc/disc'

然后添加子路由:

{path: '/recommend',component: Recommend,children: [{// path:'/recommend/:id',path: ':id',component: Disc}]},

注意在disc.vue里注册MusicList

components: {MusicList}

之后呢,在recommend文件夹下的recommend.vue里添加

<router-view></router-view>

注意添加位置,

好了,正式开始:

第一步:

disc: {}

二:

export const SET_DISC = 'SET_DISC'

三:

[types.SET_DISC](state, disc) {state.disc = disc}

四:

export const disc = state => state.disc

设置跨域:

'/api/getSongList':{target:'https://c./qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg',// target:'https://c./qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg',// secure:false,// changeOrigin:true,bypass:function(req,res,proxyOptions){req.headers.referer='/';req.headers.host='';},pathRewrite:{'^/api/getSongList': ''}},

在recommend.js里写getSongList方法

export function getSongList(disstid) {const url = '/api/getSongList'const data = Object.assign({}, commonParams, {disstid,type: 1,json: 1,utf8: 1,onlysong: 0,platform: 'yqq',hostUin: 0,needNewCode: 0,g_tk: 67232076})return axios.get(url, {params: data}).then(res => {return Promise.resolve(res.data)})}

接着再disc.vue里继续写:

紧接着,写created

created() {this._getSongList()console.log("ertertertrt ")},

然后写methods,注意,就到这里,已经解决跨域请求了,并且可以返回数据

_getSongList() {if (!this.disc.dissid) {this.$router.push('/recommend')return}getSongList(this.disc.dissid).then((res) => {var reg = /{.*}/var matches = res.match(reg) if (matches) {res = JSON.parse(matches[0])}if (res.code === ERR_OK) {console.log(res)this.songs = this._normalizeSongs(res.cdlist[0].songlist)}})},

注意,就到这里,已经解决跨域请求了,但是一开始我没有写上图中红色矩形里的正则表达式,导致有数据,一直获取不到,还是就是一定要用JSON.parse进行解析

var reg = /{.*}/var matches = res.match(reg) if (matches) {res = JSON.parse(matches[0])}

最后

_normalizeSongs(list) {let ret = []list.forEach((musicData) => {if (musicData.songid && musicData.albummid) {ret.push(createSong(musicData))}})return ret}

export function createSong(musicData) {return new Song({id: musicData.songid,mid: musicData.songmid,singer: filterSinger(musicData.singer),name: musicData.songname,album: musicData.albumname,duration: musicData.interval,image: `/music/photo_new/T002R300x300M000${musicData.albummid}.jpg?max_age=2592000`,// url: `http://ws.stream./${musicData.songid}.m4a?fromtag=46`// url: `http://isure.stream./C100${musicData.songmid}.m4a?fromtag=32`url:'http://isure.stream./C100${musicData.songmid}.m4a?fromtag=32'// url: `/${musicData.songid}.m4a?fromtag=38`})}

然后,就成功获取了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。