Vue音乐--搜索页面04_根据输入值抓取搜索数据

最新推荐文章于 2024-07-16 01:25:59 发布

「已注销」

最新推荐文章于 2024-07-16 01:25:59 发布

阅读量1.3k

点赞数 1

分类专栏：移动端音乐项目抓取数据文章标签： vue axios 获取数据异步问题

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

版权

本文介绍了在Vue音乐应用中如何根据输入值抓取搜索数据，包括跨域请求QQ音乐API，提取歌曲和歌手数据，以及解决因异步导致的歌曲数组无法操作的问题。通过监听器watch处理异步，最终成功合并数据。

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

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

四、根据输入值抓取搜索结果数据

要点：
- 细心找到数据获取文件
- 跨域axios请求url
- 提取歌曲数据成一个新数组
- 与歌手对象合并成一个数组
- 解决歌曲数组数据异步导致无法进行操作（合并）的问题

（一）、抓取数据

在QQ音乐移动端网页里，输入值，细心查找数据获取
在这里插入图片描述
但是双击进去，会发现浏览器没有打开相应的json，而是以下数据

也就是说我们要跨域进行数据请求了

找到相应url跨域需要的数据，和hash数据

↓ build- ->webpack.dev
跨域请求url

//搜索结果数据
before(app) {
   
	app.get('/api/getSearch', (req, res) => {
   
		var url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
		axios.get(url, {
   
			headers: {
   
				referer: 'https://y.qq.com/m/index.html',
				host: 'c.y.qq.com'
			},
			params: req.query // 通过req从浏览器端发过来的一堆参数(platform，sin，ein等)透传给qq的服务端
		}).then((response)=>{
    // qq服务端的响应数据，再通过res将响应数据输出到浏览器端
			res.json(response.data)
		}).catch((error)=>{
   
			console.log(error)
		})
	})
}

↓ api- ->search.js

//搜索结果数据
export function getSearch(query,page,zhida,perpage){
   
	//通过自身模拟服务器访问有host权限的数据
	const urlfront = '/api/getSearch'
	//把hash做成对象,es6创建对象并赋值,
	//固定的ha