Vue学习笔记实战篇——音乐播放器 · 需求说明

本文为转载，原文：Vue学习笔记实战篇——音乐播放器 · 需求说明

介绍

Vue学习了这么久，也是时候来一把实战了。目前网上可以看到很多用vue做的在线音乐播放器，这方面的源码也比较多，所以，我就决定，我也要尝试做一个在线音乐播放器，毕竟有那么多源码可以参考。

技术栈

本次的项目将会实现前后端分离。

前端

1. vue + vue-router + vuex + vue-resource
2. Mint UI

后端

1. 语言：php
2. 框架：laravel
3. 数据库：mysql

需求

思维导图

需求说明

个人中心

个人中心这一块比较传统，就是一些登录，注册，忘记密码，修改密码，修改个人资料这些需求。
既然我们要做忘记密码的功能，那就需要做一些密保的问题，由于短信需要收费，所以我们就用邮箱验证吧，登录之后，可以在修改个人资料的页面增加个绑定邮箱的功能，绑定之后需要在使用邮箱激活绑定。

音乐

音乐这一模块主要有4个页面

个人收藏

个人收藏页面是一个个人收藏的音乐列表，点击歌曲可播放该歌曲。左划可移除收藏列表。

歌榜

歌榜页面首先是个歌榜列表，点击单个歌榜，可进入该歌榜的音乐列表。点击歌曲可播放该歌曲，左划可添加至收藏。下拉加载。

搜索

搜索页面可以输入关键字搜索相关音乐，并以列表的形式展现搜索结果。点击歌曲可播放该歌曲，左划可添加至收藏。下拉加载。

音乐播放

音乐播放页面是音乐播放时的详情页面。可以上一曲，下一曲，暂停播放，开始播放，修改循环模式，添加或取消收藏。

界面要求

头部

头部固定，作为导航菜单，个人中心，个人收藏，歌榜，搜索，以图表的形式显示。个人中心靠左，其余的菜单居中，点击个人中心时，个人信息页面从左侧滑出。

底部

底部固定，显示播放信息，可暂停播放，下一曲，点击进入播放详情。

内容

内容部分一般都是用来显示列表的。

播放详情

该页面要求全屏显示，覆盖头部，底部。

源码

github地址：源码

完

本文为原创，转载请注明出处

上一节：Vue学习笔记进阶篇——vuex核心概念
返回目录
下一节：Vue学习笔记实战篇——音乐播放器 · 整体布局