vue使用jsonp抓取qq音乐数据的方法

 更新时间:2018年06月21日 14:26:05   作者:control_T  
这篇文章主要介绍了vue使用jsonp抓取qq音乐数据的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

1、安装jsonp

npm install jsonp

2、创建jsonp.js文件,内容如下:

import originJSONP from 'jsonp'
/** * 封装jsonp
 * @param {*} url 原始的jsonp第一个参数是url,第二个参数是option,这里为了比较好写参数做了下封装
 * @param {obj} data 参数
 * @param {*} option jsonp的option
 */
export default function jsonp (url, data, option) {
 // 如果url没有?就加一个?拼接
 url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
 return new Promise((resolve, reject) => {
  // 原始jsonp的三个参数,url、option、回调函数
  originJSONP(url, option, (err, data) => {
   // 类似node的设计,如果err是null,表示成功,data是后端返回的数据
   if (!err) {
    resolve(data)
   } else {
    reject(err)
   }
  })
 })
}
export function param (data) {
 let url = ''
 for (var k in data) {
  let value = data[k] !== undefined ? data[k] : ''
  url += '&' + k + '=' + encodeURIComponent(value)
 }
 return url ? url.substring(1) : ''
}

3、创建confiig.js文件,内容如下:

// 用于存放公共数据
export const commonParams = {
 g_tk: 5381,
 format: 'json',
 inCharset: 'utf - 8',
 outCharset: 'utf - 8',
 notice: 0
}
export const options = {
 param: 'jsonpCallback'
}
export const ERR_OK = 0

3、创建recommend.js文件,内容如下:

import jsonp from './jsonp'
import { commonParams, options } from './config'
export function getRecommend () {
 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
 const data = Object.assign({}, commonParams, {
  platform: 'h5', uin: 0, needNewCode: 1
 })
 // 这里返回一个promise对象
 return jsonp(url, data, options)
}

4、在组件中使用,如musicHall.vue中

<script>
import {getRecommend} from '../api/recommend.js'
import {ERR_OK} from '../api/config.js'
export default {
 mounted () {
  //在created中也可
  this._getRecommend()
 },
 methods: {
  _getRecommend () {
   getRecommend().then((res) => {
    if (res.code === ERR_OK) {
     console.log(res.data.slider)
    }
   })
  }
 }
}
</script>

5、总结

  • Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
  • Object.assign(target, source1, source2)
  • encodeURIComponent(URIstring)函数可把字符串作为 URI 组件进行编码。 URIstring 必需。一个字符串,含有 URI 组件或其他要编码的文本。
  • substring()方法用于提取字符串中介于两个指定下标之间的字符。
  • stringObject.substring(start,stop)包括 start 处的字符,但不包括 stop 处的字符。不接受负的参数。

总结

以上所述是小编给大家介绍的vue使用jsonp抓取qq音乐数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 在Linux服务器上部署vue项目

    在Linux服务器上部署vue项目

    这篇文章介绍了在Linux服务器上部署vue项目的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    本篇文章主要介绍了vue项目优化之页面的按需加载(vue+webpack),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue中实现可编辑table及其中加入下拉选项

    vue中实现可编辑table及其中加入下拉选项

    这篇文章主要介绍了vue中实现可编辑table及其中加入下拉选项,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue2实现pdf电子签章问题记录

    vue2实现pdf电子签章问题记录

    仿照e签宝,实现pdf电子签章 => 拿到pdf链接,移动章的位置,获取章的坐标,怎么实现呢,下面小编给大家介绍vue2实现pdf电子签章问题记录,感兴趣的朋友一起看看吧
    2023-12-12
  • vue3新拟态组件库开发流程之table组件源码分析

    vue3新拟态组件库开发流程之table组件源码分析

    这篇文章主要介绍了vue3新拟态组件库开发流程——table组件源码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue路由权限和按钮权限的实现示例

    vue路由权限和按钮权限的实现示例

    本文主要介绍了vue路由权限和按钮权限的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vant中的toast层级改变操作

    vant中的toast层级改变操作

    这篇文章主要介绍了vant中的toast层级改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue计算属性computed方法内传参方式

    vue计算属性computed方法内传参方式

    这篇文章主要介绍了vue计算属性computed方法内传参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3使用Facebook嵌入式视频播放器API方法详解

    vue3使用Facebook嵌入式视频播放器API方法详解

    这篇文章主要为大家介绍了vue3使用Facebook嵌入式视频播放器API方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 解决VueCil代理本地proxytable无效报错404的问题

    解决VueCil代理本地proxytable无效报错404的问题

    这篇文章主要介绍了解决VueCil代理本地proxytable无效报错404的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论