Yin-Hongwei

Yin-Hongwei/music-website

🎧 Vue + SpringBoot + MyBatis 音乐网站

View on GitHub Back to listing

6.8kstars 1.6kforks 12contributors Vue

README.md

View on GitHub

<h1 align="center">music-website</h1>

<p align="center">
  <strong>基于 Vue 3 + Spring Boot 的全栈音乐网站 · 学习交流</strong>
</p>

<br/>

<br/>

<p align="center">
  <strong>中文</strong> · <a href="README.en.md">English</a>
</p>

</div>

**这项目我一直作为技术分享，不做收费（版权归我个人独有，大家拿来学习交流随时欢迎，拒绝商用）。希望大家可以尊重下我的劳动成果，谢谢。**

<br/>

## 项目说明

本音乐网站的客户端和管理端使用 **Vue** 框架来实现，服务端使用 **Spring Boot + MyBatis** 来实现，数据库使用了 **MySQL**。实现思路可参考 **[博客文章](https://yin-hongwei.github.io/2019/03/04/music/)**。本地启动步骤见下方 [快速开始](#快速开始)。

<br/>

## 项目结构

```
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/             # 文档
```

<br/>

## 项目预览

<br/>

## 项目主要功能

| 模块         | 能力                                           |
| ------------ | ---------------------------------------------- |
| **用户**     | 登录注册、资料编辑、个人中心                   |
| **发现**     | 歌单推荐、歌单与歌手展示、歌曲/歌单搜索        |
| **互动**     | 歌单与歌曲评论、收藏                           |
| **播放器**   | 播放、暂停、进度拖动、音量控制、歌词同步、下载 |
| **管理后台** | Banner、用户、歌曲、歌手、歌单、评论管理       |

<br/>

## 技术栈

| 层级     | 技术                                                                                         |
| -------- | -------------------------------------------------------------------------------------------- |
| **后端** | Spring Boot · MyBatis · Redis · 本地媒体存储（`music-server/data`）                          |
| **前端** | Vue 3 · TypeScript · Vue Router · Pinia · Axios · Element Plus（客户端）/ Naive UI（管理端） |
| **部署** | Docker · Docker Compose                                                                      |

<br/>

## 开发环境

| 环境    | 版本                                                                                                   |
| ------- | ------------------------------------------------------------------------------------------------------ |
| JDK     | 8+（如 jdk-8u141）                                                                                     |
| MySQL   | 8.0+                                                                                                   |
| Redis   | 5.0.8+，或使用 [Docker 启动 Redis](<https://nanshaws.github.io/docker/docker启动redis(完美过程).html>) |
| Node.js | 16+                                                                                                    |
| IDE     | IntelliJ IDEA / VS Code                                                                                |

<br/>

## 快速开始

### 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`                            |

<details>
<summary><b>后端启动命令详情</b></summary>

```bash
# macOS / Linux（推荐，使用项目自带 Maven Wrapper）
./mvnw clean spring-boot:run

# Windows（推荐）
mvnw.cmd clean spring-boot:run

# 备选：本机已安装 Maven 时
mvn clean spring-boot:run
```

</details>

<details>
<summary><b>Redis 安装参考</b></summary>

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

</details>

<br/>

## 常见问题

| 现象               | 处理方式                                                                                             |
| ------------------ | ---------------------------------------------------------------------------------------------------- |
| 图片或音乐加载失败 | 确认资源位于 `music-server/data/img` 与 `music-server/data/song`，并在 `music-server` 目录下启动后端 |
| 音乐无法播放       | 资源文件可能损坏，请从网盘重新下载并替换                                                             |

<br/>

## 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`）。

<br/>

## 贡献者

感谢所有为本仓库提交过代码与改进建议的贡献者。

<br/>

## 赞助

如果此项目对你确实有帮助，欢迎给我打赏一杯咖啡～

<br/>

## 联系方式

**1、邮箱📮：[yinhongwei96@126.com](mailto:yinhongwei96@126.com)**

**2、微信公众号**

<br/>

## Git History

<br/>

## 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.**

Repository info

Default branch: master
Latest version: —
Created: 2019-06-14
Last activity: 2026-09-27
License: Other
Open issues: 163
Watchers: 40

Topics

music-website mvc mybatis mysql spring-boot ssm typescript vue vue-spring-boot vue-spring-boot-mybatis vue3

Contributors

Yin-Hongwei

206 contributions

nanshaws

38 contributions

zzzzzzzzyt

13 contributions

TestCorn

9 contributions

dependabot[bot]

3 contributions