176 lines
4.6 KiB
Markdown
176 lines
4.6 KiB
Markdown
# 🎵 音乐展示平台
|
||
|
||
一个功能完整的音乐展示平台，支持桌面端和手机端自适应展示，模仿主流音乐平台风格设计。
|
||
|
||
## ✨ 功能特性
|
||
|
||
### 前台功能
|
||
- 🎨 **响应式设计** - 桌面端和手机端自适应展示
|
||
- 🏠 **首页展示** - 轮播图、推荐歌单、热门歌曲、新碟上架、热门歌手
|
||
- 🎵 **歌曲播放** - 底部播放器，支持播放/暂停、上下首切换、进度拖动、音量控制
|
||
- 📝 **歌词同步** - LRC格式歌词实时滚动高亮
|
||
- 🔍 **搜索功能** - 支持歌曲、歌手、专辑搜索
|
||
- 👤 **歌手详情** - 歌手介绍、专辑列表、热门歌曲
|
||
- 💿 **专辑详情** - 专辑信息、歌曲列表
|
||
- 📋 **歌单详情** - 歌单介绍、歌曲列表
|
||
|
||
### 后台管理
|
||
- 📊 **仪表盘** - 数据统计概览
|
||
- 🎵 **歌曲管理** - 添加/编辑/删除歌曲，上传音乐文件和封面
|
||
- 👤 **歌手管理** - 添加/编辑/删除歌手
|
||
- 💿 **专辑管理** - 添加/编辑/删除专辑
|
||
- 📋 **歌单管理** - 添加/编辑/删除歌单
|
||
- 🖼️ **轮播图管理** - 添加/编辑/删除轮播图
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
| 模块 | 技术 |
|
||
|------|------|
|
||
| 后端 | Node.js + Express |
|
||
| 存储 | JSON 文件存储（轻量级，无需数据库） |
|
||
| 前端 | 原生 HTML/CSS/JavaScript |
|
||
| 图标 | Font Awesome 6.4.0 |
|
||
|
||
## 📦 安装部署
|
||
|
||
### 1. 克隆项目
|
||
|
||
```bash
|
||
git clone http://121.40.164.32:12007/hz4th_coder/music-platform.git
|
||
cd music-platform
|
||
```
|
||
|
||
### 2. 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 3. 启动服务
|
||
|
||
```bash
|
||
# 默认端口 16031
|
||
node server.js
|
||
|
||
# 或指定端口
|
||
PORT=16032 node server.js
|
||
```
|
||
|
||
### 4. 后台启动（推荐）
|
||
|
||
```bash
|
||
nohup node server.js > music-platform.log 2>&1 &
|
||
```
|
||
|
||
### 5. 访问服务
|
||
|
||
- 前台：http://服务器IP:16032
|
||
- 后台管理：http://服务器IP:16032/admin
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
music-platform/
|
||
├── server.js # 服务端主程序
|
||
├── data.json # 数据存储文件（自动生成）
|
||
├── package.json # 项目配置
|
||
├── public/ # 前端静态文件
|
||
│ ├── index.html # 前台首页
|
||
│ ├── admin.html # 后台管理页
|
||
│ ├── css/
|
||
│ │ ├── style.css # 前台样式
|
||
│ │ └── admin.css # 后台样式
|
||
│ └── js/
|
||
│ ├── app.js # 前台逻辑
|
||
│ └── admin.js # 后台逻辑
|
||
└── uploads/ # 上传文件目录
|
||
├── music/ # 音乐文件
|
||
└── covers/ # 封面图片
|
||
```
|
||
|
||
## 🔌 API 接口
|
||
|
||
### 前台接口
|
||
|
||
| 方法 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| GET | `/api/home` | 获取首页数据 |
|
||
| GET | `/api/songs` | 获取歌曲列表 |
|
||
| GET | `/api/songs/:id` | 获取歌曲详情 |
|
||
| POST | `/api/songs/:id/play` | 增加播放次数 |
|
||
| GET | `/api/artists` | 获取歌手列表 |
|
||
| GET | `/api/artists/:id` | 获取歌手详情 |
|
||
| GET | `/api/albums` | 获取专辑列表 |
|
||
| GET | `/api/albums/:id` | 获取专辑详情 |
|
||
| GET | `/api/playlists` | 获取歌单列表 |
|
||
| GET | `/api/playlists/:id` | 获取歌单详情 |
|
||
| GET | `/api/search?q=关键词` | 搜索 |
|
||
|
||
### 后台管理接口
|
||
|
||
| 方法 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| GET | `/api/admin/stats` | 获取统计数据 |
|
||
| GET/POST/PUT/DELETE | `/api/admin/songs` | 歌曲 CRUD |
|
||
| GET/POST/PUT/DELETE | `/api/admin/artists` | 歌手 CRUD |
|
||
| GET/POST/PUT/DELETE | `/api/admin/albums` | 专辑 CRUD |
|
||
| GET/POST/PUT/DELETE | `/api/admin/playlists` | 歌单 CRUD |
|
||
| GET/POST/PUT/DELETE | `/api/admin/banners` | 轮播图 CRUD |
|
||
| POST | `/api/admin/upload/music` | 上传音乐文件 |
|
||
| POST | `/api/admin/upload/cover` | 上传封面图片 |
|
||
|
||
## 📱 界面预览
|
||
|
||
### 首页
|
||
- 轮播图展示
|
||
- 推荐歌单
|
||
- 热门推荐歌曲
|
||
- 新碟上架
|
||
- 热门歌手
|
||
|
||
### 播放器
|
||
- 底部固定播放器
|
||
- 歌曲封面、名称、歌手
|
||
- 播放/暂停、上一首/下一首
|
||
- 进度条显示与拖动
|
||
- 音量控制
|
||
- 歌词面板（可展开/收起）
|
||
|
||
### 后台管理
|
||
- 侧边栏导航
|
||
- 数据统计卡片
|
||
- 表格列表展示
|
||
- 模态框表单
|
||
|
||
## 🔧 开发分支
|
||
|
||
项目使用 Git Flow 分支管理：
|
||
|
||
- `master` - 生产分支（稳定版本）
|
||
- `develop` - 开发分支（新功能开发）
|
||
|
||
```bash
|
||
# 切换到开发分支
|
||
git checkout develop
|
||
|
||
# 开发环境使用不同端口
|
||
cd music-platform-dev
|
||
PORT=16033 node server.js
|
||
```
|
||
|
||
## 📝 版本历史
|
||
|
||
- **v1.0.0** - 初始版本
|
||
- 响应式设计
|
||
- 完整的音乐播放功能
|
||
- 歌词同步滚动
|
||
- 后台管理系统
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
## 👤 作者
|
||
|
||
黄庄4号程序员 - hz4th_coder@tphai.com
|