【《基于Spring Boot的在线音乐网站的设计与实现》8200字（论文）】

[5]。

第2章需求分析2.1系统概述在线音乐网站，当游客进入在线音乐网站时，可以根据自己喜欢的音乐人、音乐、歌单风格等在搜索框输入查找，也可以在首页下方找到对应的音乐人、歌单。找到音乐后可以进行播放音乐，查看歌词，在播放栏可以下载、收缩播放栏以外还可以查看音乐人、音乐、歌单的信息、歌词。除了未登录用户的功能外，还可以对收藏的音乐，对音乐人、歌单进行评分、评论，更新头像。后台管理员可以进行用户、歌手、单管理、系统分析。2.1.2系统功能描述该系统具体实现模块如下：用户管理登录即可修改资料，管理员至后台用户操作。音乐信息点按即可查音乐，管理员至后台变更信息。收藏音乐播放后，点按播放栏爱心即收藏。再点按则取消。歌单评价对喜欢的歌单评价，游客不能对其评价。管理员至后台评价操作。2.1.3业务流程分析简称FTD，主要定义项目内容，反应业务处理过程。 以下是此系统主要业务流程、逻辑进行分析。音乐信息任何用户浏览网页。图2-1音乐信息流程 收藏音乐选择音乐，点按播放器爱心即收藏，再点击则取消。图2-2收藏音乐流程（3）修改音乐后台修改音乐，在前端展现给用户。图2-3修改音乐流程（4）歌单评价对该歌单评价，至相应页面即可。图2-4歌单评价流程2.2数据流图简称DFD,是反应必须逻辑功能的数据模型。此系统顶层数据流图两个主要外部实体：用户、管理员。浏览音乐网站的是用户。注册并登录后，即可对音乐收藏、评论操作。还可以对其进行播放、查询音乐、歌手等。管理员则可以对系统中的数据进行管理，修改后用户搜索数据。图2-4顶层数据流图0层数据流图主要描述了系统主要数据、操作流。游客填信息存储至用户表。管理音乐存储至收藏表。资料修改存储至用户表。评论后存储至评论表。查看评论内容，从评论表中进行查看。管理员变更音乐信息，存储至音乐表。图2-5符号说明图2-60层数据流图2.3数据字典数据字典最重要作用是作为分析阶段工具。2.3.1核心数据流编号：FIO-1数据流名称：操作收藏请求简述：操作音乐来源：收藏音乐请求去向：收藏存储文件组成：用户编号+音乐编号编号：FIO-2数据流名称：用户收藏结果简述：收藏音乐来源：收藏存储文件去向：播放栏收藏结果组成：用户编号+音乐编号编号：FIO-3数据流名称：查询音乐请求简述：查询音乐来源：查询音乐请求去向：音乐存储文件组成：歌手+音乐名+音乐地址编号：FIO-4数据流名称：查询音乐结果简述：查询音乐来源：音乐存储文件去向：音乐结果页面组成：音乐名+歌手+音乐文件2.3.2核心数据存储编号：FO1数据存储名称：用户信息简述：用户存储数据存储组成：用户名+密码编号：FO2数据存储名称：收藏信息简述：收藏存储数据存储组成：用户编号+收藏编号+音乐编号编号：FO3数据存储名称：音乐信息简述：音乐存储数据存储组成：音乐名+歌词+音乐地址

第3章系统设计3.1总体设计前端模块分为用户管理、音乐信息、收藏夹、音乐评价、歌单信息、歌手信息。如图3-1所示。图3-1前台功能结构图（1）用户管理：修改资料和更新头像。（2）音乐信息：能在歌单、歌创作的音乐查看信息，在搜索框键入音乐进行搜索，并在搜索列表中选择喜欢的歌曲点按播放，播放栏中进行下载。（3）收藏夹：“我的音乐”被用户选择，可以查看所收藏的音乐且还能播放。（4）音乐评价：在歌单、音乐人页面进行评分、评论。（5）歌单信息：“歌单”被选择，跳转页面查看。（6）歌手信息：“歌手”被选择，跳转页面查看。后端功能模块分别为歌手管理、系统分析、用户管理、歌单管理，如图3-2所示：图3-2后台功能结构图（1）系统首页：浏览系统数据。（2）用户管理：在搜索栏查询信息，页面进行用户管理。（3）歌手管理：对歌手、所创作音乐管理。（4）歌单管理：对歌单、所属音乐管理。3.2前台功能模块设计3.2.1用户管理模块登录前端后，头像下拉框进行选择，更新信息。图3-4用户管理流程操作步骤如下所示：（1）：登录前端。（2）：返回状态为登录失败，跳到步骤1。反之，跳到步骤3。（3）：头像下拉框中选择更新资料，进入步骤4。（4）：编辑个人信息成功。（5）：功能操作完毕。3.2.2音乐信息模块用户在可以在列表进行查看音乐信息，在搜索框进行搜索。列表中选择音乐，播放栏下载。图3-5播放流程操作步骤如下所示：（1）：登录前端，查看音乐到步骤2，搜索音乐到步骤3。（2）：听某个歌手、歌单的音乐，到步骤4。（3）：搜索框上键入音乐、音乐人、歌单风格。如果搜索匹配不成功，提示“系统正在积极调配中…”。如果搜索匹配成功，则到步骤4。（4）：选择播放的音乐，点按播放或者播放栏进行下载。（5）：功能操作完毕。3.2.3收藏夹模块登录前端后，“我的音乐”被用户选择。图3-6收藏夹流程操作步骤如下所示：（1）：登录前端。（2）：返回状态为成功，跳到步骤3。反之，跳到步骤1。（3）：“我的音乐”被用户选择，即可查看收藏夹内信息。（4）：点按播放。（5）：功能操作完毕。3.2.4音乐评价模块登录前端后，选择“歌手”或“歌单”，可以对该音乐人、歌单进行评分、评论。图3-7音乐评价流程操作步骤如下所示：（1）：登录前端。（2）：返回状态为成功，跳到步骤3。反之，跳到步骤1。（3）：选择“歌手”，“歌单”，进入到相应的界面。（4）：想要进入步骤5，前提是判断音乐人评分、歌单页面评分、评论是否有违禁词。存在违禁词，返回步骤3。（5）：评论成功。（6）：功能操作完毕。3.3后台功能模块设计3.3.1系统分析模块后台“系统分析”被管理员选择，自动分析出系统数据。图3-8系统分析流程图操作步骤如下所示：（1）：登录后台。（2）：登录成功就到步骤3。反之，跳到步骤1。（3）：展示后台。（4）：选择“系统分析”。（5）：浏览系统数据。（6）：功能操作完毕。3.3.2用户管理模块后台“用户管理”被管理员选择。图3-9用户管理流程图功能操作步骤如下所示：（1）：登录后台。（2）：返回登录成功，跳到步骤3。反之，跳到步骤1。（3）：展示后台。（4）：选择“用户管理”。（5）：按照特定要求，进行用户管理。（6）：功能操作完毕。3.3.3歌手管理模块后台“歌手管理”被管理员选择，可以对音乐人及所创作音乐进行管理。图3-10歌手管理功能流程图操作步骤如下所示：（1）：登录后台。（2）：返回成功，跳到步骤3。反之，跳到步骤1。（3）：展示后台。（4）：选择“歌手管理”。（5）：按照需求选择，即可对歌手及其所创作音乐进行管理。（6）：功能操作完毕。3.3.4歌单管理模块后台“歌单管理”被管理员选择，对该歌单内音乐、评论进行管理。图3-11歌单管理功能流程图操作步骤如下所示：（1）：登录后台。（2）：返回登录成功，跳到步骤3。反之，跳到步骤1。（3）：展示后台。（4）：选择“歌单管理”。（5）：按照需求，即可对歌单、歌单内的音乐、评论进行管理。（6）：功能操作完毕。3.4数据库概念设计3.4.1数据库逻辑结构设计图3-12数据库实体关系图（1）管理员实体包括管理员ID、用户名等属性。主键：管理员ID图3-13管理员实体图（2）用户实体包括用户ID、账号等属性。主键：用户账号图3-14用户实体图（3）歌曲实体包括歌曲ID、名字等属性。主键：歌曲ID外键：歌手ID图3-15歌曲实体图（4）歌手实体包括歌手ID、名字等属性。主键：歌手ID外键：歌手ID图3-16歌手实体图（5）歌单实体包括歌手ID、名字等属性。主键：歌单ID外键：歌单ID图3-16歌单实体图（6）评论实体包括评论ID、用户ID等属性。主键：评论ID外键：歌手ID、歌单ID图3-16评论实体图3.4.2数据库物理结构设计本系统主要涉及以下表，管理员表(3-1)，评论表(3-2),收藏表(3-3),评分表(3-4),歌单歌曲表(3-5),歌单表(3-6),用户表(3-7),歌曲表(3-8),歌手表(3-9)。（1）管理员表管理员表结构如下所示：表3-1管理员信息表admin代号字段名数据类型大小说明空值描述1idint11主键否ID2usernamevarchar20否用户名3passwordvarchar255否密码（2）评论表评论表结构如下所示：表3-2评论表discuss代号字段名数据类型大小说明空值描述1idint11主键否评论ID2user_idint11否用户ID3typetinyint1否评论类型4vocal_idint11外键是歌曲ID5678song_sheet_idcontentcreate_timeupintvarchardatetimeint11255011外键是否否否歌单ID评论内容评论时间点赞数（3）收藏表收藏表结构如下所示：表3-3收藏信息表enshrine代号字段名数据类型大小说明空值描述1idint11主键否收藏ID23456user_idtypevocal_idvocalist_idcreate_timeinttinyintintintdatetime11111110外键外键否否是是否用户ID收藏类型歌曲ID歌手ID收藏时间（4）评分表评分表结构如下所示：表3-4评分表grade代号字段名数据类型大小说明空值描述1idint11主键否评分ID2song_sheet_idint11外键否歌单ID3user_idint11否用户ID4scoreint11否歌曲分数（5）歌单歌曲表歌单歌曲表结构如下所示：表3-5歌单歌曲表sheet_song代号字段名数据类型大小说明空值描述1idint11主键否歌单歌曲ID23vocal_idvocalist_idintint1111外键外键否否歌曲ID歌手ID（6）歌单表歌单表结构如下所示：表3-6歌手信息表song_sheet代号字段名数据类型大小说明空值描述1idint11主键否歌单ID2titlevarchar255否歌单标题3picvarchar255否图片地址4autographvarchar255否歌单简介5stylevarchar11否歌单风格（7）用户表用户表结构如下所示：表3-7用户表user代号字段名数据类型大小说明空值描述1idint11主键否用户ID2usernamevarchar255否用户账号345678910passwordsexphoneemailbirthautographavatorlocationvarchartinyintcharchardatetimevarcharvarcharvarchar255115300255255255否否否否否否否否用户密码用户性别用户手机电子邮箱用户生日个人简介头像地址用户国籍（8）歌曲表歌曲表结构如下所示：表3-8歌曲表vocal代号字段名数据类型大小说明空值描述1idint11主键否歌曲ID2vocalist_idint11外键否歌手ID3456789usernameautographcreate_timeupdate_timepiclyricurlvarcharvarchardatetimedatetimevarchartextvarchar25525500255255255否否否否否否否歌曲名字专辑名称添加时间修改时间图片地址歌曲歌词歌曲地址（9）歌手表歌手表结构如下所示：表3-9歌手表vocalist代号字段名数据类型大小说明空值描述1idint11主键否歌手ID2usernamevarchar255否歌手姓名34567sexpicbirthlocationautographtinyintvarchardatetimevarchartext255115300否否否否否歌手性别图片地址歌手生日歌手国籍个人简介第4章系统实现4.1前端模块实现4.1.1首页展示实现前端由导航栏、音乐信息和下方播放器模块组成。含有数据信息、收藏夹、查询音乐、歌单、音乐切换、暂停、音量调节、当前播放歌曲名、切换至歌词、收藏、下载、播放列表等功能。首页展示如图4-1所示。图4-1在线音乐网站首页图（1）搜索音乐核心代码returnvocalService.likeSelectVocalName(vocalName);（2）收藏音乐核心代码returnenshrineService.insertEnshrine(enshrine1);（3）下载音乐核心代码letblob=newBlob([content])eleLink.href=URL.createObjectURL(blob)document.body.appendChild(eleLink)（4）切换音乐核心代码this.$mit('setListIndex',this.listIndex–1) this.toplay(this.listOfVocal[this.listIndex].url)4.1.2用户管理模块实现用户管理模块包含输入框、确认按钮、上传框等。图4-2用户管理系统模块图（1）编辑个人信息核心代码returnuserService.updateUser(user);（2）修改头像核心代码returnuserService.updateUser(user);4.1.3音乐信息模块实现音乐信息包含音乐人、歌单的简介等。进行搜索，结果框播放，播放栏下载。图4-3音乐信息系统模块图（1）查看音乐核心代码returnvocalistService.selectAllVocalist();（2）搜索音乐核心代码returnvocalists=vocalistService.selectVocalistName(username);（3）播放音乐核心代码letwlw1803ZwPlayer=this.$refs.wlw1803ZwPlaythis.$mit('setDuration',wlw1803ZwPlayer.duration)wlw1803ZwPlayer.play()（4）下载音乐核心代码 letblob=newBlob([content])eleLink.href=URL.createObjectURL(blob)document.body.appendChild(eleLink)4.1.4收藏夹模块实现收藏夹包含个人资料，收藏音乐。图4-4收藏夹系统模块图（1）个人信息核心代码returnuserService.selectUser(id);（2）查看音乐核心代码 returnenshrineService.selectUserNameById(userId);4.1.5音乐评价模块实现音乐评价包含了评分模块默认为5分，每个用户只可评价一次，第一次为第一个用户评价的分数，之后评价的分数之和除去评价人数，四舍五入得到评分数。评论模块，键入评论内容后，提交评论，系统会自动过滤违禁词，禁止发布。如果通过，在下方看到评论内容。图4-5音乐评价系统模块图（1）评分核心代码returngradeService.insertGrade(grade1);（2）评论核心代码returndiscussService.insertDiscuss(discuss1);4.1.6歌单信息模块实现 歌单信息包含相应的分类进行筛选，按提示进行播放。图4-6查看歌单系统模块图（1）查看歌单核心代码returnSongSheetService.selectSongSheetTitle(title);4.1.7歌手信息模块实现 歌手信息包含各种歌手类型。图4-7歌单信息模块图（1）查看歌手核心代码returnvocalistService.selectVocalistSex(sex);4.2后端模块实现4.2.1首页展示实现 首页包含用户、歌手、歌单管理、系统分析。图4-9系统后台首页图（1）数据展示核心代码returnSongSheetService.selectAllSongSheet();（2）比例分析核心代码this.getByStyle(item.style)4.2.2用户管理模块实现用户管理包含选择编辑按钮对用户数据信息的管理。图4-10用户管理模块图（1）用户数据核心代码 returnuserService.selectAllUser();图4-11添加用户信息界面（1）添加用户核心代码returnuserService.insertUser(user1);图4-12修改用户数据界面（1）修改用户数据核心代码 returnuserService.updateUser(user1); 图4-13删除用户数据界面（1）删除用户数据核心代码 returnuserService.delUser(id);图4-14更新用户数据界面（1）更新用户数据核心代码returnvocalistService.updateVocalist(vocalist);4.2.3歌手管理模块实现歌手管理包含对音乐人数据、所属音乐的管理。图4-15歌曲管理模块图（1）歌曲展示核心代码returnvocalistService.selectAllVocalist();图4-16添加歌手界面（1）添加歌手核心代码returnvocalistService.insertVocalist(vocalist1);图4-17添加歌手界面（1）添加歌手核心代码returnvocalistService.updateVocalist(vocalist1);图4-18更新歌手图片界面（1）更新歌手核心代码returnvocalistService.updateVocalist(vocalist);4.2.4歌单管理模块实现 歌单管理包含对歌单、所属评论的管理。图4-19歌单管理界面（1）歌单展示核心代码 returnSongSheetService.selectAllSongSheet();图4-20新增歌单界面（1）新增歌单核心代码 returnvocalistService.insertVocalist(vocalist1);图4-21修改歌单界面（1）修改歌单核心代码 returnSongSheetService.updateSongSheet(SongSheet1);图4-22歌单评论界面（1）删除评论核心代码 returndiscussService.delDiscuss(id);图4-23歌单歌曲界面（1）新增歌单歌曲核心代码 returnsheetSongService.insertSheetSong(sheetSong1);（2）删除歌单歌曲核心代码 returnsheetSongService.delSheetSongBy2Id(map);4.3模块测试测试功能是否可以正常使用，能不能达到预期，主要对以下模块进行了测试。结果如下：表4-1测试结果表模块名称预期功能是否达预期用户注册键入用户个人信息，自动判断正确，成功状态自动跳转到登录界面。反之，跳回注册页面。是搜索音乐搜索框键入音乐、音乐人，点按“搜索”。若搜索到，提示“恭喜你，找到该歌曲…”，在下方进行播放。反之，提示“暂未录入该歌曲”。是续表4-1我的音乐播放器系统分析用户管理歌手管理歌单管理收藏夹查看收藏音乐播放栏播放、查看列表、歌词、下载自动可以在点按后分析数据管理员对用户操作管理员对歌手操作管理员对歌单操作是是是是是是由表可知，达到了预期效果。总结从开始的配置到整个项目的成型。可以说是起起落落，问题时而不断，成功迎刃而解之后的感觉肯定是酣畅淋漓的，所以在遇到困难的时候，总是迎难而上，永不退缩。就举一两个小小的例子吧。选择搜索按钮后，只能搜索一次的问题，我陷入了苦恼。苦苦思索后，灵光一闪，拍拍小脑袋瓜，于是乎，想到了解决的办法，在后面带一个随机数，即可完美的解决。自己思索和咨询别人，这两个东西都是缺一不可的。所以遇到问题我就从这个上面学到了遇到问题如何解决的办法，对以后做任何事情都要坚持奠定了一定的基础。在做评论区过滤词的时候，一脸懵逼的情况也不知从何下手，咨询了我的导师且查阅后才明白，原来在评论框进行监控，当评论框里出现违禁词的时候，把按钮的显示变灰，并且出现提示词语。这样很快就可以对评论区的文字进行监控，评论发出的时候把违禁词变为“*”。通过这次的问题，让我懂得了对这方面的学习需要大大的加强。不能仅限于老师所教的知识，还要自己利用空闲时间至互联网进行自学加强自身的知识面。这样以后遇到事情才能波澜不惊，游刃有余。同时不只是做评论区的时候会有这样的问题，在做的时候会有各种各样的问题。归根结底都是知识储备的不够，应该要提高自己的知识面。所以在后面出现问题的时候，让自己不慌张冷静下来，与宿友探讨，咨询。这都使得我以后的知识储备大大的提高，意识到了自己的不足，在别人休息的时候，我都是勤勤恳恳的在提升自己，一刻不敢歇息。最终预期的目标还是顺利达成，过程中突出了我前端技术的薄弱，后端技术需要加强，一定坚持在以后的学习中，多多加强相关方面的知识。坚持与肯问，这两个宝贵的财富，肯定是我这辈子最大的幸运。参考文献佟亚超.计算机软件Java编程特点及技术探析[J].技术与市场,2021,28(12):86-87+89.朱国兆.计算机软件JAVA编程特点及其技术研究探讨[J].计算机光盘软件与应用,2014,17(16):59+61.易竞.PHP访问MYSQL数据库的实现[J].保险职业学院学报,2008(03):79-81.陈夫真.基于SSM的某高校教室管理信息系统的设计与实