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 |