Skip to content

Repository files navigation

music-website

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


GitHub stars GitHub forks Contributors Issues Pull requests Discussions License: CC BY-NC 4.0

Vue 3 TypeScript Pinia Element Plus Spring Boot MyBatis MySQL Redis Docker


中文 · 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
Node.js 16+
IDE IntelliJ IDEA / VS Code

快速开始

1. 克隆仓库

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

2. 下载媒体资源

下载歌曲与图片资源:

将网盘中的 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.usernamespring.datasource.password(默认激活 dev profile,见 application.properties

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 安装参考

常见问题

现象 处理方式
图片或音乐加载失败 确认资源位于 music-server/data/imgmusic-server/data/song,并在 music-server 目录下启动后端
音乐无法播放 资源文件可能损坏,请从网盘重新下载并替换

Docker 部署

本地开发可跳过本节。适用于 Linux 服务器部署。

镜像定义放在各应用目录(music-server / music-client / music-manageDockerfile),deploy/docker-compose.yml 只负责编排。

cd deploy
docker compose up --build

启动后:

服务 地址
前台 http://localhost:8080
管理端 http://localhost:8081
API http://localhost:8888

可选环境变量:MYSQL_ROOT_PASSWORDAPI_PUBLIC_URL(前端构建时写入的后端地址,默认 http://localhost:8888)。


贡献者

感谢所有为本仓库提交过代码与改进建议的贡献者。

Contributors

赞助

如果此项目对你确实有帮助,欢迎给我打赏一杯咖啡~

微信打赏二维码


联系方式

1、邮箱📮:yinhongwei96@126.com

2、微信公众号

微信公众号 YinHongwei


Git History

Star History Chart

License

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license. Commercial use is not permitted.

Copyright (c) 2018 Yin-Hongwei

About

🎧 Vue + SpringBoot + MyBatis 音乐网站

Topics

Resources

Stars

6.7k stars

Watchers

39 watching

Forks

Releases

Packages

Used by

Contributors

Languages