课程设计（实训）报告
课 程 Web 前端框架实训
题 目 共享音乐网站的设计与实现
专 业 软件工程
指导教师
班级 软件 191 学号 102 姓名
2021 年 12 月 20 日
《Web 前端框架实训》实训任务书
系 别
软件工程系
专
业
软件工程
题 目
共享音乐网站的设计与实现
指导教师
设计时间
2021 年 12 月 27 日 至 2021 年 12 月 31 日 共 1
周
课
程
设
计
要
求
一、基本要求
1、前端
根据本学期所学知识，使用 Vue.js 前端技术框架，结合动态 Web 开发技术，设
计一个前后端分离的单页应用(SPA)项目: 共享音乐网站，项目包含注册和登录页面，
以及音乐分类展示页面、音乐选择列表和播放页面（可选做功能：播放次数、评分、
评论等功能），页面数据从服务器端接口获取。
2、服务器端
使用 JSP 技术，创建动态 Web 项目，提供数据录入/编辑界面，数据至少包括
歌曲名称、演唱者、歌曲链接和歌曲收录入库时间等；后台数据库采用 MySql，保
存从页面输入的内容；设计数据访问接口，实现接收前端的数据查询，并将查询结
果提供给前端展示。在完成系统功能的基础上，撰写设计报告。
二、提交设计报告
1）需求分析；2）数据库设计；3）系统整体设计；4）系统功能实现；5）实训
小结；6）参考文献。
注：参考文献的书写格式要符合如下规范：
a.期刊文献书写格式：
作者.论文篇名[J].期刊名.出版年,卷（期）.
如：高曙明.自动特征识别技术综述[J].计算机学报.1998,21(3).
b.著作文献书写格式：
作者.书名[M].出版地：出版社，出版年.
如：[美]埃克尔.Java 编程思想[M].北京：机械工业出版社，2007.
第一部分：实训目的
通过本次实训，熟悉相关开发工具的使用，灵活运用所学相关的知识和技术来完成给定
的任务；同时检验学生在完成给定任务的过程中发现问题、分析问题、解决问题、学习新技
术和掌握新技术的能力。
第二部分：实训准备(包含实训设备及器材)
硬件准备：
1. 安装有 Microsoft window7/10 64 操作系统计算机
2. 配备互联网访问功能
软件准备：
1. 操作系统：Microsoft Window7/10 32/64 位
2. JDK8
3. Tomcat8
4. Eclipse/其他
5. Mysql
6. VSCode
第三部分：实训要求
1. 严格考勤，未经允许不得迟到、早退以及中途离开实训场所。
2. 实训过程不得到处走动、大声喧哗等影响其他同学。
3. 爱护设备，不得自行处理设备故障。
4. 独立完成任务，不得抄袭，如遇到难于解决的问题，可以使用网络查找资料或
请教老师。
5. 按时完成任务、提交课程设计报告，不得拖延。
6. 严格按照设计要求规定的内容提交材料，包括项目源程序、本课程设计报告的
打印版和电子版。
第四部分：实训内容(系统分析与代码实现)
一、需求分析
本次实训的项目是共享音乐网站的设计与实现，对于这个项目的意义是很大的，
可以提供用户自行上传音乐到服务器，所有的用户享受音乐。
项目的开发需求包括了用户的注册登陆，收藏音乐，对音乐的播放量进行统计，
给出排行榜信息，歌曲的播放和暂停，用户上传 mp3 文件，展示所有的歌单等等。
1.1 登陆：
用户在未登陆的状态下仅允许可以查看音乐，播放和浏览；当查看个人的歌单的
时候或者收藏音乐时以及上传歌曲时，将弹出登陆框，若无账号，可以在窗口注册账
号；登陆成功在页面展示个人的账号名称。
登陆需要验证个人账户的正确与否，只有与后端数据库匹配，才允许登陆完成。
登陆异常会提示各类异常信息。
1.2 注册：
用户注册的时候提交数据到后端进行判断，符合条件的进行注册，并且转到登陆
的页面。
信息填写缺少的，或者用户名存在的，可以提示相关的信息。
1.3 展示：
可以将所有的音乐进行展示，首页分类点击进去将本类型的所有音乐展示给用户。
还包括个人歌单的展示，对展示的歌曲可以播放收藏等必要操作。
1.4 上传：
用户可以将自己想提交到服务器的歌曲进行上传，提供一个文件拖拽的框，对上
传的文件进行获取演唱者和歌曲名称，将其添加到服务器和在数据库内写入该歌曲的
信息，方便今后进行数据的播放等操作。
1.5 播放：
用户点击播放按钮可以正确的在数据库和服务器进行数据的获取，并且能在前端
页面播放歌曲。随时切换歌曲播放。
1.6 收藏：
已经登陆的用户可以对喜欢的歌曲进行收藏，未登陆的用户先要求登陆再进行收
藏。
1.7 搜索：
用户在搜索框内进行查询与关键字有关的内容，包括包含歌曲名称或者歌手的，
按照歌单的展示方法，在页面进行展示。
二、数据库设计
数据库需要保存个人账户信息，登陆注册的时候进行验证和修改；需要保存歌曲
的信息，对歌曲的各类信息保存，对歌曲进行收藏。
数据库主要起到存储数据的功能，所以合理的数据库设计可以减少开发的难度。
为了实现数据库对歌曲的访问需要设置歌曲表，歌曲拥有类型，还需要一个类型
表，个人信息的保存需要建立用户表，对歌曲进行收藏，需要设计收藏表。
2.1 关系模式设计
Song（歌曲表）：（id，songname，singer，fileurl，username，typename，
uploadtiime，clicknum）；
Songtype（歌曲类型表）：（id，songtype）
User（用户表）：（id，username，password，createtime）；
Collect（收藏表）：（id，songid，username，time）；
