music-website

基于 Vue 3 + Spring Boot 的全栈音乐网站 · 学习交流

声明

**这项目我一直作为技术分享，不做收费（版权归我个人独有，大家拿来学习交流随时欢迎，拒绝商用）。希望大家可以尊重下我的劳动成果，谢谢。**
## 项目说明本音乐网站的客户端和管理端使用 **Vue** 框架来实现，服务端使用 **Spring Boot + MyBatis** 来实现，数据库使用了 **MySQL**。实现思路可参考 **[博客文章](https://yin-hongwei.github.io/2019/03/04/music/)**。本地启动步骤见下方 [快速开始](#快速开始)。
## 项目结构 ``` 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. 克隆仓库 ```bash 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. 配置数据库 1. 在 MySQL 中创建数据库，并导入 `sql/yin_music.sql` 2. 编辑 `music-server/src/main/resources/application-dev.properties`，修改 `spring.datasource.username` 与 `spring.datasource.password`（默认激活 `dev` profile，见 `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` |

后端启动命令详情

```bash # macOS / Linux（推荐，使用项目自带 Maven Wrapper） ./mvnw clean spring-boot:run # Windows（推荐） mvnw.cmd clean spring-boot:run # 备选：本机已安装 Maven 时 mvn clean spring-boot:run ```

Redis 安装参考

- 下载：https://redis.io/ - Mac 安装示例：https://www.jianshu.com/p/ce27d9ab4f8c

## 常见问题 | 现象 | 处理方式 | | ------------------ | ---------------------------------------------------------------------------------------------------- | | 图片或音乐加载失败 | 确认资源位于 `music-server/data/img` 与 `music-server/data/song`，并在 `music-server` 目录下启动后端 | | 音乐无法播放 | 资源文件可能损坏，请从网盘重新下载并替换 |
## Docker 部署 > 本地开发可跳过本节。适用于 Linux 服务器部署。镜像定义放在各应用目录（`music-server` / `music-client` / `music-manage` 的 `Dockerfile`），`deploy/docker-compose.yml` 只负责编排。 ```bash 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](mailto:yinhongwei96@126.com)** **2、微信公众号** 微信公众号 YinHongwei

## Git History

## License This project is licensed under the [Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)](https://creativecommons.org/licenses/by-nc/4.0/) license. **Commercial use is not permitted.** Copyright (c) 2018 Yin-Hongwei