vue2.x 通过后端接口代理,获取qq音乐api的数据示例


Posted in Javascript onOctober 30, 2019

前言: 部分qq音乐的api接口不能直接通过jsonp访问,需要通过官方的代理才能获取,如:歌词,推荐歌单等

1. webpack.dev.conf.js中创建接口:

// 开头调用:
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获取返回数据

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文件中的方法获取数据

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的数据示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js由下向上不断上升冒气泡效果实例
May 07 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
Jquery Fade用法详解
Nov 06 jQuery
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 #Javascript
基于JavaScript实现单例模式
Oct 30 #Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 #Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 #Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 #Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 #Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 #Javascript
You might like
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
php之可变变量的实例详解
2017/09/12 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
Python ZipFile模块详解
2013/11/01 Python
python套接字流重定向实例汇总
2016/03/03 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python列表使用实现名字管理系统
2019/01/30 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
几个判断型的面试题
2012/07/03 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
银行门卫岗位职责
2013/12/29 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
冰雪公主观后感
2015/06/16 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL