3.3 KiB
3.3 KiB
短视频展示平台
一个现代化的短视频展示平台,支持自适应布局、弹幕功能和后台管理。
功能特性
前端功能
- ✅ 响应式设计,完美适配桌面端和移动端
- ✅ 主流视频平台风格的UI设计
- ✅ 首页视频推荐展示
- ✅ 分类筛选(推荐、热门、萌宠、美食、旅行、科技、风景)
- ✅ 视频播放页面
- ✅ 实时弹幕系统
- ✅ 弹幕颜色选择
- ✅ 点赞功能
- WebSocket实时弹幕推送
后台管理
- ✅ 管理员登录认证
- ✅ 视频管理(增删改查)
- ✅ 数据统计面板
- ✅ 视频列表管理
技术栈
- 前端: HTML5 + CSS3 + JavaScript (原生)
- 后端: Node.js + Express
- 实时通信: WebSocket
- 数据存储: JSON文件(可轻松迁移至数据库)
快速开始
安装依赖
npm install
启动服务
# 方式1: 使用启动脚本
./start.sh
# 方式2: 直接运行
node app.js
访问地址
- 前台首页: http://localhost:16035
- 后台管理: http://localhost:16035/admin
默认管理员账号
- 用户名:
admin - 密码:
admin123
停止服务
./stop.sh
项目结构
video-platform/
├── app.js # 主程序入口
├── package.json # 项目配置
├── start.sh # 启动脚本
├── stop.sh # 停止脚本
├── public/ # 静态文件
│ ├── index.html # 首页
│ ├── video.html # 视频播放页
│ ├── admin-login.html # 后台登录页
│ ├── admin-panel.html # 后台管理面板
│ ├── css/
│ │ └── style.css # 样式文件
│ └── js/
│ ├── app.js # 主逻辑
│ └── player.js # 播放器和弹幕逻辑
├── data/ # 数据存储
│ ├── videos.json # 视频数据
│ ├── users.json # 用户数据
│ └── comments.json # 弹幕数据
├── logs/ # 日志目录
└── views/ # 视图模板(预留)
API接口
前台API
GET /api/videos- 获取视频列表GET /api/videos/:id- 获取单个视频详情POST /api/videos/:id/like- 点赞视频GET /api/videos/:id/danmaku- 获取弹幕列表POST /api/videos/:id/danmaku- 发送弹幕
后台API
POST /api/admin/login- 管理员登录POST /api/admin/logout- 管理员登出GET /api/admin/check- 检查登录状态POST /api/admin/videos- 添加视频PUT /api/admin/videos/:id- 更新视频DELETE /api/admin/videos/:id- 删除视频
弹幕系统
弹幕通过WebSocket实现实时推送:
- 支持自定义颜色
- 随机垂直位置
- 平滑滚动动画
- 时间同步播放
自定义配置
修改端口
在 app.js 中修改 PORT 常量:
const PORT = 16035;
修改管理员密码
首次运行后,编辑 data/users.json 文件。
浏览器兼容性
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
注意事项
- 生产环境建议使用反向代理(如 Nginx)
- 建议迁移到数据库存储(如 MongoDB、MySQL)
- 建议添加HTTPS支持
- 建议添加视频上传功能
- 建议添加用户注册登录系统
License
MIT