138 lines
3.3 KiB
Markdown
138 lines
3.3 KiB
Markdown
|
# 短视频展示平台
|
|||
|
|
|
|||
|
|
一个现代化的短视频展示平台，支持自适应布局、弹幕功能和后台管理。
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 前端功能
|
|||
|
|
- ✅ 响应式设计，完美适配桌面端和移动端
|
|||
|
|
- ✅ 主流视频平台风格的UI设计
|
|||
|
|
- ✅ 首页视频推荐展示
|
|||
|
|
- ✅ 分类筛选（推荐、热门、萌宠、美食、旅行、科技、风景）
|
|||
|
|
- ✅ 视频播放页面
|
|||
|
|
- ✅ 实时弹幕系统
|
|||
|
|
- ✅ 弹幕颜色选择
|
|||
|
|
- ✅ 点赞功能
|
|||
|
|
- WebSocket实时弹幕推送
|
|||
|
|
|
|||
|
|
### 后台管理
|
|||
|
|
- ✅ 管理员登录认证
|
|||
|
|
- ✅ 视频管理（增删改查）
|
|||
|
|
- ✅ 数据统计面板
|
|||
|
|
- ✅ 视频列表管理
|
|||
|
|
|
|||
|
|
### 技术栈
|
|||
|
|
- **前端**: HTML5 + CSS3 + JavaScript (原生)
|
|||
|
|
- **后端**: Node.js + Express
|
|||
|
|
- **实时通信**: WebSocket
|
|||
|
|
- **数据存储**: JSON文件（可轻松迁移至数据库）
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 启动服务
|
|||
|
|
```bash
|
|||
|
|
# 方式1: 使用启动脚本
|
|||
|
|
./start.sh
|
|||
|
|
|
|||
|
|
# 方式2: 直接运行
|
|||
|
|
node app.js
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 访问地址
|
|||
|
|
- **前台首页**: http://localhost:16035
|
|||
|
|
- **后台管理**: http://localhost:16035/admin
|
|||
|
|
|
|||
|
|
### 默认管理员账号
|
|||
|
|
- 用户名: `admin`
|
|||
|
|
- 密码: `admin123`
|
|||
|
|
|
|||
|
|
## 停止服务
|
|||
|
|
```bash
|
|||
|
|
./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` 常量：
|
|||
|
|
```javascript
|
|||
|
|
const PORT = 16035;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 修改管理员密码
|
|||
|
|
首次运行后，编辑 `data/users.json` 文件。
|
|||
|
|
|
|||
|
|
## 浏览器兼容性
|
|||
|
|
|
|||
|
|
- Chrome 80+
|
|||
|
|
- Firefox 75+
|
|||
|
|
- Safari 13+
|
|||
|
|
- Edge 80+
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 生产环境建议使用反向代理（如 Nginx）
|
|||
|
|
2. 建议迁移到数据库存储（如 MongoDB、MySQL）
|
|||
|
|
3. 建议添加HTTPS支持
|
|||
|
|
4. 建议添加视频上传功能
|
|||
|
|
5. 建议添加用户注册登录系统
|
|||
|
|
|
|||
|
|
## License
|
|||
|
|
|
|||
|
|
MIT
|