基于SpringBoot+ Vue 音乐平台

SpringBoot+ Vue 音乐平台

一、前言
二、开发环境
三、后端项目构建
1、创建数据库表
2、创建项目
3、配置文件
1）application.properties
2）generatorConfig.xml
3）pom.xml
4、测试（以新建一个用户为例）
5、开发接口（以返回所有用户信息为例）
1）实体类（domain 目录下）
2）Mapper 层 / DAO 层（dao、mapper 目录下）
3）Service 层（service 目录下）
4）Controller 层（controller 目录下）
5）实战（写一个返回所有用户信息的接口）
6）总结
6、最终项目结构
四、客户端项目构建
1、创建项目
2、开发思路
3、最终项目结构
五、管理端项目构建
1、最终项目结构
六、平台功能设计与实现
七、源码

一、前言

本文旨在对项目的开发设计提供一个思路。了解了具体实现的来龙去脉，上手自己做或者做其他项目就容易得多了。总的来说要知道数据是怎么从数据库一步步跑到前端页面的，当知道了整个的流程再去处理中间的细节，接下来我们就开始吧。

二、开发环境

操作系统：win10,win11，Mac

JDK： jdk-8u141
JDK下载官网

mysql：mysql-8.0.13-1-macos10.13-x86_64
mysql环境配置（Win10）

node：node：v14.17.3

IDE：IntelliJ IDEA 2022 / VSCode / HBuilder X

三、后端项目构建

1、创建数据库表

2、创建项目

打开 idea，新建一个项目，在 new 一个新项目的时候，选择 Spring Initializr，在选择项目依赖的时候勾选 web下的 Spring Web Starter 和 SQL下的 MySQL Driver 和 MyBatis Framework ，然后一直继续后会得到如下结构（总体分三层）。

3、配置文件

1）application.properties
配置 application.properties 文件，用于连接数据库（代码见项目源码）。

2）generatorConfig.xml
利用 MyBatis Generator 自动生成代码（实体类，Mapper接口和Mapper.xml文件），需要指定 mysql-connector-java （ src/main/resources 目录下）和生成文件的路径。在 src/main/resources 目录下创建 generatorConfig.xml 文件并配置（代码见项目源码）。

3）pom.xml
pom.xml 文件负责配置项目相关的依赖和插件，包括上面的 MyBatis Generator（项目plugins 标签中注视掉的代码是对 Mybatis-generator 插件的配置），在创建项目时，idea 已经帮我们引入了一些依赖，下面我们需要在 dependencies 标签中引入项目需要的一些依赖，配置的代码可以直接看代码，这里就不往出写了，下面对主要依赖进行下描述：

package	说明
mybatis-spring-boot-starter	MyBatis核心for Spring Boot
mysql-connector-java	java 与 mysql 连接的 jar 包驱动程序
fastjson	实现 json 对象与 JavaBean 对象的转换

在 plugins 标签中对 Mybatis-generator 进行配置，用于自动生成代码。
至此，项目的配置就弄完了，在命令行执行 ./mvnw mybatis-generator:generate 自动生成代码，得到的项目结构如下所示。此时会看到多生成了 dao、domain、mapper 目录及下面的文件。生成项目后，需要将上面 pom.xml 文件中 Mybatis-generator 插件的配置注视调，因为这个文件就是初始时候自动生成代码用的，如果不注视每次运行都会再生成一次，即覆盖之前的代码。

4、测试（以新建一个用户为例）

创建好项目之后先测试一下，首先在 src/main/java/com/example/demo 目录下创建 service 包，service 包下创建 ConsumerService 接口和 impl包，impl包下创建 ConsumerServiceImpl 类，具体创建这个干嘛下面写接口时候再介绍。

（1）ConsumerService 接口的代码如下

ConsumerServiceImpl 类的代码如下

（2）在 src/main/java/com/example/demo 下的 ConsumerMapper 接口中添加如下代码。

在 src/main/resources/mapper 下的 ConsumerMapper.xml 文件中将 insertSelective 改成 addUser

（3）打开 SpringBoot 的启动类，加上 @MapperScan 注解，指向 dao 层接口所在的包路径。@MapperScan(“com.example.demo.dao”)

（4）然后在 src/test/java/com/example/demo 下的测试文件中写测试代码，如下，然后点如下所示运行，没有提示错误，且数据库中成功存入数据，说明项目构建成功，接下来就可以开始写接口了。

5、开发接口（以返回所有用户信息为例）

在写接口之前，先对项目层次做一下介绍。项目层次我将主要根据 domain、 DAO、Service、Controller 这几层主要实现的功能和它们之间的联系进行介绍。

1）实体类（domain 目录下）

定义数据库表所对应的实体类。

2）Mapper 层 / DAO 层（dao、mapper 目录下）

数据操作层：向数据库发送 SQL 语句，完成数据库操作。

分为 Mapper 接口 和 Mapper 接口映射文件。 Mapper 接口在 dao 目录下，定义操作数据库的函数（函数不能直接去进行 CURD）， Mapper 接口映射文件在 mapper 目录下，完成对数据库的访问。

3）Service 层（service 目录下）

服务层：完成业务逻辑处理。调用 Mapper 层操作数据库。

分为 Service 接口 + Service 实现，用面向接口的编程思想，方便后续功能的解藕及扩展。

4）Controller 层（controller 目录下）

控制层：对请求和响应进行控制，调用 Service 层进行业务逻辑处理，最后将处理好的数据返回给前端。

5）实战（写一个返回所有用户信息的接口）

假如前端访问 http://localhost:8088/allUser 就要拿到所有用户的信息，那么按照上面的层次我们可以这么写。

（1）访问的接口由 Controller 层来处理，所以这里这样定义，要返回所有用户信息，把它当一个命令，交给 Service 层去做。

（2）到了 Service 层，Service 层的 ConsumerService 接口中先定义下面方法

然后在 ConsumerServiceImpl 类中这样去实现它。

（3）Service 层会让 dao 层的 ConsumerMapper 接口调 allUser 方法去返回数据，

而 ConsumerMapper 接口操作数据库又要依赖 Mapper.xml 文件。

（4）这样，一个返回所有用户信息的接口就写完了，打开 Terminal 输入如下命令跑一下项目。如下所示

./mvnw spring-boot:run

6）总结

当前端要访问数据的时候后端就提供相应接口，接口的编写是通过 Controller 层监听请求， 数据的处理交给 Service 层，而 Service 层再通过 Mapper 层操作数据库，操作完成后数据再一层层往上走，最后返回给前端。

6、最终项目结构

.
├── avatorImages // 用户头像
├── img
│ ├── singerPic // 歌手图片
│ ├── songListPic // 歌单图片
│ └── songPic // 歌曲图片
├── song // 存放歌曲
├── src
│ ├── main
│ │ ├── java
│ │ │ └── com.example.yin
│ │ │ ├── config // 配置（跨域）
│ │ │ ├── controller // 控制层，接收请求返回响应
│ │ │ ├── dao // 数据操作层
│ │ │ ├── domain // 实体类
│ │ │ ├── constant
│ │ │ ├── service
│ │ │ │ └── impl // Service 层的接口
│ │ │ └── HwMusicApplicationTests.java // 项目入口
│ │ └── resources
│ │ ├── mapper // mapper.xml文件，操作数据库
│ │ ├── static // 存放静态资源
│ │ ├── templates
│ │ ├── application.properties // 连接数据库
│ │ └── generatorConfig.xml // MyBatis Generator 自动生成代码
│ └── test
│ └── java
│ └── com.example.demo // 测试用的
├── pom.xml // 添加相关依赖和插件
└── target

四、客户端项目构建

1、创建项目

这里项目的创建比后端要简单的多，直接用官方提供的脚手架，运行如下命令先全局安装 vue，然后进行安装

npm install -g @vue/cli

进要创建项目的地方 

vue create music-client

vue 在帮我们创建项目的时候依赖包也会装好，装好后进入项目，执行如下命令项目就跑起来了。

npm run serve

但是假如你是新手，不建议上来就用脚手架，先看一下 官网 了解一下组件、路由等等。

2、开发思路

因为代码都放在一起对后期维护和修改都不方便，所以要根据功能把他们拆分到不同目录。

在 pages 目录下放一些视图，里面的每一个组件主要是对整个试图的控制，具体里面的实现可以根据具体情况自己封装组件，或者直接使用第三方组件，components 目录下放置我们封装好的组件，利用 vue-router 把试图都组织起来，加载到 App.vue 文件中，最后渲染到页面中。

最开始构建页面可以写死，当基本样子搭起来之后就可以去向后端去请求数据，请求数据用到的是axios插件，获取到数据在控制台查看请求的数据，确保数据保存到正确的变量中去（这里如果遇到跨域的问题可以在后端用 CORS 解决）。

随着组件的增多，组件之间的传值就是问题，不可能一些数据一直好几个组件里一直传，我们需要 vuex 插件来对数据进行管理（这里通过 sessionStorage 解决 vuex 刷新数据丢失问题）。

不同的组件有时候会用到相同的方法，当要修改方法时就要改好多地方，所以把它们单独拿出来放到 mixins 文件夹下面，当用到这些方法的时候在对应组件中引入即可。

vue 支持很多的第三方组件，能给我们项目带来很好的交互和显示效果，具体在需要的时候引入就行了，当然了，一些样式和图片也可以放到 assets 文件夹下管理。

这个项目的话组件基本是自己实现的，第三方用的少，对练习组件的封装还是很有帮助的。

3、最终项目结构

项目结构详细：

├── build // webpack相关配置文件
├── config // vue基本配置文件
├── node_modules // 包
├── index.html // 入口页面
├── package.json // 管理包的依赖
├── src // 项目源码目录
│   ├── assets  // icon，图片、css 等
│   ├── api  // 封装请求的 api
│   ├── mixins // 公共方法
│   ├── enums // 枚举
│   ├── utils // 工具方法
│   ├── router // 路由
│   ├── store // 管理数据
│   ├── components
│   │   ├── Comment.vue // 评论
│   │   ├── PlayList.vue // 展示歌单歌手区
│   │   ├── SongList.vue // 展示歌单歌手包含的歌曲
│   │   └── layouts
│   │       ├── YinAudio.vue // 接收音乐并播放的位置
│   │       ├── YinCurrentPlay.vue // 播放列表
│   │       ├── YinFooter.vue // 页脚
│   │       ├── YinHeader.vue // 页头
│   │       ├── YinLoginLogo.vue // 登录界面的logo
│   │       ├── YinPlayBar.vue // 页面底部的播放控制区
│   │       └── YinScrollTop.vue // 回到顶部
│   ├── views // 组件
│   │   ├── error
│   │   │   └── 404.vue // 404
│   │   ├── Home.vue // 首页
│   │   ├── YinContainer.vue
│   │   ├── personal
│   │   │   ├── Personal.vue // 个人中心
│   │   │   ├── PersonalData.vue // 修改信息
│   │   │   └── Upload.vue // 修改头像
│   │   ├── setting
│   │   │   └── Setting.vue // 设置
│   │   ├── SignIn.vue // 登录区
│   │   ├── SignUp.vue // 注册区
│   │   ├── Lyric.vue // 歌词显示区
│   │   ├── search
│   │   │   ├── Search.vue // 搜索区
│   │   │   ├── SearchSong.vue // 按歌手搜索
│   │   │   └── SearchSongList.vue // 按歌单搜索
│   │   ├── singer
│   │   │   ├── Singer.vue // 歌手区
│   │   │   └── SingerDetail.vue // 歌手详情
│   │   └── song-sheet
│   │       ├── SongSheet.vue // 歌单区
│   │       └── SongSheetDetail.vue // 歌单详情
│   ├── main.js // 入口js文件
│   └── App.vue // 根组件
├── static // 存放静态资源 
├── test // 测试文件目录
├── .babelrc // bable 编译配置
└── .gitignore // 提交忽略的文件配置

五、管理端项目构建

功能设计
平台设计实现的主要功能有：音乐播放；用户登录注册；用户信息编辑、头像修改；歌曲、歌单搜索；歌单打分；歌单、歌曲评论；歌词同步显示；音乐收藏、下载、拖动控制、音量控制；后台对用户、歌曲、歌手、歌单信息的管理。
(1)用户登录注册：为新用户提供注册登录的功能方便用户对于此平台的访问和更好的用户体验。
(2)歌单、歌曲评论：用户在登录状态下点击歌单或者点击歌手时可以发表评价，对其他发表的评价进行回复交流和点赞。
(3)用户发表评论和回复用户评论：当用户发表的评价被别人回复时在自己的通知界面可以看到回复的详情信息也可以进行回复。当然此功能必须在登录状态下才能实现，在登陆状态下可以查看自己的消息通知。
(4)管理员后台页面：则就是对用户的基本信息、歌曲的信息、歌手详细信息、歌单的信息进行分类和管理。
管理端项目结构：

├── build
├── config
├── node_modules
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── main.js
│   ├── api
│   ├── assets
│   ├── mixins
│   ├── enums
│   ├── components
│   │   ├── dialog
│   │   │   └── YinDelDialog.vue
│   │   └── layouts
│   │       ├── YinAside.vue
│   │       ├── YinAudio.vue
│   │       └── YinHeader.vue
│   ├── views
│   │   ├── CollectPage.vue
│   │   ├── CommentPage.vue
│   │   ├── ConsumerPage.vue
│   │   ├── Home.vue
│   │   ├── InfoPage.vue
│   │   ├── ListSongPage.vue
│   │   ├── Login.vue
│   │   ├── SingerPage.vue
│   │   ├── SongListPage.vue
│   │   └── SongPage.vue
│   ├── router
│   ├── store
│   └── utils
├── static
└── test

六.平台功能设计与实现

平台首页
1、功能描述
当用户只想简单的播放音乐，则无需去注册新用户，当用户想要更多功能，比如收藏音乐等功能时候，会提醒访客去进行登录提醒。则平台对新用户提供了注册的功能。然后点击登录则跳转到登录页面，登录操作成功会自动跳转到平台首页。

2、操作流程
操作步骤如下：点击登录页面在登录页面输入用户名和用户密码，然后获取页面信息与数据库信息对比，正常则登录成功，错误则提醒用户名或者用户密码报错。登录成功后就会跳转到音乐平台首页。流程图如下：

3、程序实现
操作步骤如下：从页面中读取用户的相关信息，并将用户的信息存储在MySQL数据库的consumer表中，登录成功后读取consumer表中存放的用户的昵称以及头像并做以展示，登录失败时会提醒用户重新登录。
实现代码如下所示：
@RequestMapping(value=“/user/login/status”,method=RequestMethod.POST)
public Object loginStatus(HttpServletRequest req, HttpSession session){
JSONObject jsonObject = new JSONObject();
String username = req.getParameter(“username”);
String password = req.getParameter(“password”);
boolean res = consumerService.veritypasswd(username, password);
if (res){
jsonObject.put(“code”, 1);
jsonObject.put(“msg”, “登录成功”);
jsonObject.put(“userMsg”, consumerService.loginStatus(username));
session.setAttribute(“username”, username);
return jsonObject;
}else {
jsonObject.put(“code”, 0);
jsonObject.put(“msg”, “用户名或密码错误”);
return jsonObject;
}
}
用户发布评论、点赞评论
1、功能描述
该功能主要包括两个操作分别为：用户点击歌单或者歌手页面则进入详细页面即可发表评论，用户即可发表评价，后台则将发表评价用户的信息以及评价内容进行数据存储。
用户在登录状态下可以对其他用户发表评价进行浏览，并根据自己对评价内容的感兴趣程度进行回复与点赞等操作。

2、功能流程
用户浏览平台歌手以及歌单中的歌曲，点击歌单和歌手会展示歌单与歌手里的歌曲内容，然后可以看到歌曲下方评价内容，当自己发表评论的同时，输入评价内容点击发表，成功平台右上角会提醒评价成功，失败的话保留已经输入的内容提醒评价失败，在没有登录的情况下会提醒用户登录。
流程图如下：

2、程序实现实现代码如下：
点赞评价：
@RequestMapping(value = “/comment/like”, method = RequestMethod.POST)
public Object commentOfLike(HttpServletRequest req){
JSONObject jsonObject = new JSONObject();
String id = req.getParameter(“id”).trim();
String up = req.getParameter(“up”).trim();
Comment comment = new Comment();
comment.setId(Integer.parseInt(id));
comment.setUp(Integer.parseInt(up));
boolean res = commentService.updateCommentMsg(comment);
if (res){
jsonObject.put(“code”, 1);
jsonObject.put(“msg”, “点赞成功”);
return jsonObject;
}else {
jsonObject.put(“code”, 0);
jsonObject.put(“msg”, “点赞失败”);
return jsonObject;
}

七、最后（源码）

源码地址：
有各种源码系统和不同技术学习可以在：
咸鱼搜索（码上秃头）
taobao店铺名同上！
！！！！！！！！!
感谢对大家对项目存在在问题的反馈以及项目的优化！感兴趣的欢迎交流！

希望本文对大家有所启发，如有问题欢迎交流。