音乐播放应用系统

项目概述

这是一个功能完整的音乐播放应用系统，包含前后端两部分。系统支持用户注册登录、音乐播放、歌单管理、歌手管理、评论互动等功能，为用户提供全面的音乐体验。

系统架构

本项目采用前后端分离架构：

• 前端：基于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 字符集。

   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配置。

     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。

     host: localhost
     port: 6379
     

   • 文件上传路径：找到 file.upload 部分，并配置您希望存储上传文件的路径，或者保留不修改。

     path: /path/to/your/upload/folder/
     

     请确保此目录存在并且您的应用程序具有写入权限。

3. 构建项目 在 music-houduan 目录下，使用Maven构建项目。

   cd music-houduan
   mvn clean package -DskipTests
   

4. 运行项目 构建成功后，运行生成的jar文件。

   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
   • Knife4j: http://localhost:8085/doc.html

前端部署

1. 安装依赖 在 music-qianduan 目录下，使用npm安装项目依赖项。

   cd music-qianduan
   npm install
   

2. 修改配置

   • 在 music-qianduan 根目录中，创建一个名为 .env.development 的文件（用于开发环境）或 .env.production 的文件（用于生产环境）。
   • 在此文件中，设置 VITE_API_URL 变量以指向您的后端API。

     VITE_API_URL=http://localhost:8085
     

3. 运行开发服务器 对于开发，请使用以下命令启动Vite开发服务器：

   npm run dev
   

   前端应用程序将在 http://localhost:5173 上可用。

4. 构建项目 对于生产，请使用以下命令构建项目：

   npm run build
   

5. 部署静态资源

   • 构建完成后，将 music-qianduan/dist 目录的内容部署到您的Web服务器（例如Nginx、Apache）。
   • 确保您的Web服务器配置正确，以处理单页应用程序（SPA）的路由。对于Nginx，您可能需要添加如下配置：

     location / {
       try_files $uri $uri/ /index.html;
     }
     

使用说明

管理员账号

• 用户名：admin
• 密码：123456

普通用户

• 可以自行注册或使用以下测试账号：
  • 用户名：test
  • 密码：123456

基本操作流程

1. 音乐播放

   • 在首页或音乐列表页选择音乐
   • 点击播放按钮开始播放
   • 使用播放器控制播放进度、音量等

2. 歌单管理

   • 登录后可创建个人歌单
   • 添加音乐到歌单
   • 收藏其他用户的歌单

3. 音乐上传（管理员）

   • 登录管理员账号
   • 进入后台管理
   • 上传音乐文件和封面

4. 评论互动

   • 在音乐、歌单、歌手详情页发表评论
   • 回复其他用户的评论

系统截图

(此处可添加系统主要页面的截图)

开发团队

• 前端开发：XXX
• 后端开发：XXX
• 产品设计：XXX
• 测试：XXX