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

 更新时间:2019年10月30日 09:48:03   作者:__光  
今天小编就为大家分享一篇vue2.x 通过后端接口代理,获取qq音乐api的数据示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

前言: 部分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的数据示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 2 和 Vue 3 中 toRefs函数的不用用法

    Vue 2 和 Vue 3 中 toRefs函数的不用用法

    Vue 是一款流行的JavaScript 框架,用于构建用户界面,在Vue2和 Vue3中,都存在一个名为toRefs的函数,但其行为在这两个版本中有所不同,这篇文章主要介绍了Vue2和Vue3中toRefs的区别,需要的朋友可以参考下
    2023-08-08
  • Vue3使用Swiper实现轮播图示例详解

    Vue3使用Swiper实现轮播图示例详解

    这篇文章主要为大家介绍了Vue3使用Swiper实现轮播图示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    这篇文章主要介绍了vue-video-player 解决微信自动全屏播放问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue结合ElementUI上传Base64编码后的图片实例

    Vue结合ElementUI上传Base64编码后的图片实例

    这篇文章主要介绍了Vue结合ElementUI上传Base64编码后的图片实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue指令的学习

    Vue指令的学习

    这篇文章主要介绍了Vue指令,Vue官网一共有提供了14个指令,下面我们就来详细讲解每一个指令的详细内容,需要的朋友可以参考一下
    2021-10-10
  • vue.config.js中配置分包策略及常见的配置选项

    vue.config.js中配置分包策略及常见的配置选项

    在Vue.js中分包(Code Splitting)是一种将应用程序代码拆分为不同的块或包的技术,从而在需要时按需加载这些包,下面这篇文章主要给大家介绍了关于vue.config.js中配置分包策略及常见的配置选项的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue swipe自定义组件实现轮播效果

    vue swipe自定义组件实现轮播效果

    这篇文章主要为大家详细介绍了vue swipe自定义组件实现轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vue+elementUI el-input输入框手机号校验功能

    Vue+elementUI el-input输入框手机号校验功能

    这篇文章主要介绍了Vue+elementUI el-input输入框手机号校验功能,限制input框内只能输入数字,且为11位,通过实例代码介绍了对输入手机号做校验的方法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Vue2.0实现组件之间数据交互和通信操作示例

    Vue2.0实现组件之间数据交互和通信操作示例

    这篇文章主要介绍了Vue2.0实现组件之间数据交互和通信操作,结合实例形式分析了vue2.0组件之间通信的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-05-05
  • vue实现监听localstorage值变化

    vue实现监听localstorage值变化

    这篇文章主要介绍了vue实现监听localstorage值变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论