music-website

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

声明

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

项目说明

本音乐网站的客户端和管理端使用 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 [email protected]: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（默认激活 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`

后端启动命令详情

# macOS / Linux（推荐，使用项目自带 Maven Wrapper）