vue全家桶:高仿网易云音乐播放器 PC端
2017-07-16 本文已影响501人
始悔不悟
这个代码写的很糟糕，已经删除git仓库，使用react进行重构
基于Vue的高仿网易云音乐
歌单页.png
UI基本对着网易切...
技术栈:vue全家桶+axios+stylus
点击预览 请务必配合chrome桌面端进行食用全屏更佳
[github]https://github.com/hackerwen/Netease-Music-of-Vue
动态预览.gif
- vue-router实现路由切换.
- vuex进行共享状态管理、处理组件间通信
- axios发送http请求.
- stylus作css预处理.
- 初始化收藏歌单/歌曲通过html5提供的localstorage.
- api来源(爬虫+戳这里)
实现功能：
- 歌单（推荐歌单、收藏/删除歌单、歌单详情页）
- 收藏/删除歌曲
- 歌手详情页
- 搜索 （单曲、歌手、歌单）
- 在线播放（切歌、顺序、循环、单曲、列表）
- 排行榜
- html5 audio控件重写
- 歌词同步
- 滑动至底部加载（歌单及搜索部分）
- 个性推荐轮播图（其实个性推荐那一页就一个轮播图）
预计添加功能：
- 添加歌曲播放页面评论分页
- 精细歌曲播放页动画
还未解决的问题
- 轮播图使用很传统的方式写的，不知道vue在处理轮播图这一块有没有什么独特的优势
- 如何更优雅的编写vue项目,很多地方都是想怎么写就怎么写，很多重复代码写了也懒得去抽象出来进行整理，很多问题都没有考虑，甚至很多地方自己都觉得很"脏",真的很惭愧,希望有同学可以指点一二.
关于api
特别谢谢我的室友.
- 轮播图、热门歌单、榜单是通过爬虫获取.
- 音乐直链是通过伪造客户端请求加解密网易云音乐官方api获取数据.
- 当然除了轮播图、热门歌单、榜单，其余api都可以从前面的AD's api获取获取,十分感谢开发者,api文档也十分详细.
