Vue音乐--排行榜页面07_抓取详情页数据

最新推荐文章于 2021-09-04 17:04:48 发布

「已注销」

最新推荐文章于 2021-09-04 17:04:48 发布

阅读量761

点赞数

分类专栏：移动端音乐项目 vue 抓取数据文章标签： vue jsonp axios 抓取数据

本文链接：https://blog.csdn.net/kingAn123/article/details/82950952

版权

本文介绍如何在Vue项目中抓取QQ音乐排行榜详情页数据。通过分析网络请求，利用jsonp和axios获取数据，监听点击事件传递排行榜ID，提取所需信息并封装成对象。最后，展示数据并获取歌曲URL，实现音乐播放功能。

摘要由CSDN通过智能技术生成

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

七、抓取排行榜详情页数据

要点
- 进入QQ音乐移动端，查找Network中的排行榜首页数据，在XHR中找到
- 使用之前写好的jsonp解析数据的方法，传入处理好的url
- 点击事件传入点击的排行榜id

在这里插入图片描述
jsonp数据

url数据

相关代码

import jsonp from '@/common/js/jsonp'	//引入jsonp模块
import {
    commonParams,object} from './config'

//获取排行榜歌曲列表数据
export function getRankList(topid){
    
	//自己判断截取出url前半段
	const urlfront = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg'
	//把hash做成对象,es6创建对象并赋值,
	//固定的hash写在变量js模块里， config.js
	const thehash = Object.assign({
    },commonParams,{
    
		notice: 0,
		platform: &