README

music-website


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





  
  
  
  
  
  
  



  
  
  
  
  
  
  
  
  





  中文 · English




声明

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



 项目说明

本音乐网站的客户端和管理端使用 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.html) |
| Node.js | 16+                                                                                                    |
| IDE     | IntelliJ IDEA / VS Code                                                                                |



 快速开始

 1. 克隆仓库

bash
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. 配置数据库

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. 启动服务

按以下顺序启动各服务（可开多个终端窗口）：

| 服务           | 目录           | 命令