Topics

#music-website #mvc #mybatis #mysql #spring-boot #ssm #typescript #vue #vue-spring-boot #vue-spring-boot-mybatis #vue3

Language breakdown

No language data available.

▸ Files click to expand

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）
├── sql/              # 数据库初始化脚本
└── docs/             # 文档

项目预览

前台截图 · 点击折叠 / 展开

后台截图 · 点击折叠 / 展开

项目主要功能

| 模块 | 能力 | | --- | --- | | 用户 | 登录注册、资料编辑、个人中心 | | 发现 | 歌单推荐、歌单与歌手展示、歌曲/歌单搜索 | | 互动 | 歌单与歌曲评论、收藏 | | 播放器 | 播放、暂停、进度拖动、音量控制、歌词同步、下载 | | 管理后台 | Banner、用户、歌曲、歌手、歌单、评论管理 |

技术栈

| 层级 | 技术 | | --- | --- | | 后端 | Spring Boot · MyBatis · Redis · MinIO | | 前端 | Vue 3 · TypeScript · Vue Router · Pinia · Axios · Element Plus | | 部署 | Docker · Docker Compose |

开发环境

| 环境 | 版本 | | --- | --- | | JDK | 8+（如 jdk-8u141） | | MySQL | 8.0+ | | Redis | 5.0.8+，或使用 Docker 启动 Redis.html) | | Node.js | 14+ | | MinIO | 最新版，或使用 Docker 启动 MinIO.html) | | IDE | IntelliJ IDEA / VS Code |

快速开始

1. 克隆仓库

git clone git@github.com:Yin-Hongwei/music-website.git
cd music-website

2. 下载媒体资源

从百度网盘下载歌曲与图片资源：

链接：https://pan.baidu.com/s/1Qv0ohAIPeTthPK_CDwpfWg
提取码：gwa4

将 data 文件夹中的内容放到 music-server 目录下，目录结构参考下方截图。

注意： 请按截图所示路径存放资源文件。

资源目录结构

3. 配置数据库

在 MySQL 中创建数据库，并导入 sql/yin_music.sql
编辑 music-server/src/main/resources/application.properties，修改 spring.datasource.username 与 spring.datasource.password

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）
./mvnw clean spring-boot:run
Windows（推荐）
mvnw.cmd clean spring-boot:run
备选：本机已安装 Maven 时
mvn clean spring-boot:run

Redis 安装参考