准备:
先在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`})}
然后,就成功获取了