- 优化数据库配置步骤,增加创建数据库和导入SQL文件的详细说明 - 更新配置文件修改说明,提供更具体的配置示例 - 补充API文档访问说明 - 完善前端部署步骤,包括运行开发服务器和生产构建 - 增加SnowflakeIdUtil和TimeUtil工具类
254 lines
6.5 KiB
Markdown
254 lines
6.5 KiB
Markdown
# 音乐播放应用系统
|
||
|
||
## 项目概述
|
||
|
||
这是一个功能完整的音乐播放应用系统,包含前后端两部分。系统支持用户注册登录、音乐播放、歌单管理、歌手管理、评论互动等功能,为用户提供全面的音乐体验。
|
||
|
||
### 系统架构
|
||
|
||
本项目采用前后端分离架构:
|
||
- 前端:基于Vue 3的单页面应用
|
||
- 后端:基于Spring Boot的RESTful API服务
|
||
- 数据库:MySQL关系型数据库
|
||
- 缓存:Redis缓存服务
|
||
|
||
## 技术栈
|
||
|
||
### 后端技术栈
|
||
|
||
- **核心框架**:Spring Boot 3.x
|
||
- **ORM框架**:Spring Data JPA + Hibernate
|
||
- **安全认证**:Sa-Token
|
||
- **数据库**:MySQL 8.x
|
||
- **缓存**:Redis
|
||
- **API文档**:Knife4j/Swagger
|
||
- **文件处理**:自定义文件上传服务
|
||
|
||
### 前端技术栈
|
||
|
||
- **核心框架**:Vue 3 (组合式API)
|
||
- **构建工具**:Vite
|
||
- **状态管理**:Pinia
|
||
- **UI组件**:Element Plus
|
||
- **路由管理**:Vue Router
|
||
- **HTTP请求**:Axios
|
||
- **音频处理**:Web Audio API
|
||
|
||
## 功能模块
|
||
|
||
### 1. 用户系统
|
||
|
||
- 用户注册与登录
|
||
- 个人信息管理
|
||
- 收藏管理(音乐、歌单、歌手)
|
||
- 播放历史记录
|
||
- 权限控制(普通用户/管理员)
|
||
|
||
### 2. 音乐播放系统
|
||
|
||
- 音乐播放、暂停、上一首、下一首
|
||
- 播放列表管理
|
||
- 播放模式(顺序播放、单曲循环、列表循环)
|
||
- 歌词同步显示
|
||
- 进度控制与音量调节
|
||
- 播放统计
|
||
|
||
### 3. 音乐管理系统
|
||
|
||
- 音乐上传与编辑
|
||
- 音乐分类管理
|
||
- 音乐搜索
|
||
- 热门音乐推荐
|
||
- 最新音乐展示
|
||
|
||
### 4. 歌手管理系统
|
||
|
||
- 歌手信息管理
|
||
- 歌手分类
|
||
- 歌手音乐关联
|
||
- 歌手搜索
|
||
|
||
### 5. 歌单管理系统
|
||
|
||
- 歌单创建与编辑
|
||
- 歌单分类
|
||
- 歌单音乐管理
|
||
- 歌单收藏
|
||
- 官方推荐歌单
|
||
|
||
### 6. 评论系统
|
||
|
||
- 发表评论
|
||
- 回复评论
|
||
- 评论管理
|
||
|
||
### 7. 首页推荐系统
|
||
|
||
- 轮播图展示
|
||
- 热门音乐推荐
|
||
- 最新音乐展示
|
||
- 推荐歌单
|
||
- 热门歌手
|
||
|
||
## 数据模型
|
||
|
||
### 核心实体
|
||
|
||
1. **用户(User)**:用户基本信息
|
||
2. **音乐(Music)**:音乐信息、文件路径、歌词
|
||
3. **歌手(Singer)**:歌手信息
|
||
4. **歌单(Playlist)**:歌单信息
|
||
5. **评论(Comment)**:评论内容
|
||
6. **类型(Type)**:音乐类型、歌手类型、歌单类型
|
||
7. **轮播图(Banner)**:首页轮播图
|
||
|
||
### 核心关系
|
||
|
||
1. **用户-音乐**:收藏关系、播放历史
|
||
2. **用户-歌单**:创建关系、收藏关系
|
||
3. **用户-歌手**:收藏关系
|
||
4. **音乐-歌手**:多对多关系
|
||
5. **音乐-类型**:多对多关系
|
||
6. **歌单-音乐**:多对多关系
|
||
7. **歌手-类型**:多对一关系
|
||
8. **歌单-类型**:多对一关系
|
||
|
||
## 部署指南
|
||
|
||
### 环境要求
|
||
|
||
- JDK 17+
|
||
- Node.js 16+
|
||
- MySQL 8.x
|
||
- Redis 6.x
|
||
|
||
### 后端部署
|
||
|
||
1. **配置数据库**
|
||
在您的MySQL服务器中,创建一个名为 `music_db` 的数据库,并使用 `utf8mb4` 字符集。
|
||
```sql
|
||
CREATE DATABASE music_db CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
|
||
```
|
||
然后,将 `sql/music_db.sql` 文件导入到 `music_db` 数据库中,以创建所有必需的表和初始数据。
|
||
|
||
2. **修改配置文件**
|
||
- 打开 `music-houduan/src/main/resources/application.yml` 文件。
|
||
- **数据库连接**:找到 `spring.datasource` 部分,并更新 `url`、`username` 和 `password` 以匹配您的MySQL配置。
|
||
```yaml
|
||
url: jdbc:mysql://localhost:3306/music_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
|
||
username: your-mysql-username
|
||
password: your-mysql-password
|
||
```
|
||
- **Redis连接**:找到 `spring.redis` 部分,并更新 `host` 和 `port`。
|
||
```yaml
|
||
host: localhost
|
||
port: 6379
|
||
```
|
||
- **文件上传路径**:找到 `file.upload` 部分,并配置您希望存储上传文件的路径,或者保留不修改。
|
||
```yaml
|
||
path: /path/to/your/upload/folder/
|
||
```
|
||
请确保此目录存在并且您的应用程序具有写入权限。
|
||
|
||
3. **构建项目**
|
||
在 `music-houduan` 目录下,使用Maven构建项目。
|
||
```bash
|
||
cd music-houduan
|
||
mvn clean package -DskipTests
|
||
```
|
||
|
||
4. **运行项目**
|
||
构建成功后,运行生成的jar文件。
|
||
```bash
|
||
java -jar target/music-houduan-1.0.0.jar
|
||
```
|
||
默认情况下,后端服务将在 `http://localhost:8085` 上运行。
|
||
|
||
5. **API文档**
|
||
您可以通过以下URL访问API文档:
|
||
- **Swagger UI**: [http://localhost:8085/swagger-ui/index.html](http://localhost:8085/swagger-ui/index.html)
|
||
- **Knife4j**: [http://localhost:8085/doc.html](http://localhost:8085/doc.html)
|
||
|
||
### 前端部署
|
||
|
||
1. **安装依赖**
|
||
在 `music-qianduan` 目录下,使用npm安装项目依赖项。
|
||
```bash
|
||
cd music-qianduan
|
||
npm install
|
||
```
|
||
|
||
2. **修改配置**
|
||
- 在 `music-qianduan` 根目录中,创建一个名为 `.env.development` 的文件(用于开发环境)或 `.env.production` 的文件(用于生产环境)。
|
||
- 在此文件中,设置 `VITE_API_URL` 变量以指向您的后端API。
|
||
```
|
||
VITE_API_URL=http://localhost:8085
|
||
```
|
||
|
||
3. **运行开发服务器**
|
||
对于开发,请使用以下命令启动Vite开发服务器:
|
||
```bash
|
||
npm run dev
|
||
```
|
||
前端应用程序将在 `http://localhost:5173` 上可用。
|
||
|
||
4. **构建项目**
|
||
对于生产,请使用以下命令构建项目:
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
5. **部署静态资源**
|
||
- 构建完成后,将 `music-qianduan/dist` 目录的内容部署到您的Web服务器(例如Nginx、Apache)。
|
||
- 确保您的Web服务器配置正确,以处理单页应用程序(SPA)的路由。对于Nginx,您可能需要添加如下配置:
|
||
```nginx
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
```
|
||
|
||
## 使用说明
|
||
|
||
### 管理员账号
|
||
|
||
- 用户名:admin
|
||
- 密码:123456
|
||
|
||
### 普通用户
|
||
|
||
- 可以自行注册或使用以下测试账号:
|
||
- 用户名:test
|
||
- 密码:123456
|
||
|
||
### 基本操作流程
|
||
|
||
1. **音乐播放**
|
||
- 在首页或音乐列表页选择音乐
|
||
- 点击播放按钮开始播放
|
||
- 使用播放器控制播放进度、音量等
|
||
|
||
2. **歌单管理**
|
||
- 登录后可创建个人歌单
|
||
- 添加音乐到歌单
|
||
- 收藏其他用户的歌单
|
||
|
||
3. **音乐上传(管理员)**
|
||
- 登录管理员账号
|
||
- 进入后台管理
|
||
- 上传音乐文件和封面
|
||
|
||
4. **评论互动**
|
||
- 在音乐、歌单、歌手详情页发表评论
|
||
- 回复其他用户的评论
|
||
|
||
## 系统截图
|
||
|
||
(此处可添加系统主要页面的截图)
|
||
|
||
## 开发团队
|
||
|
||
- 前端开发:XXX
|
||
- 后端开发:XXX
|
||
- 产品设计:XXX
|
||
- 测试:XXX
|