推荐一个 Spring Boot + MyBatis + Vue 音乐网站

一时失言乱红尘 2022-08-28 05:42 198阅读 0赞

前段时间推荐过一个音乐播放器项目。不过，那个是[命令行版本的网易云音乐][Link 1]，太过硬核。

![f595a3a3674e84429f3eb580e301ab9f.png][]

今天推荐一个音乐网站项目，前端技术栈基于 Vue.js 开发前台后台，后端基于Spring Boot + MyBatis ，数据库使用的是 MySQL。

该系统包含音乐网站基本功能：音乐播放、用户管理、歌曲管理、歌单管理、歌手信息、歌词显示、音乐播放相关功能、后台管理。

--------------------

**前台系统****展示**

![20912d2f64e9b96c449b168659ed222b.png][]

![2238b0bf3981c92f86a88b1e023de556.png][]

![52336e9f0b1b95b1d62c525896d017f7.png][]

![9c77ccf5541c0e0ba7ac46de61636cb7.png][]

![cd53db41cbd57e2387ee0de70719803a.png][]

![55b53ac60fd6634485548e0e7990b4ea.png][]

![8b45287d29cde1a78870c4ea46c19e58.png][]

![aef85273a10cc04c56d0073c410ea10d.png][]

**后台管理系统**

![efeb1179a80bfc2e201a3a11b717e66b.png][]

![d3cde90d917eb8be7aaaa5ac749f76a7.png][]

![3247322195748920d012a58dfa6a8353.png][]

![eaca321c7126065ca92ecd05f94e8b50.png][]

![fb4937fcab3be7225c176d47b4c1bec6.png][]

--------------------

***02.*** **如何部署？**

## **1. 下载项目到本地** ##

git clone https://github.com/Yin-Hongwei/music-website.git

使用上述 git 命令或者网站下载：

![dc79f19c2cdca68b02800630d26f2ac6.png][]

**2. 下载资源**

该项目中的静态资源需要自己下载，包括网站依赖的歌曲及图片，将 data 夹里的文件直接放到 music-server 文件夹下。

这一块可以其实可以爬取网上的音乐信息，做一个自己的数据库或者调用开放的 Api。

链接: https://pan.baidu.com/s/1Qv0ohAIPeTthPK_CDwpfWg 提取码: gwa4

**3. 修改配置文件**

创建数据库：将 music-website/music-server/sql 文件夹中的 tp\_music.sql 文件导入数据库。

修改后端配置文件：

1. 修改 datasource 用户名和密码配置

2. 修改资源加载路径，否则资源加载不了。

![7980116f81e89fa0736ac976dbdefa96.png][]

**4. 启动项目**

部署 music-server 用于监听前端发来的请求，提供响应。music-client 和 music-manage 分别是本项目的前台、后台的前端页面，部署这两个项目可以启动前端页面，监听用户的交互，请求后端。

运行时后端必须启动，两个前端项目可以都启动，也可以只启动其中一个，他们是独立的。

**启动后端：**进入 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 // 启动后台管理项目

这个开源项目可以关注公众号「逛逛GitHub」回复「**0606**」下载。

--------------------

【END】

如果看到这里，说明你喜欢这篇文章，请转发、点赞。微信搜索「web\_resource」，关注后回复「进群」或者扫描下方二维码即可进入无广告交流群。

↓扫描二维码进群↓

![bad720bbc0135bc5b7178b85041cb300.png][]

[Link 1]: http://mp.weixin.qq.com/s?__biz=MzUxNjg4NDEzNA==&mid=2247489335&idx=1&sn=7670e0a70d76b320a15724f033a77513&chksm=f9a1c4feced64de8403fe6c1df8ec5d12de8055df88c5c61f7ada49268fb4eac2916c94946b1&scene=21#wechat_redirect
[f595a3a3674e84429f3eb580e301ab9f.png]: /images/20220828/12b49351e6444256a977e150bb4f715b.png
[20912d2f64e9b96c449b168659ed222b.png]: /images/20220828/abed573b4c74433bade43801dd95bb72.png
[2238b0bf3981c92f86a88b1e023de556.png]: /images/20220828/0ba97ca524cb4f3e873a87d2d5333fa2.png
[52336e9f0b1b95b1d62c525896d017f7.png]: /images/20220828/0f4e2c1654b6413b91d7548d8127921e.png
[9c77ccf5541c0e0ba7ac46de61636cb7.png]: /images/20220828/e36a31b12b7a42fd8db8e75914163c85.png
[cd53db41cbd57e2387ee0de70719803a.png]: /images/20220828/292769619eb2446194fb9e0910c2a665.png
[55b53ac60fd6634485548e0e7990b4ea.png]: /images/20220828/03c970a8646541b19b2160479a0e72a8.png
[8b45287d29cde1a78870c4ea46c19e58.png]: /images/20220828/13c6c2946eb34df8b30387f602a7d8ab.png
[aef85273a10cc04c56d0073c410ea10d.png]: /images/20220828/8ee54fa81bd04dcfa3e463843d382811.png
[efeb1179a80bfc2e201a3a11b717e66b.png]: /images/20220828/82c229e0891446859eaafb67103de617.png
[d3cde90d917eb8be7aaaa5ac749f76a7.png]: /images/20220828/5ffb5d93125e49119ee2c9cdedfa8514.png
[3247322195748920d012a58dfa6a8353.png]: /images/20220828/070d83c2b8f240308026a27ba2e9a5fb.png
[eaca321c7126065ca92ecd05f94e8b50.png]: /images/20220828/d56a95e521394432aba486c87f365aaa.png
[fb4937fcab3be7225c176d47b4c1bec6.png]: /images/20220828/07ca2dd020fd416e96f4bd0a55ad4ac5.png
[dc79f19c2cdca68b02800630d26f2ac6.png]: /images/20220828/e0dd49dbca2b4215b9b1355cb82dc36a.png
[7980116f81e89fa0736ac976dbdefa96.png]: /images/20220828/57cc597990af4dea9270b6fc5a20af66.png
[bad720bbc0135bc5b7178b85041cb300.png]: /images/20220828/e9c50f95fd1f44b8831f6d0954871153.png