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

下面是详细讲解vue使用jsonp抓取qq音乐数据的方法的完整攻略。

步骤一:了解JSONP原理

JSONP是一种数据传输方式,它的原理是利用html的script标签没有跨域限制这一特性,在同一个页面中,通过向服务器请求一个jsonp类型的文件,服务器解析后返回数据,并在返回数据中添加一个函数调用语句,浏览器接收到响应文件后自动执行函数,从而实现了跨域访问数据,也就是实现了跨域JSON数据的传输。

步骤二:安装jsonp库

我们需要安装jsonp库来帮助我们实现JSONP请求,这里使用npm方式安装:

npm install jsonp --save

步骤三:使用jsonp库

在vue项目中,我们需要在组件的mounted(或created)钩子函数中发起JSONP请求,并在回调函数中处理返回的数据。下面提供两个示例:

示例一:获取QQ音乐热门歌单

import jsonp from 'jsonp'

export default {
  name: 'HotSongList',
  data () {
    return {
      hotSongList: [] //存储热门歌单的数组
    }
  },
  mounted () {
    const url = 'https://u.y.qq.com/cgi-bin/musics.fcg?-=getUCGI1869823758272879&g_tk=5381&jsonpCallback=getUCGI1869823758272879&loginUin=0&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8¬ice=0&platform=yqq.json&needNewCode=0&data=%7B%22category%22%3A%22playlist%22%2C%22sort%22%3A%220%22%2C%22sin%22%3A%220%22%2C%22ein%22%3A%220%22%7D'
    jsonp(url, {param: 'jsonpCallback'}, (err, data) => {
      if (err) {
        console.error(err)
      } else {
        this.handleData(data)
      }
    })
  },
  methods: {
    handleData (data) {
      this.hotSongList = data.data.list
    }
  }
}

示例二:获取QQ音乐歌曲信息

import jsonp from 'jsonp'

export default {
  name: 'SongInfo',
  data () {
    return {
      songInfo: {} //存储歌曲信息的对象
    }
  },
  mounted () {
    const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_play_single_song.fcg?format=jsonp&songid=109739124&platform=yqq.json&jsonpCallback=SongInfoCallback&loginUin=0&hostUin=0&needNewCode=0'
    jsonp(url, {name: 'SongInfoCallback'}, (err, data) => {
      if (err) {
        console.error(err)
      } else {
        this.handleData(data)
      }
    })
  },
  methods: {
    handleData (data) {
      this.songInfo = data.data[0]
    }
  }
}

以上就是使用Vue实现JSONP抓取QQ音乐数据的方法,可以根据实际需求来进行相应的配置和调整。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue使用jsonp抓取qq音乐数据的方法 - Python技术站

(0)
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • 使用Node操作MongoDB数据库的方法

    使用Node.js操作MongoDB数据库的方法可以通过MongoDB官方提供的驱动程序(mongodb)来实现。下面是操作MongoDB数据库的方法的完整攻略: 安装MongoDB驱动程序 使用npm命令安装MongoDB驱动程序: npm install mongodb –save 连接数据库 在使用MongoDB之前,需要先进行数据库连接。可以使用M…

    node js 2023年6月8日
    00
  • Angular8升级至Angular13遇到的问题解决

    以下是“Angular8升级至Angular13遇到的问题解决”的完整攻略。 背景 Angular是目前应用非常广泛的前端MVC框架之一。由于Angular版本更新较快,升级过程中会涉及到一定的风险,因此在升级之前需要仔细阅读相关的文档,避免不必要的麻烦。 升级步骤 步骤一:备份项目和依赖 在升级之前,需要备份项目和依赖。稍有不慎就会导致大量的工作和时间被浪…

    node js 2023年6月9日
    00
  • Node.js程序中的本地文件操作用法小结

    下面是详细讲解“Node.js程序中的本地文件操作用法小结”的完整攻略。 Node.js程序中的本地文件操作用法小结 什么是本地文件操作 本地文件操作指的是在Node.js程序中对于操作本地文件系统进行读写的过程。常用文件包括文本、图片、视频、音频等。 本地文件操作的API Node.js提供了fs模块来实现对于本地文件系统进行读写的功能。其API包括方法如…

    node js 2023年6月8日
    00
  • node 版本切换的实现

    关于“node 版本切换的实现”的完整攻略,我将从以下几个方面来讲解: Node 版本管理器介绍 使用 nvm 安装和切换 Node 版本的步骤 使用 n 模块安装和切换 Node 版本的步骤 示例说明:通过 nvm 安装和切换 Node 版本 示例说明:通过 n 模块安装和切换 Node 版本 1. Node 版本管理器介绍 Node 版本管理器是一种用于…

    node js 2023年6月8日
    00
  • node运行js获得输出的三种方式示例详解

    关于”node运行js获得输出的三种方式示例详解”,我为您提供以下攻略。 1. Node.js 环境基础 在介绍三种方式之前,需要着重强调Node.js环境的必要性。Node.js环境是指运行JavaScript代码的环境,它是基于Google Chrome V8 引擎构建的一种开源的JavaScript运行环境。要在本机运行JavaScript代码,需要在…

    node js 2023年6月8日
    00
  • JavaScript中最常见的三个面试题解析

    下面我将详细讲解“JavaScript中最常见的三个面试题解析”的完整攻略。 问题一:什么是闭包? 在 JavaScript 中,闭包是一个重要的概念。闭包指的是在一个函数内部,能够访问到其外部作用域的变量的函数。具体来说,闭包是一个函数和创建该函数的词法环境的组合,词法环境是一个包含所定义的变量和函数的对象。闭包可以保留函数的状态,使其在执行环境之外的某个…

    node js 2023年6月8日
    00
  • Nodejs-cluster模块知识点总结及实例用法

    Nodejs-cluster模块知识点总结及实例用法 简介 Node.js是单线程的,因此它只能利用单个CPU核心,如果需要更多的资源,那么就需要启动多个进程,以便利用多个核心。Nodejs-cluster是一个可以创建集群的模块,可以通过这个模块来利用更多的CPU核心。 安装 可以通过npm安装,只需要在命令行中输入以下指令: npm install cl…

    node js 2023年6月8日
    00
  • node.js中的fs.lchown方法使用说明

    Node.js中的fs模块提供了很多文件系统相关的功能,其中包括更改文件所有者的方法lchown。本文将详细解释如何使用fs.lchown方法。 fs.lchown方法的用途 fs.lchown方法用于更改文件或目录的所有者。不同于fs.chown方法,它不会跟踪链接,并且仅在操作系统支持它时才有用。 fs.lchown方法的语法 fs.lchown(pat…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部