🎵 音乐展示平台
一个功能完整的音乐展示平台,支持桌面端和手机端自适应展示,模仿主流音乐平台风格设计。
✨ 功能特性
前台功能
- 🎨 响应式设计 - 桌面端和手机端自适应展示
- 🏠 首页展示 - 轮播图、推荐歌单、热门歌曲、新碟上架、热门歌手
- 🎵 歌曲播放 - 底部播放器,支持播放/暂停、上下首切换、进度拖动、音量控制
- 📝 歌词同步 - LRC格式歌词实时滚动高亮
- 🔍 搜索功能 - 支持歌曲、歌手、专辑搜索
- 👤 歌手详情 - 歌手介绍、专辑列表、热门歌曲
- 💿 专辑详情 - 专辑信息、歌曲列表
- 📋 歌单详情 - 歌单介绍、歌曲列表
后台管理
- 📊 仪表盘 - 数据统计概览
- 🎵 歌曲管理 - 添加/编辑/删除歌曲,上传音乐文件和封面
- 👤 歌手管理 - 添加/编辑/删除歌手
- 💿 专辑管理 - 添加/编辑/删除专辑
- 📋 歌单管理 - 添加/编辑/删除歌单
- 🖼️ 轮播图管理 - 添加/编辑/删除轮播图
🛠️ 技术栈
| 模块 | 技术 |
|---|---|
| 后端 | Node.js + Express |
| 存储 | JSON 文件存储(轻量级,无需数据库) |
| 前端 | 原生 HTML/CSS/JavaScript |
| 图标 | Font Awesome 6.4.0 |
📦 安装部署
1. 克隆项目
git clone http://121.40.164.32:12007/hz4th_coder/music-platform.git
cd music-platform
2. 安装依赖
npm install
3. 启动服务
# 默认端口 16031
node server.js
# 或指定端口
PORT=16032 node server.js
4. 后台启动(推荐)
nohup node server.js > music-platform.log 2>&1 &
5. 访问服务
📁 项目结构
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- 开发分支(新功能开发)
# 切换到开发分支
git checkout develop
# 开发环境使用不同端口
cd music-platform-dev
PORT=16033 node server.js
📝 版本历史
- v1.0.0 - 初始版本
- 响应式设计
- 完整的音乐播放功能
- 歌词同步滚动
- 后台管理系统
📄 许可证
MIT License
👤 作者
黄庄4号程序员 - hz4th_coder@tphai.com
Description
Languages
JavaScript
71.6%
CSS
23.4%
HTML
5%