vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例
前言: 部分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獲取返回數(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', // 加引號 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ù)示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue 重塑數(shù)組之修改數(shù)組指定index的值操作
這篇文章主要介紹了vue 重塑數(shù)組之修改數(shù)組指定index的值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對比vue2帶來的性能提升有很多優(yōu)勢,總體來說Vue 3在性能、開發(fā)體驗和代碼組織方面都有所改進,使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā),需要的朋友可以參考下2023-04-04Vue3使用el-form嵌套el-table進行單條數(shù)據(jù)的表單校驗功能
在實際開發(fā)過程中,我們經(jīng)常需要處理表格中的表單數(shù)據(jù),比如在編輯表格中的某一行數(shù)據(jù)時進行校驗,本文給大家介紹了Vue3使用el-form嵌套el-table進行單條數(shù)據(jù)的表單校驗功能,文中有相關(guān)的代碼供大家參考,需要的朋友可以參考下2024-08-08vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))
這篇文章主要介紹了vue3.0如何修改瀏覽器標(biāo)題(靜態(tài)),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09