Yin-Hongwei/music-website
Vue🎧 Vue + SpringBoot + MyBatis 音乐网站
声明
这项目我一直作为技术分享，不做收费（版权归我个人独有，大家拿来学习交流随时欢迎，拒绝商用）。希望大家可以尊重下我的劳动成果，谢谢。
项目说明
本音乐网站的客户端和管理端使用 Vue 框架来实现，服务端使用 Spring Boot + MyBatis 来实现，数据库使用了 MySQL。实现思路可参考 博客文章。本地启动步骤见下方 快速开始。
项目结构
music-website/
├── music-client/ # 前台 Web 客户端（Vue 3）
├── music-manage/ # 后台管理端（Vue 3）
├── music-server/ # 后端 API（Spring Boot）
│ └── data/ # 本地媒体与日志（img / song / logs）
├── deploy/ # Docker Compose 编排（镜像由各应用 Dockerfile 构建）
├── sql/ # 数据库初始化脚本
└── docs/ # 文档
项目预览
前台截图
 |
 |
 |
 |
 |
 |
后台截图
 |
 |
 |
 |
项目主要功能
| 模块 | 能力 |
|---|---|
| 用户 | 登录注册、资料编辑、个人中心 |
| 发现 | 歌单推荐、歌单与歌手展示、歌曲/歌单搜索 |
| 互动 | 歌单与歌曲评论、收藏 |
| 播放器 | 播放、暂停、进度拖动、音量控制、歌词同步、下载 |
| 管理后台 | Banner、用户、歌曲、歌手、歌单、评论管理 |
技术栈
| 层级 | 技术 |
|---|---|
| 后端 | Spring Boot · MyBatis · Redis · 本地媒体存储（music-server/data） |
| 前端 | Vue 3 · TypeScript · Vue Router · Pinia · Axios · Element Plus（客户端）/ Naive UI（管理端） |
| 部署 | Docker · Docker Compose |
开发环境
| 环境 | 版本 |
|---|---|
| JDK | 8+（如 jdk-8u141） |
| MySQL | 8.0+ |
| Redis | 5.0.8+，或使用 Docker 启动 Redis |
| Node.js | 16+ |
| IDE | IntelliJ IDEA / VS Code |
快速开始
1. 克隆仓库
git clone git@github.com:Yin-Hongwei/music-website.git
cd music-website
2. 下载媒体资源
下载歌曲与图片资源：
- 链接：https://pan.quark.cn/s/f64a22313775
- 提取码：
21p9
将网盘中的 data 文件夹放到 music-server 下，得到：
music-server/data/img/
music-server/data/song/
注意： 请保持上述路径；本地日志默认写入
music-server/data/logs/。
3. 配置数据库
- 在 MySQL 中创建数据库，并导入
sql/yin_music.sql - 编辑
music-server/src/main/resources/application-dev.properties，修改spring.datasource.username与spring.datasource.password（默认激活devprofile，见application.properties）
4. 启动服务
按以下顺序启动各服务（可开多个终端窗口）：
| 服务 | 目录 | 命令 |
|---|---|---|
| 后端 API | music-server |
./mvnw clean spring-boot:run（Windows 使用 mvnw.cmd） |
| Redis | — | redis-server |
| 前台客户端 | music-client |
npm install && npm run serve |
| 管理后台 | music-manage |
npm install && npm run serve |
后端启动命令详情
# macOS / Linux（推荐，使用项目自带 Maven Wrapper）
./mvnw clean spring-boot:run
# Windows（推荐）
mvnw.cmd clean spring-boot:run
# 备选：本机已安装 Maven 时
mvn clean spring-boot:run
Redis 安装参考
常见问题
| 现象 | 处理方式 |
|---|---|
| 图片或音乐加载失败 | 确认资源位于 music-server/data/img 与 music-server/data/song，并在 music-server 目录下启动后端 |
| 音乐无法播放 | 资源文件可能损坏，请从网盘重新下载并替换 |
Docker 部署
本地开发可跳过本节。适用于 Linux 服务器部署。
镜像定义放在各应用目录（music-server / music-client / music-manage 的 Dockerfile），deploy/docker-compose.yml 只负责编排。
cd deploy
docker compose up --build
启动后：
| 服务 | 地址 |
|---|---|
| 前台 | http://localhost:8080 |
| 管理端 | http://localhost:8081 |
| API | http://localhost:8888 |
可选环境变量：MYSQL_ROOT_PASSWORD、API_PUBLIC_URL（前端构建时写入的后端地址，默认 http://localhost:8888）。
贡献者
感谢所有为本仓库提交过代码与改进建议的贡献者。
赞助
如果此项目对你确实有帮助，欢迎给我打赏一杯咖啡～
联系方式
1、邮箱📮：yinhongwei96@126.com
2、微信公众号
Git History
License
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license. Commercial use is not permitted.
Copyright (c) 2018 Yin-Hongwei