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 相关文章推荐
用JavaScript修改CSS属性的代码
May 06 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
webpack4 升级迁移的实现
Sep 12 Javascript
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学习之PHP运算符
2006/10/09 PHP
改进的IP计数器
2006/10/09 PHP
PHP 中的批处理的实现
2007/06/14 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python @property的用法及含义全面解析
2018/02/01 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python 图像平移和旋转的实例
2019/01/10 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
scrapy头部修改的方法详解
2020/12/06 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
中药专业毕业自荐书范文
2014/02/08 职场文书
党员大会主持词
2014/04/02 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
小兵张嘎观后感
2015/06/03 职场文书