基于SpringBoot音乐网站后台管理设计
目录
1 概述
1.1 研究背景
1.2 目的和意义
1.3 国外研究现状
1.4 国内研究现状
2 需求分析
2.1 系统的目标
2.2 可行性分析
3 设计与实现
3.1 总体设计
3.2 数据库设计
3.3 各模块设计
4 调试与改进
4.1 测试用例
4.2 功能测试
4.3 改进意见
5 总结与体会
5.1 总结
5.2 体会
参考文献
1 概述
1.1 研究背景
作为Java企业级应用开发的规范--Java EE,从诞生之初就饱受争议。特别是EJB ( Enterprise JavaBeans )作为Java 企业级应用开发的核心，由于其设计的复杂性，使之在J2EE架构中的表现一直不是很好。EJB 大概是J2EE架构中唯一个没有兑现其能够简单开发并提高生产力承诺的组件。正当Java 开发者已经无法忍受EJB的臃肿不堪的时候，Spring 应运而生。Spring 框架打破了传统EJB开发模式中以bean为重心的强耦合、强侵人性的弊端，采用依赖注人和AOP (面向切面编程)等技术，来解耦对象间的依赖关系，无须继承复杂的bean,只需要POJOs ( Plain Old JavaObjects，简单的Java对象)就能快速实现企业级应用的开发。为此，“Spring 之父”Rod Johnson还特意撰写了Expert one on-one J2EE Development without EJB一书，来向EJB宣战，从而业界掀起了以Spring为核心的轻量级应用开发的狂潮。Spring Boot并不是用来替代Spring的解决方案，而是和Spring框架紧密结合，用于提升Spring开发者体验的工具。同时，Spring Boot集成了大量常用的第三方库的配置，SpringBoot应用为这些第三方库提供了几乎可以零配置的开箱即用的能力。这样大部分的Spring Boot应用都只需要非常少量的配置代码，使开发者能够更加专注于业务逻辑，而无须进行诸如框架的整合等这些只有高级开发者或架构师才能胜任的工作。
同样的，使用传统的JavaEE的技术进行编写管理后台的系统放在今天已经显得有些过于繁琐与落后，我们需要一种更加方便、更加快捷的搭建系统的方法，于是我们的音乐网站后台管理系统就这样孕育而生了，借助SpringBoot的高效快捷，我们将管理网站提升到了一个更高的层次。
1.2 目的和意义
通过使用SpringBoot的技术进行对系统的快速搭建，使我们在比较短的开发周期内，能够快速的达到我们预期的成品的效果。使用SpringBoot开发的后台管理系统，为了方便管理员对前台音乐网站的操作，项目需要 提供一个功能完善的后台管理界面。项目需要区分普通用户与管理员用户，并且要有之对应 的客户端。为用户在前端页面的良好体验打下了牢固的基础，为管理员方便与高效的管理服务提供了坚实保障。所以，本项目将注重介绍后台编写与搭建的方法。
1.3 国外研究现状
Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。2013年，Pivotal团队开始研发SpringBoot。2014年4月，发布全新开源的轻量级框架的第一个SpringBoot版本。
1.4 国内研究现状
目前springboot最新的是1.3.2-SNAPSHOT版本。主要有如下功能：
一项简化配置的功能，比如在classpath中发现有spring security的jar包，则自动创建相关的bean等
starters(简化依赖)
这个比较关键，方便spring去集成各类组件，比如redis、mongodb等等。
core(security、aop)
web(web、websocket、ws、vaadin、rest、mobile)
template(freemarker、velocity、groovy templates、thymeleaf)
data(jdbc、jpa、mongodb、redis、gemfire、solr、elasticsearch)
database(h2、hsqldb、mysql、postgresql)
social(facebook、linkedin、twitter)
现阶段SpringBoot已经成为主流技术，各大互联网厂商也在跟进换代并且使用SpringBoot搭建自己的项目。
2 需求分析
2.1 系统的目标
2.1 系统的目标
本项目的需求是开发一个音乐播放网站，音乐网站需求要素较多，要有精美的 UI 界面、 丰富的音乐控制功能、便捷的用户操作。为了方便管理员对前台音乐网站的操作，项目需要 提供一个功能完善的后台管理界面。项目需要区分普通用户与管理员用户，并且要有之对应 的客户端。所以，项目将分别实现前台与后台页面。
后台实现的目标：
1、管理员登录
2、用户、歌曲、歌手、歌单统计
3、用户、歌手、歌单、歌曲信息管理
2.2 可行性分析
1．经济可行性：经济可行性-估计开发费用以及最终从开发成功的系统所获得的收入或和益，衡量比较支出的费用和收到利益。估算设计成本以及预测相应的上市后，可赚得的利息。发现经济可行性可行，主要呈现一个盈利的状态。
2．技术可行性：分析功能，性能以及限制条件，能否是个技术上可实现的系统，经过深思熟虑后，选择了SpringBoot的技术作为开发的主要核心技术，以Java为基本的编程语言，开发操作系统环境为Windows11操作系统，使用IDE环境进行开发，并辅之以数据库等技术共同打造出强劲高效的后台管理系统。
3．社会可行性：当前市面上的音乐播放软件比较少，国内比较流行的音乐播放软件为QQ音乐、网易云音乐、酷狗音乐等，从某些方面来说，这些音乐软件都需要下载客户端进行稳定的使用，对于随听的用户来说是存在着一些不方便的。本项目基于轻量化，不需要繁琐的操作既可以享受听觉带来的冲击。所以，项目上线后应该会得到不少用户的青睐。
3 设计与实现
3.1 总体设计
图 3.1.1系统文件夹构图
图 3.1.2系统文件架构图
3.2 数据库设计
图 3.2.1数据库类图
图3.2.2数据表与实体类
3.3 各模块设计
后台页面（管理员页面）：
图3.3后台管理功能模块
4 调试与改进
4.1 测试用例
| 序号 | 测试内容 | 预期结果 | 实际结果 | 备注 |
| 1 | 管理员登录 | 根据对应管理员用户名密码登录成功 | 成功 | |
| 2 | 数据显示 | 用户、歌曲、歌单、歌手总数显示正确 | 显示正确 | |
| 3 | 比例、分布 | 用户、歌手性别比例显示正确，歌曲类型、歌手国籍分布正确 | 显示正确 | |
| 4 | 用户管理 | 对用户的增删改查成功，更新头像成功，对其收藏操作成功 | 更改生日时发现可以用错误格式修改，更改代码后成功 | |
| 5 | 歌手管理 | 对歌手的增删改查成功，更新歌手头像成功 | 成功 | |
| 6 | 歌手的歌曲 | 对歌手的歌曲进行增删改查成功，跟新歌曲与更新图片成功 | 成功 | |
| 7 | 歌单管理 | 对歌单的增删改查成功，更新歌单头像成功 | 成功 | |
| 8 | 歌单的歌曲 | 对歌单的歌曲增加和删除成功 | 成功 | |
| 9 | 全屏与缩进 | 页面全屏成功，左侧导航栏缩进成功 | 成功 |
表4.1测试用例
4.2 功能测试
界面调试
界面1登录功能测试
图 4.2.1登录界面
测试登录功能，输入正确的账号密码点击登录按钮登录成功，否则提示帐号或密码错误。
界面2主页功能测试
图 4.2.2主页面
图 4.2.3主页面
在本页面中，为后台界面的主页面，该页面正确显示相关数据，点击可以查看详细的男女比例、人数、分布地区、统计总数等数据。左侧的导航栏功能正常，单击相应的按钮可以到达相应的模块管理的页面。
界面3用户管理功能测试
图 4.2.4用户管理界面
在本页面中，我们单击各个按钮可以实现对用户信息的增删改查，单击收藏按钮，可以查看用户的收藏的歌单。
界面3歌手管理功能测试
图4.2.5歌手管理界面
点击歌手管理，可查看所有歌手信息。可对歌手进行增删改操作。点击歌曲管理，可以查看当前歌手的歌曲，点击歌曲上的播放按钮可以在线播放，也可对歌曲进行增删改操作。
图4.2.6歌单管理界面
点击歌单管理，可查看所有歌单信息。可对歌单进行增删改操作。点击歌区管理，可以查看当前歌单的歌曲，可对歌曲进行增删改操作。点击评论按钮，可查看当前歌单评论，也可查看评论用户，对其进行删除操作。
功能调试
- 歌词解析功能测试
描述：
数据库存储LRC歌词，由于在显示页面需要去掉歌词前的中括号及时间，并且在歌词页面要根据时间轮播显示歌词。
解析前样式：
[00:00.00] 作曲 : G.E.M.
[00:00.169] 作词 : G.E.M.
[00:00.509]阳光下的泡沫 是彩色的 就像被骗的我 是幸福的
解析后样式：
作曲 : G.E.M.
作词 : G.E.M.
阳光下的泡沫 是彩色的 就像被骗的我 是幸福的
截图：
图4.2.7歌词解析界面
代码：
//解析歌词
parseLyric(text){
let lines = text.split("n"); //将歌词按行分解成数组
let pattern = /[d{2}:d{2}.(d{3}|d{2})]/g; //时间格式的正则表达式
let result = []; //返回值
//对于歌词格式不对的直接返回
if(!(/[.+]/.test(text))){
return [[0,text]]
}
//去掉前面格式不正确的行
while(!pattern.test(lines[0])){
lines = lines.slice(1);
}
//遍历每一行，形成一个每行带着俩元素的数组，第一个元素是以秒为计算单位的时间，第二个元素是歌词
for(let item of lines){
let time = item.match(pattern); //存前面的时间段
let value = item.replace(pattern,'');//存后面的歌词
for(let item1 of time){
let t = item1.slice(1,-1).split(":"); //取出时间，换算成数组
if(value!=''){
result.push([parseInt(t[0],10)*60 + parseFloat(t[1]),value]);
}
}
}
//按照第一个元素--时间--排序
result.sort(function(a,b){
return a[0] - b[0];
});
return result;
},
- 歌曲上传校验
描述：限制上传歌曲为MP3格式，若为其他格式，则取消上传并给出提示
截图：
图 4.2.8错误提示
代码：
//上传歌曲之前的校验
beforeSongUpload(file){
var testMsg = file.name.substring(file.name.lastIndexOf('.') + 1);
if(testMsg!='mp3'){
this.$message({
message: '上传文件只能是mp3格式',
type: 'error'
});
return false;
}
return true;
},
4.3 改进意见
- 系统存在的不足
目前系统的开发尚处于早期阶段，基本功能与主要功能已经可以使用，但是仍然存在着不少缺陷，例如：上传普通文本格式的歌词无法被系统解析，歌词的时间滚动与歌曲的播放存在时差，系统无法同时让超过100位用户同时登录使用，无法上传一些带有特殊字符的歌曲或上传后无法播放等。同时也存在着一些与其他系统软件等共性问题：
(1)软件未达到需求规格说明书中标明的功能
(2) 软件出现了需求规格说明书指明不会出现错误的地方
(3) 软件的功能超出了需求规格说明书指明的范围
(4) 软件未达到需求规格说明书虽未指明但应该达到的目标
(5)软件测试人员认为软件难以理解，不易使用，运行速度慢，或者最终用户体验不好。
- 系统的改进思路
虽然当前系统存在着大量的不足，但是我们会不断地努力跟进，对于系统方面，我们有着以下的改进思路：
项目本身架构上：前后端分离、业务系统与管理系统横向拆分、服务接口根据业务流向进行横向拆分、服务接口根据功能单元进行纵向分割；
数据交互上：采用多级缓存、消息队列机制；
数据存储上：根据业务线和功能模块横向分库、在具体表上，根据实际业务采用横向拆表纵向分表存储
系统横向拆分，主要是只，根据不同的业务角色，独立搭建对应的UI系统，避免一个平台大单点站点，只要一个模块出问题，导致整个系统平台都不能使用。系统拆分后，不同的系统独立部署，互不影响。这样适当系统职责功能单一，便于后期维护和管理，同时能够提高平台的整体可用性。
接口横向拆分：横向拆分，主要是指根据不同的功能模块将取拆分为独立的服务。一般拆分标准，是按照大的功能模块点来拆分。比如：商品、订单、账单、用户、公共数据。
这样拆分的好处是：单点项目功能职责单一便于后期维护管理；不同服务独立部署，互不影响，提高系统的可用性；资源部署，可根据服务使用频率动态增加单点的硬件资源，提高资源的利用率。
接口纵向分割：这个就是软件上的一个分层思想，其作用主要表现在：
可维护性、灵活性，比如当需求发生变化时，只需要修改软件的一部分，不会影响到其他部分的代码，降低了层与层之间的耦合度；可扩展性，可以很方便的在现有系统中新功能；可重用性，可以减少程序代码冗余，每一层都可以多种用途，满足于多种需求；可管理性，程序分层后可以降低系统管理的难易程序，将程序分为多层后，可以将工作分解给不同的开发小组，从而便于管理，系统越复杂、规模越大，分的层数就需越多。
5 总结与体会
5.1 总结
本项目使用前后端分离架构开发，主要用到的技术有：SpringBoot、MyBatis、MySQL、Vue、ElementUI。项目使用不同端口号将客户端分为前台音乐界面（类似于网易云音乐）和后台管理界面。
在项目过程中：实现addCorsMappings方法解决跨域问题； 将SpringBoot2.6版本更新后处理映射匹配策略由PathPatternParser改为原来的AntPathMatcher，解决访问中文及特殊字符问题；修改multipart参数的maxFileSize属性值来更改默认文件上传大小；在文件上传方法获取文件名处，添System.currentTimeMillis方法为当前文件名添加时间戳，避免文件名冲突。
5.2 体会
对于项目的创作历程，我们还是颇有感悟的。从项目创建，到项目编写，再到项目测试与完成，对我们来说反而是一个由难到易的过程。作为一名主攻后端的学者并且项目是我独立完成，在项目初期，遇到前端问题有些手足无措。
记得刚开始安装npm服务器时，由于node和vue版本及环境问题， 安装不成功。参考了网络上的很多文献依旧没能解决，最后问了已经工作的朋友才走过了这一关。编写代码阶段，遇到bug也是旧去新来。最令人头疼的当属版本问题，代码看的倒背如流，错误还未找出。项目过程中那些看似不可能解决的bug让我们有过放弃的想法，幸运的是我们坚持了下来。虽然被bug折磨过，但它也让我学到了许多。为了让自己牢记，项目过程中写了多篇技术博客来分享项目中的技术难题。
对于我们来说，此次项目不仅让巩固了我们对所学知识运用，并且让我们学到了很多新东西，增加了我们的专业知识，还提升我们对问题修复的能力。
参考文献
无
