# vue-music

**Repository Path**: Ranmon666/music

## Basic Information

- **Project Name**: vue-music
- **Description**: vue实现的音乐播放器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2019-06-15
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-music
1. 项目采用Vue+Vuex+Vue Router+axios技术进行开发，数据来源是通过QQ音乐接口获取，目前已完场推荐页面，歌手页面，歌手详情页，播放器内置组件的开发
2. 主要技术：Vue+Vuex+Vue Router，服务端通讯使用axios、jsonp，better-scroll移动端滚动库、webpack2.0项目构建工具

## 项目截图
1.推荐页 \
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/205401_6fb9c2d2_5014554.png "推荐页.png")\
2.歌手页 \
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/205522_1539e2a0_5014554.png "歌手页.png")\
3.歌手详情页 \
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/205647_136074b0_5014554.png "歌手详情页.png")\
4.播放页 \
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/205827_b8deec03_5014554.png "播放页.png")\
5.歌词页 \
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/210118_0658ba03_5014554.png "歌词页.png")\

## 踩坑日志
踩坑1：\
访问QQ音乐的接口去获取数据，结果各种坑在等着我
一开始直接是发请求，返回都是invalid referer，无法拿到数据
通过网上阅读相关资料，在headers里会有一个referer，当发起请求时，QQ音乐的服务器会判断referer里是不是它自己的域名，如果是则继续访问，如果不是就会拦截。
当我直接上手请求时，referer里是我的本地服务器的地址，所以被拦截下来了，无法通过检测。
这时我们需要伪造一个hreferer，如下图的配置，最后能通过referer检测，正确访问QQ音乐的接口拿到数据

ps:一开始查阅资料，是需要在build文件下dev-server.js文件中配置，可是我的build下根本没有这个文件，然后再百度下，原来新版的webpack是将这个文件合并到了webpack.dev.conf里，我们配置的时候在这个文件中进行图一图二的即可 \
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/210643_fdd096ac_5014554.png "踩坑1-1.png")\
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/210701_578db39d_5014554.png "踩坑1-2.png")\
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/210717_acb495e7_5014554.png "踩坑1-3.png")

踩坑2：\
QQ音乐真的搞事情，动不动就换接口🙄
旧版的接口只需要拼接songmid就可以获取数据了。
可能就是数据太容易拿到了，QQ音乐不爽了，新版的接口又多了个vkey。vkey需要我们通过songmid去获取。
最后将songmid和vkey拼接到接口上就能获取歌曲的数据了 \
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/211042_90f90c1a_5014554.png "踩坑2-1.png")\
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/211057_cb2cbc04_5014554.png "踩坑2-2.png")\
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/211113_0995147b_5014554.png "踩坑2-3.png")\
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/211127_ec71f3a3_5014554.png "踩坑2-4.png")\