vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例
更新時(shí)間：2019年10月30日 09:48:03 作者：__光
今天小編就為大家分享一篇vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
前言: 部分qq音樂的api接口不能直接通過jsonp訪問,需要通過官方的代理才能獲取,如:歌詞,推薦歌單等
1. webpack.dev.conf.js中創(chuàng)建接口:
// 開頭調(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中自定義的接口,通過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. 組件中通過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('沒,沒有推薦')
}
})
}
以上這篇vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了基于vue手寫tree插件的那點(diǎn)事兒，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue 重塑數(shù)組之修改數(shù)組指定index的值操作
這篇文章主要介紹了vue 重塑數(shù)組之修改數(shù)組指定index的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對(duì)比vue2帶來的性能提升有很多優(yōu)勢(shì)，總體來說Vue 3在性能、開發(fā)體驗(yàn)和代碼組織方面都有所改進(jìn)，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)，需要的朋友可以參考下2023-04-04
Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗(yàn)功能
在實(shí)際開發(fā)過程中,我們經(jīng)常需要處理表格中的表單數(shù)據(jù),比如在編輯表格中的某一行數(shù)據(jù)時(shí)進(jìn)行校驗(yàn),本文給大家介紹了Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗(yàn)功能,文中有相關(guān)的代碼供大家參考,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue樣式穿透 ::v-deep的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下2021-01-01
本篇文章主要介紹了vue父子組件通信 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
vue實(shí)現(xiàn)商品列表的無(wú)限加載思路和步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)商品列表的無(wú)限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁(yè)數(shù)據(jù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下,2024-06-06
vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))
這篇文章主要介紹了vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了ant-design-vue按需加載的坑的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05