Vue学习笔记实战篇——音乐播放器 · 需求说明
2017-07-31 本文已影响88人
ChainZhang
本文为转载，原文：Vue学习笔记实战篇——音乐播放器 · 需求说明
介绍
Vue学习了这么久，也是时候来一把实战了。目前网上可以看到很多用vue做的在线音乐播放器，这方面的源码也比较多，所以，我就决定，我也要尝试做一个在线音乐播放器，毕竟有那么多源码可以参考。
技术栈
本次的项目将会实现前后端分离。
前端
-
vue+vue-router+vuex+vue-resource Mint UI
后端
- 语言：
php - 框架：
laravel - 数据库：
mysql
需求
思维导图
需求说明
个人中心
个人中心这一块比较传统，就是一些登录，注册，忘记密码，修改密码，修改个人资料这些需求。
既然我们要做忘记密码的功能，那就需要做一些密保的问题，由于短信需要收费，所以我们就用邮箱验证吧，登录之后，可以在修改个人资料的页面增加个绑定邮箱的功能，绑定之后需要在使用邮箱激活绑定。
音乐
音乐这一模块主要有4个页面
个人收藏
个人收藏页面是一个个人收藏的音乐列表，点击歌曲可播放该歌曲。左划可移除收藏列表。
歌榜
歌榜页面首先是个歌榜列表，点击单个歌榜，可进入该歌榜的音乐列表。点击歌曲可播放该歌曲，左划可添加至收藏。下拉加载。
搜索
搜索页面可以输入关键字搜索相关音乐，并以列表的形式展现搜索结果。点击歌曲可播放该歌曲，左划可添加至收藏。下拉加载。
音乐播放
音乐播放页面是音乐播放时的详情页面。可以上一曲，下一曲，暂停播放，开始播放，修改循环模式，添加或取消收藏。
界面要求
头部
头部固定，作为导航菜单，个人中心，个人收藏，歌榜，搜索，以图表的形式显示。个人中心靠左，其余的菜单居中，点击个人中心时，个人信息页面从左侧滑出。
底部
底部固定，显示播放信息，可暂停播放，下一曲，点击进入播放详情。
内容
内容部分一般都是用来显示列表的。
播放详情
该页面要求全屏显示，覆盖头部，底部。
源码
github地址：源码
完
本文为原创，转载请注明出处
