在做完第一个博客系统项目以后，接着做下一个项目：音乐播放网站项目，此项目应用的技术栈和第一个项目是差不多的，即算是学完SSM等知识以后的两个入门级Java开发项目吧。

此项目包含的核心功能有：

一、登录、注册、退出功能。
二、添加音乐、查看音乐列表。
三、收藏音乐、查看收藏的音乐。
四、删除音乐、批量删除音乐。
五、在为了保证用户账户安全情况下，进行用户密码登陆后MD5加盐处理。
六、以及统一数据的返回、统一异常处理、拦截器拦截接口、网页、文件包。

此项目由个人独立开发，包括前端、后端、数据库表的设计以及各种功能的设计。
 运用技术栈：
 前端：HTML、CSS、JavaScript、JQuery、Ajax
 后端：Java、SpringBoot、MyBatis
 数据库：MySQL
 部署服务器：Linux
 部署服务器所用工具：Xshell、Xftp  后端接口设计测试工具：Postman
访问网站：http://110.41.154.247:8888/login.html
开源代码：

下面是完成界面展示
登录界面：

注册界面：

音乐播放列表页（首页）

音乐播放：

收藏页面：

上传音乐页面：

接下来介绍后端设计：

在设计后端架构上，主要分了这几层：

tools层：主要为了放一些拦截器类、统一数据返回类、统一异常处理、Session常量设置、密码MD5加盐处理。
model层：主要放用户类：userinfo、文章类：articleinfo
controller层：主要放相关前端访问的接口方法，包括UserController、MusicController、LoveMusicControllr
mapper层：主要放用来连接MySQL的一些方法，与Mapper.xml与之对应
 

逐个介绍每个层的业务代码：
tools层：

1、拦截器设置：

先自定义需要拦截的接口以及文件类（需要加上注解Configuration）：

随后将自定义拦截器类加入统一拦截器类，需要设置若拦截成功，则设置http状态码为401并返回：

2. 统一数据返回，自定义Result类，将失败、成功的结果进行封装统一返回：


随后加入统一数据返回类进行返回：

3.设置密码MD5 以及加盐处理，里面设置两个方法，第一个方法是将密码进行UUID加盐、然后调用DigestUtils类进行MD5加密且去除“ - ”字符后再拼接盐值得到一个64位字符串 ，随后设置decrypt进行密码校验，从数据库拿到finalpassword密码，与用户登陆时输入的密码进行比对，具体算法为：将finalpassword取前32位（MD5处理会生成32位字符串，UUID加盐也会生成32位字符串），然后结合用户传入的password进行拼接然后进行MD5处理，比对处理结果和finalword是否一致，如果一致则密码正确，否则密码错误！

model层：

这层主要是和数据库对接的用户数据表，一张是user表、一张是music表，而收藏音乐的表不需要写，因为返回的变量不会是收藏音乐的整个表，因此不需要。

user：

music：

controller层：

该层有三个类：分别是UserController、MusicController、LoveMusicController
UserController主要处理用户注册、登录、退出的功能：

登录功能：

注册功能：

退出功能：

MusicController主要是

插入音乐、播放音乐、查找音乐、删除音乐、批量删除音乐功能（代码太长，实现逻辑都是一样的并不难，相关代码可访问上面开源代码网站）（播放音乐运用到了一个开源播放器网站，通过将将访问后端服务器/music/get接口的url地址保存到数据库，后续返回这个url给前端传入开源网站即让此网站访问我的音乐播放网站的服务器接口然后就可以播放了）。
LoveMusicController主要是：

收藏音乐、查找音乐、删除收藏音乐功能（代码太长，实现逻辑都是一样的并不难，相关代码可访问上面开源代码网站）。

前端与后端交互过程（核心）：

前端主要的作用是将页面渲染出来，得到一个个提供给用户看的界面，主要使用JavaScript来进行操作，利用JQuery的Ajax进行post/get 的http请求 发送给后端，后端通过controller层的接口接受前端传入的相关数据，然后处理请求，再将数据传送给Service层，然后给mapper层，通过Mybatis与数据库进行连接，通过Sql语句将数据传送给数据库，最后数据库可以将结果以相同的方式从数据库到mapper再到service再到controller 再通过统一数据返回传送给前端页面，前端页面通过success / error 的function进行接收最后进行渲染到前端。
下图就是一个前端JS里面的ajax请求的例子，前端通过发送post的http请求，通过url路径为“/user/login” 给后端接口 传输数据为data，随后后端处理完以后通过success进行结果的接收，返回给前端的result结果，最后渲染。

部署上线：
这里需要修改项目几个东西：

1、需要修改连接数据库的jdbc语句，将127.0.01改成服务器的ip地址
2、需要将连接数据库的用户名和密码改成服务器上的，也就是云端服务器linux里面数据库的用户名和密码
3、需要将音乐播放文件（.MP3文件）保存路径修改成服务器里面的目录，将用户上传的音乐文件保存在服务器 例如 :  D:xxx/xx改成 linux里面的目录：/root/xxx 

部署需要用到云服务器，这里作者在华为云租了一个云端服务器，然后通过开放8888、3306端口，然后通过Xshell 、XFTP 进行部署，这里将maven打包好的jar后缀java文件通过xftp拖拽到远程云端服务器的目录下。
在这之前，需要在linux服务器里面先下载相关环境：JDK1.8、MariaDB，随后将sql文件通过Xftp传到linux目录下，通过source / root / xxx.sql进行执行，得到两个数据表，随后通过nohup java -jar xxx.jar &将项目部署在后台执行，遂可以通过网址访问制作好的项目