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 图片上传预览-兼容标准
Jun 01 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
理解javascript中的闭包
Jan 11 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
JS实现简单打字测试
Jun 24 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
基于mysql的bbs设计(二)
2006/10/09 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
浅谈Python单向链表的实现
2015/12/24 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
对python中的装包与解包实例详解
2019/08/24 Python
使用python实现飞机大战游戏
2020/03/23 Python
关于Python解包知识点总结
2020/05/05 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
亮剑精神演讲稿
2014/05/23 职场文书
幼师求职自荐信
2014/05/31 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers