vue2.x 通過(guò)后端接口代理,獲取qq音樂(lè)api的數(shù)據(jù)示例
更新時(shí)間：2019年10月30日 09:48:03 作者：__光
今天小編就為大家分享一篇vue2.x 通過(guò)后端接口代理,獲取qq音樂(lè)api的數(shù)據(jù)示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
前言: 部分qq音樂(lè)的api接口不能直接通過(guò)jsonp訪問(wèn),需要通過(guò)官方的代理才能獲取,如:歌詞,推薦歌單等
1. webpack.dev.conf.js中創(chuàng)建接口:
// 開(kāi)頭調(diào)用:
var express = require('express')
var axios = require('axios')
var app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
// devServer的最后添加:
before(app) {
app.get('/api/getDiscList', function (req, res) {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' // 原api
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
}
2. api的js文件中,將url換成步驟1中自定義的接口,通過(guò)axios獲取返回?cái)?shù)據(jù)
import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'
import axios from 'axios'
export function getDiscList() {
const url = '/api/getDiscList'
const data = Object.assign({}, commonParams, {
platform: 'yqq', // 加引號(hào)
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
3. 組件中通過(guò)api的js文件中的方法獲取數(shù)據(jù)
import {getDiscList} from 'api/recommend'
_getDiscList() {
getDiscList().then((res) => {
if (res.code === ERR_OK) {
console.log('推薦:', res)
this.discList = res.data.list
} else {
console.log('沒(méi),沒(méi)有推薦')
}
})
}
以上這篇vue2.x 通過(guò)后端接口代理,獲取qq音樂(lè)api的數(shù)據(jù)示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?2?和?Vue?3?中?toRefs函數(shù)的不用用法
Vue?是一款流行的JavaScript?框架，用于構(gòu)建用戶界面，在Vue2和?Vue3中，都存在一個(gè)名為toRefs的函數(shù)，但其行為在這兩個(gè)版本中有所不同，這篇文章主要介紹了Vue2和Vue3中toRefs的區(qū)別,需要的朋友可以參考下2023-08-08
Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解
這篇文章主要為大家介紹了Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue-video-player 解決微信自動(dòng)全屏播放問(wèn)題(橫豎屏導(dǎo)致樣式錯(cuò)亂問(wèn)題)
這篇文章主要介紹了vue-video-player 解決微信自動(dòng)全屏播放問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例
這篇文章主要介紹了Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue指令，Vue官網(wǎng)一共有提供了14個(gè)指令，下面我們就來(lái)詳細(xì)講解每一個(gè)指令的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-10-10
vue.config.js中配置分包策略及常見(jiàn)的配置選項(xiàng)
在Vue.js中分包（Code Splitting）是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時(shí)按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見(jiàn)的配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue swipe自定義組件實(shí)現(xiàn)輪播效果
這篇文章主要為大家詳細(xì)介紹了vue swipe自定義組件實(shí)現(xiàn)輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能
這篇文章主要介紹了Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能,限制input框內(nèi)只能輸入數(shù)字,且為11位,通過(guò)實(shí)例代碼介紹了對(duì)輸入手機(jī)號(hào)做校驗(yàn)的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結(jié)合實(shí)例形式分析了vue2.0組件之間通信的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
vue實(shí)現(xiàn)監(jiān)聽(tīng)localstorage值變化
這篇文章主要介紹了vue實(shí)現(xiàn)監(jiān)聽(tīng)localstorage值變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08