精美风的音乐网站

项目简介

这是一个基于SpringBoot + Vue开发的在线音乐网站系统,包含前台用户端和后台管理端。系统实现了音乐播放、用户管理、歌曲管理、歌单管理、评论互动等核心功能,界面精美,功能完善,适合作为计算机设计或学习项目。

技术栈

后端技术

技术	版本/说明
运行环境	Java 1.8
Web框架	Spring Boot 2.1.1
ORM框架	MyBatis 1.1.1
数据库	MySQL 8.0.16
构建工具	Maven
工具类库	Apache Commons Lang3 3.8.1
JSON处理	FastJSON 1.2.47
热部署	Spring Boot DevTools

前台技术 (music-client)

技术	版本/说明
前端框架	Vue 2.6.11
路由管理	Vue Router 3.0.7
状态管理	Vuex 3.0.1
HTTP请求	Axios 0.18.0
UI组件库	Element UI 2.4.11
CSS预处理器	Sass/SCSS
构建工具	Webpack 3.6.0

后台技术 (music-manage)

技术	版本/说明
前端框架	Vue 2.5.2
路由管理	Vue Router 3.0.1
状态管理	Vuex 3.1.1
HTTP请求	Axios 0.19.0
UI组件库	Element UI 2.13.2
图表库	ECharts 4.5.0, V-Charts 1.19.0
构建工具	Webpack 3.6.0

项目特点

• 前后端分离：后端提供RESTful API,前端独立开发部署
• 双端系统：包含用户前台和管理后台,功能完整
• 音乐播放：支持在线播放、歌词同步显示、进度控制
• 用户系统：完整的用户注册登录、信息编辑、头像上传
• 社交互动：支持歌曲评论、歌单评分、收藏下载
• 后台管理：可视化数据统计、完善的内容管理功能
• 界面精美：现代化UI设计,用户体验良好

功能模块

前台功能 (music-client)

1. 用户模块

• 用户注册/登录
• 用户信息编辑
• 头像修改上传
• 个人中心

2. 音乐播放模块

• 在线音乐播放
• 歌词同步显示
• 播放进度拖动控制
• 音量控制
• 播放列表管理
• 单曲循环/列表循环/随机播放

3. 搜索模块

• 歌曲搜索
• 歌单搜索
• 歌手搜索
• 搜索结果展示

4. 歌单模块

• 歌单列表浏览(分页)
• 歌单详情查看
• 歌单评分
• 歌单评论

5. 歌手模块

• 歌手列表浏览(分页)
• 歌手详情查看
• 歌手歌曲列表

6. 收藏模块

• 歌曲收藏
• 歌单收藏
• 我的收藏列表
• 取消收藏

7. 下载模块

• 歌曲下载
• 下载历史

8. 评论模块

• 歌曲评论
• 歌单评论
• 评论列表查看
• 评论点赞

后台功能 (music-manage)

1. 数据统计

• 用户数量统计
• 歌曲数量统计
• 歌单数量统计
• 数据可视化图表(ECharts)

2. 用户管理

• 用户列表
• 用户信息查看
• 用户状态管理
• 用户删除

3. 歌手管理

• 歌手列表
• 新增/编辑/删除歌手
• 歌手信息管理
• 歌手图片上传

4. 歌曲管理

• 歌曲列表
• 新增/编辑/删除歌曲
• 歌曲信息管理
• 歌曲文件上传
• 歌词上传
• 歌曲封面上传

5. 歌单管理

• 歌单列表
• 新增/编辑/删除歌单
• 歌单信息管理
• 歌单封面上传
• 歌单歌曲管理

6. 评论管理

• 评论列表
• 评论审核
• 评论删除

项目结构

java-music-website/
├── code/                           # 项目代码
│   ├── music-server/               # 后端服务 (Spring Boot)
│   │   ├── sql/                    # 数据库SQL文件
│   │   │   └── db_music.sql        # 数据库初始化脚本
│   │   ├── src/
│   │   │   └── main/
│   │   │       ├── java/
│   │   │       │   └── com/example/demo/
│   │   │       │       ├── config/         # 配置类
│   │   │       │       ├── controller/     # 控制器
│   │   │       │       ├── dao/            # 数据访问层
│   │   │       │       ├── domain/         # 实体类
│   │   │       │       ├── service/        # 业务逻辑层
│   │   │       │       └── utils/          # 工具类
│   │   │       └── resources/
│   │   │           ├── application.properties  # 配置文件
│   │   │           └── mapper/             # MyBatis映射文件
│   │   └── pom.xml                 # Maven配置
│   │
│   ├── music-client/               # 前台用户端 (Vue)
│   │   ├── build/                  # 构建配置
│   │   ├── config/                 # 项目配置
│   │   ├── src/
│   │   │   ├── api/                # API接口封装
│   │   │   ├── assets/             # 静态资源
│   │   │   ├── components/         # 公共组件
│   │   │   ├── router/             # 路由配置
│   │   │   ├── store/              # Vuex状态管理
│   │   │   ├── views/              # 页面视图
│   │   │   ├── App.vue             # 根组件
│   │   │   └── main.js             # 入口文件
│   │   ├── static/                 # 静态文件
│   │   ├── index.html              # HTML模板
│   │   └── package.json            # 依赖配置
│   │
│   └── music-manage/               # 后台管理端 (Vue)
│       ├── build/                  # 构建配置
│       ├── config/                 # 项目配置
│       ├── src/
│       │   ├── api/                # API接口封装
│       │   ├── assets/             # 静态资源
│       │   ├── components/         # 公共组件
│       │   ├── router/             # 路由配置
│       │   ├── store/              # Vuex状态管理
│       │   ├── views/              # 页面视图
│       │   ├── App.vue             # 根组件
│       │   └── main.js             # 入口文件
│       ├── static/                 # 静态文件
│       ├── index.html              # HTML模板
│       └── package.json            # 依赖配置
│
├── 使用说明.txt                     # 使用说明
├── 文件修改位置.png                 # 配置修改说明图
├── 演示视频.mp4                     # 项目演示视频
├── music-website-master.zip        # 项目压缩包
└── singerPic.zip                   # 歌手图片资源包

数据库设计

核心数据表

1. consumer - 用户表

   • 用户基本信息
   • 登录凭证
   • 用户头像

2. singer - 歌手表

   • 歌手基本信息
   • 歌手图片
   • 歌手简介

3. song - 歌曲表

   • 歌曲基本信息
   • 歌曲文件路径
   • 歌词文件路径
   • 所属歌手

4. song_list - 歌单表

   • 歌单基本信息
   • 歌单封面
   • 歌单简介

5. list_song - 歌单歌曲关联表

   • 歌单ID
   • 歌曲ID

6. collect - 收藏表

   • 用户ID
   • 收藏类型(歌曲/歌单)
   • 收藏对象ID

7. comment - 评论表

   • 用户ID
   • 评论类型(歌曲/歌单)
   • 评论对象ID
   • 评论内容

8. rank_list - 评分表

   • 歌单ID
   • 用户ID
   • 评分

运行环境要求

后端环境

• JDK 1.8+
• MySQL 5.7+ / 8.0+
• Maven 3.0+

前端环境

• Node.js 6.0+
• npm 3.0+

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE db_music CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

# 进入SQL文件目录
cd code/music-server/sql

# 导入数据库
mysql -u root -p db_music < db_music.sql

2. 后端配置与启动

1. 修改数据库配置 编辑 code/music-server/src/main/resources/application.properties：

spring.datasource.url=jdbc:mysql://localhost:3306/db_music?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=你的密码

2. 修改文件上传路径 编辑 MyPicConfig 类中的 addResourceLocations 方法:

// Mac路径示例
registry.addResourceHandler("/img/singerPic/**")
        .addResourceLocations("file:/Users/你的用户名/music/img/singerPic/");

// Windows路径示例
registry.addResourceHandler("/img/singerPic/**")
        .addResourceLocations("file:D:/music/img/singerPic/");

3. 启动后端服务

# 进入后端目录
cd code/music-server

# Maven打包
mvn clean package

# 运行
java -jar target/demo-0.0.1-SNAPSHOT.jar

或使用IDE直接运行主类。

后端服务默认运行在 http://localhost:8888

3. 启动前台用户端

# 进入前台目录
cd code/music-client

# 安装依赖
npm install

# 启动开发服务器
npm run dev

前台默认运行在 http://localhost:8080

4. 启动后台管理端

# 进入后台目录
cd code/music-manage

# 安装依赖
npm install

# 启动开发服务器
npm run dev

后台默认运行在 http://localhost:8081

默认账号

前台用户

• 可自行注册新账号使用

后台管理员

• 用户名: admin
• 密码: admin123 (具体账号请查看数据库consumer表中role字段为1的用户)

生产部署

后端部署

# 打包
cd code/music-server
mvn clean package -DskipTests

# 部署jar包
java -jar target/demo-0.0.1-SNAPSHOT.jar

前端部署

# 前台打包
cd code/music-client
npm run build

# 后台打包
cd code/music-manage
npm run build

打包后的文件在 dist 目录,部署到Nginx或其他Web服务器即可。

界面预览

项目包含演示视频文件 演示视频.mp4,可查看完整功能演示。

扩展建议

如需进一步完善项目,可考虑以下扩展:

1. 社交功能

   • 用户关注/粉丝
   • 动态发布
   • 私信聊天

2. 推荐系统

   • 个性化音乐推荐
   • 相似歌曲推荐
   • 热门榜单

3. 支付功能

   • VIP会员
   • 付费音乐
   • 虚拟货币

4. 移动端

   • 响应式设计
   • 移动端APP
   • 微信小程序

5. 音质选择

   • 多音质支持
   • 无损音乐
   • 音效调节

6. 直播功能

   • 音乐直播
   • 在线K歌
   • 弹幕互动

7. AI功能

   • 智能识曲
   • 歌词生成
   • 音乐分类

8. 数据分析

   • 用户行为分析
   • 播放统计
   • 热度排行

注意事项

1. 文件路径配置

   • Mac和Windows路径格式不同,需根据系统修改
   • 确保文件上传目录有读写权限

2. 数据库编码

   • 建议使用utf8mb4编码支持emoji等特殊字符
   • 注意时区设置

3. 跨域配置

   • 开发环境已配置跨域
   • 生产环境需配置Nginx反向代理

4. 音乐版权

   • 本项目仅供学习使用
   • 商用需注意音乐版权问题

5. 文件存储

   • 音乐文件较大,建议使用OSS对象存储
   • 图片建议使用CDN加速

常见问题

Q: 后端启动失败?

A: 检查JDK版本、MySQL服务、数据库配置是否正确

Q: 前端无法访问后端接口?

A: 检查后端是否启动、端口是否被占用、跨域配置是否正确

Q: 音乐无法播放?

A: 检查音乐文件路径配置、文件是否存在、浏览器是否支持该音频格式

Q: 图片无法显示?

A: 检查MyPicConfig类中的路径配置、文件权限、资源映射是否正确

Q: 歌词不同步?

A: 检查歌词文件格式(LRC格式)、时间轴是否正确

技术支持

如有问题,请查看:

• 使用说明.txt
• 文件修改位置.png
• 演示视频.mp4

许可证

本项目仅供学习交流使用,请勿用于商业用途。

---

祝您使用愉快! 🎵🎶