Spring Boot + MyBatis +MySQL + VUE ，能做出多棒的音乐网站？
小编在做码农之前也曾做过一个音乐梦，所以现在虽然是码农了，一直对跟音乐有关的事物都特别关注。
非常凑巧的是，小编今天发现了GitHub上一个制作音乐网站的项目，赶紧来和大家一起分享学习下。
这个网站的前端框架都是使用VUE来实现的，服务端使用Spring Boot + MyBatis，数据库则是MySQL
小编再带大家一起来看下整体项目的实现思路：
后端项目构建
1、创建数据库及需要的表
2、创建项目
打开 idea，新建一个项目，在 new 一个新项目的时候，选择 Spring Initializr，在选择项目依赖的时候勾选 web下的 Spring Web Starter 和 SQL下的 MySQL Driver 和 MyBatis Framework ，然后一直继续后会得到如下结构（总体分三层）。
3、配置文件
application.properties
配置 application.properties 文件，用于连接数据库（代码见项目源码）。
generatorConfig.xml
利用MyBatis Generator 自动生成代码（实体类，Mapper接口和Mapper.xml文件），需要指定 mysql-connector-java （ src/main/resources 目录下）和生成文件的路径。在 src/main/resources 目录下创建 generatorConfig.xml 文件并配置（代码见项目源码）。
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包驱动程序 |
在 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:8888/allUser 就要拿到所有用户的信息，那么按照上面的层次我们可以这么写。
（1）访问的接口由 Controller 层来处理，所以这里这样定义，要返回所有用户信息，把它当一个命令，交给 Service 层去做。
（2）到了 Service 层，Service 层的 ConsumerService 接口中先定义下面方法
然后在 ConsumerServiceImpl 类中这样去实现它。
（3）Service 层会让 dao 层的 ConsumerMapper 接口调 allUser 方法去返回数据，
而 ConsumerMapper 接口操作数据库又要依赖 Mapper.xml 文件。
（4）这样，一个返回所有用户信息的接口就写完了，打开 Terminal 输入如下命令跑一下项目。如下所示
./mvnw spring-boot:run
在浏览器中输入 http://localhost:8888/allUser 查看结果。
知道一个接口怎么写，其他接口也类似，需要注意的地方有两点，第一个是解决跨域问题（可以查看代码 config 文件夹下面设置），第二个问题是关于静态资源的处理（这个就是最开始跑这个项目时候修改图片、音乐路径做的事情）。
6）最后再总结一下
当前端要访问数据的时候后端就提供相应接口，接口的编写是通过 Controller 层监听请求， 数据的处理交给 Service 层，而 Service 层再通过 Mapper 层操作数据库，操作完成后数据再一层层往上走，最后返回给前端。
6、最终项目结构
.
├── avatorImages // 用户头像
├── img
│ ├── singerPic // 歌手图片
│ ├── songListPic // 歌单图片
│ └── songPic // 歌曲图片
├── song // 存放歌曲
├── src
│ ├── main
│ │ ├── java
│ │ │ └── com.example.demo
│ │ │ ├── config // 配置（跨域）
│ │ │ ├── controller // 控制层，接收请求返回响应
│ │ │ ├── dao // 数据操作层
│ │ │ ├── domain // 实体类
│ │ │ ├── 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 init webpack music-client
进入项目，执行如下命令安装项目依赖，
npm install
然后直接如下命令项目就跑起来了。
npm run dev
但是假如你是新手，不建议上来就用脚手架，先看一下 官网 了解一下组件、路由等等。
2、开发思路
创建一个vue项目后，在 views 文件夹中写一个页面的组件，因为代码都放在一起对后期维护和修改都不方便，所以把他们根据功能或者位置拆分开，放到 components 文件夹下面去实现，最后再整合到 views 文件夹下。加载到 App.vue 文件中，最后渲染到页面中。
最开始构建页面可以写死，当基本样子搭起来之后就可以去向后端去请求数据，请求数据用到的是axios插件，获取到数据后console一下，在控制台查看请求的数据，确保数据保存到正确的变量中去（这里如果遇到跨域的问题可以在后端用 CORS 解决）。
组件的问题解决了接下来就是访问的问题，我们如何通过点击的时候切换组件呢？我们在 router 文件夹中引入组件，给它们设定访问它们的路径。这里用到了vue-router插件。
随着组件的增多，组件之间的传值就是问题，不可能一些数据一直好几个组件里一直传，我们需要把它们单独拿出来放到 store 文件夹下面保存起来，当需要的时候在获取（这里通过 sessionStorage 解决vuex刷新数据丢失问题）。这里用到了vuex组件。
不同的组件有时候会用到相同的方法，当要修改方法时就要改好多地方，所以把它们单独拿出来放到mixins文件夹下面，当用到这些方法的时候在对应组件中引入即可。
vue支持很多的第三方组件，能给我们项目带来很好的交互和显示效果，具体在需要的时候npm或yarn就行了，当然了，一些样式和js语句也可以放到assets文件夹下。
3、最终项目结构
.
├── build // webpack相关配置文件
├── config // vue基本配置文件
├── node_modules // 包
├── index.html // 入口页面
├── package.json // 管理包的依赖
├── src // 项目源码目录
│ ├── assets // 静态资源，图片、js、css 等
│ ├── api // 封装请求的 api
│ ├── mixins // 公共方法
│ ├── router // 路由
│ ├── store // 管理数据
│ ├── components
│ │ ├── AlbumContent.vue // 展示歌单歌手包含的歌曲
│ │ ├── Comment.vue // 评论
│ │ ├── ContentList.vue // 展示歌单歌手区
│ │ ├── LoginLogo.vue // 登录界面的logo
│ │ ├── PlayBar.vue // 页面底部的播放控制区
│ │ ├── ScrollTop.vue // 回到顶部
│ │ ├── SongAudio.vue // 接收音乐并播放的位置
│ │ ├── Swiper.vue // 轮播图
│ │ ├── TheFooter.vue // 页脚
│ │ ├── TheHeader.vue // 页头
│ │ ├── TheAside.vue // 播放列表
│ │ ├── Upload.vue // 修改头像
│ │ ├── Info.vue // 个人信息区
│ │ └── search // 搜索区
│ │ ├── SearchSongLists.vue // 按歌单搜索
│ │ └── SearchSongs.vue // 按歌手搜索
│ ├── pages // 组件
│ │ ├── 404.vue // 404
│ │ ├── Home.vue // 首页
│ │ ├── Setting.vue // 设置
│ │ ├── Login.vue // 登录区
│ │ ├── LoginUp.vue // 注册区
│ │ ├── Lyric.vue // 歌词显示区
│ │ ├── MyMusic.vue // 我的收藏区
│ │ ├── Search.vue // 搜索区
│ │ ├── Singer.vue // 歌手区
│ │ ├── SingerAlbum.vue // 歌手详情
│ │ ├── SongList.vue // 歌单区
│ │ └── SongListAlbum.vue // 歌单详情
│ ├── main.js // 入口js文件
│ └── App.vue // 根组件
├── static // 存放静态资源
├── test // 测试文件目录
├── .babelrc // bable 编译配置
└── .gitignore // 提交忽略的文件配置
管理端项目构建
这里相比前台的开发要简单得多，因为基本使用 Element UI 快速搭建的，实现和前台一样。
最终项目结构
.
├── build
├── config
├── node_modules
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── main.js
│ ├── api
│ ├── assets
│ ├── mixins
│ ├── components
│ │ ├── Header.vue
│ │ ├── Home.vue
│ │ ├── Sidebar.vue
│ │ └── SongAudio.vue
│ ├── pages
│ │ ├── CollectPage.vue
│ │ ├── CommentPage.vue
│ │ ├── ConsumerPage.vue
│ │ ├── InfoPage.vue
│ │ ├── ListSongPage.vue
│ │ ├── Login.vue
│ │ ├── SingerPage.vue
│ │ ├── SongListPage.vue
│ │ └── SongPage.vue
│ ├── router
│ └── store
├── static
└── test
最终项目的效果，小编弄几个效果图给大家瞅瞅：
看着不错吧，完整的项目可以包含以下这些功能：
音乐播放 用户登录注册 用户信息编辑、头像修改 歌曲、歌单搜索 歌单打分 歌单、歌曲评论 歌单列表、歌手列表分页显示 歌词同步显示 音乐收藏、下载、拖动控制、音量控制 后台对用户、歌曲、歌手、歌单信息的管理
关于项目运行
1、下载项目到本地
2、下载数据库中记录的资源
下载网站依赖的歌曲及图片（关注文末公众号回复关键字获取下载链接），将 data 夹里的文件放到 music-server 文件夹下。
3、修改配置文件
1）创建数据库 将 music-website/music-server/sql 文件夹中的 tp_music.sql 文件导入数据库。
2）修改用户名密码 修改 music-website/music-server/src/main/resources/application.properties 文件里的 spring.datasource.username 和 spring.datasource.password；
3）修改资源路径
修改 music-server/src/main/java/com/example/yin/constant/Constants.java 文件中的 RESOURCE_PATH，否则资源加载不了。留图
4、启动项目
启动管理端：进入 music-server 文件夹，运行下面命令启动服务器
// 方法一
./mvnw spring-boot:run
// 方法二
mvn spring-boot:run // 前提装了 maven
启动客户端：进入 music-client 目录，运行下面命令
npm install // 安装依赖
npm run dev // 启动前台项目
启动管理端：进入 music-manage 目录，运行下面命令
npm install // 安装依赖
npm run dev // 启动后台管理项目
整个项目还是灰常有意思的，小编强烈建议小伙伴们下载学习：
点击下方卡片，关注公众号“TJ君”
回复“音乐”，获取项目及歌曲图片地址
大家好，我是TJ
一个励志推荐10000款开源项目与工具的程序员
欢迎关注我，了解更多好玩、有趣的科技资讯