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 相关文章推荐
accesskey 提交
Jun 26 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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中变量及部分适用方法
2008/03/27 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
PHPThumb图片处理实例
2014/05/03 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python for和else语句趣谈
2019/07/02 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
python中关于数据类型的学习笔记
2020/07/19 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
社区文化建设方案
2014/05/02 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
教师节座谈会主持词
2015/07/03 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书