🎵 音乐展示平台

一个功能完整的音乐展示平台,支持桌面端和手机端自适应展示,模仿主流音乐平台风格设计。

功能特性

前台功能

  • 🎨 响应式设计 - 桌面端和手机端自适应展示
  • 🏠 首页展示 - 轮播图、推荐歌单、热门歌曲、新碟上架、热门歌手
  • 🎵 歌曲播放 - 底部播放器,支持播放/暂停、上下首切换、进度拖动、音量控制
  • 📝 歌词同步 - 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
音乐展示平台
Readme 11 MiB
Languages
JavaScript 71.6%
CSS 23.4%
HTML 5%