226 lines
4.5 KiB
Markdown
226 lines
4.5 KiB
Markdown
|
# Django弹幕活动应用实现计划
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
danmu_activity/
|
|||
|
|
├── danmu_activity/ # 项目配置目录
|
|||
|
|
│ ├── __init__.py
|
|||
|
|
│ ├── settings.py
|
|||
|
|
│ ├── urls.py
|
|||
|
|
│ └── wsgi.py
|
|||
|
|
├── activity/ # 主应用
|
|||
|
|
│ ├── __init__.py
|
|||
|
|
│ ├── admin.py
|
|||
|
|
│ ├── apps.py
|
|||
|
|
│ ├── models.py # 数据库模型
|
|||
|
|
│ ├── views.py # 视图函数
|
|||
|
|
│ ├── urls.py # 应用路由
|
|||
|
|
│ ├── utils.py # 工具函数（如随机祝福语）
|
|||
|
|
│ ├── static/ # 静态文件
|
|||
|
|
│ │ ├── css/
|
|||
|
|
│ │ ├── js/
|
|||
|
|
│ │ └── media/ # 上传的媒体文件
|
|||
|
|
│ └── templates/ # 模板文件
|
|||
|
|
│ ├── activity/
|
|||
|
|
│ └── admin/
|
|||
|
|
├── manage.py
|
|||
|
|
└── requirements.txt
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
activity/forms.py 定义表单类（提交弹幕表单、活动设置表单、图片上传表单），替代模板原生表单，提升安全性和可维护性
|
|||
|
|
|
|||
|
|
<br />
|
|||
|
|
|
|||
|
|
templates/base.html 基础模板（统一页面布局、引入 Bootstrap/jQuery 公共资源，其他模板继承使用）
|
|||
|
|
templates/404.html 自定义 404 错误页面（提升用户体验）
|
|||
|
|
templates/500.html 自定义 500 错误页面（方便线上问题排查）
|
|||
|
|
|
|||
|
|
## 数据库设计
|
|||
|
|
|
|||
|
|
### 1. 活动设置模型（ActivitySetting）
|
|||
|
|
|
|||
|
|
* 背景图片（ImageField）
|
|||
|
|
|
|||
|
|
* 背景视频（FileField）
|
|||
|
|
|
|||
|
|
* 二维码图片（ImageField）
|
|||
|
|
|
|||
|
|
* 二维码位置（CharField：top-left, top-right, bottom-left, bottom-right, center）
|
|||
|
|
|
|||
|
|
* 弹幕字体颜色（CharField：十六进制颜色码）
|
|||
|
|
|
|||
|
|
* 弹幕背景颜色（CharField：十六进制颜色码）
|
|||
|
|
|
|||
|
|
* 全局背景颜色（CharField：十六进制颜色码）
|
|||
|
|
|
|||
|
|
### 2. 祝福语模型（Blessing）
|
|||
|
|
|
|||
|
|
* 内容（TextField）
|
|||
|
|
|
|||
|
|
### 3. 弹幕消息模型（Danmu）
|
|||
|
|
|
|||
|
|
* 姓名（CharField）
|
|||
|
|
|
|||
|
|
* 祝福语（TextField）
|
|||
|
|
|
|||
|
|
* 图片（ImageField, 可选）
|
|||
|
|
|
|||
|
|
* 审核状态（BooleanField：默认False，未审核）
|
|||
|
|
|
|||
|
|
* 创建时间（DateTimeField）
|
|||
|
|
|
|||
|
|
## 视图设计
|
|||
|
|
|
|||
|
|
### 1. 主页面视图（index）
|
|||
|
|
|
|||
|
|
* 显示全屏背景（图片/视频）
|
|||
|
|
|
|||
|
|
* 显示二维码
|
|||
|
|
|
|||
|
|
* 实时显示已审核通过的弹幕
|
|||
|
|
|
|||
|
|
### 2. 扫码提交视图（submit）
|
|||
|
|
|
|||
|
|
* 显示表单：姓名输入框、祝福语输入框（带5条随机推荐）、图片上传
|
|||
|
|
|
|||
|
|
* 提交后保存到数据库，等待审核
|
|||
|
|
|
|||
|
|
### 3. 管理员审核视图（admin\_review）
|
|||
|
|
|
|||
|
|
* 显示所有未审核的弹幕
|
|||
|
|
|
|||
|
|
* 支持通过/不通过审核
|
|||
|
|
|
|||
|
|
### 4. 设置视图（setting）
|
|||
|
|
|
|||
|
|
* 管理员可设置背景图片/视频、二维码图片、位置、弹幕颜色等
|
|||
|
|
|
|||
|
|
### 5. API视图
|
|||
|
|
|
|||
|
|
* 获取实时弹幕列表（JSON格式）
|
|||
|
|
|
|||
|
|
## 模板设计
|
|||
|
|
|
|||
|
|
### 1. 主页面模板（index.html）
|
|||
|
|
|
|||
|
|
* 全屏布局
|
|||
|
|
|
|||
|
|
* 背景图片/视频自适应
|
|||
|
|
|
|||
|
|
* 二维码定位显示
|
|||
|
|
|
|||
|
|
* 弹幕滚动效果
|
|||
|
|
|
|||
|
|
### 2. 提交表单模板（submit.html）
|
|||
|
|
|
|||
|
|
* 响应式设计，适配手机
|
|||
|
|
|
|||
|
|
* 表单验证
|
|||
|
|
|
|||
|
|
* 随机祝福语推荐
|
|||
|
|
|
|||
|
|
* 图片上传预览
|
|||
|
|
|
|||
|
|
### 3. 审核页面模板（admin\_review\.html）
|
|||
|
|
|
|||
|
|
* 表格展示待审核弹幕
|
|||
|
|
|
|||
|
|
* 操作按钮（通过/不通过）
|
|||
|
|
|
|||
|
|
* 批量审核功能
|
|||
|
|
|
|||
|
|
* 筛选功能
|
|||
|
|
|
|||
|
|
* 时间
|
|||
|
|
|
|||
|
|
### 4. 设置页面模板（setting.html）
|
|||
|
|
|
|||
|
|
* 表单设计，支持文件上传
|
|||
|
|
|
|||
|
|
* 实时预览效果
|
|||
|
|
|
|||
|
|
## 静态资源
|
|||
|
|
|
|||
|
|
### 1. CSS
|
|||
|
|
|
|||
|
|
* 全屏布局样式
|
|||
|
|
|
|||
|
|
* 弹幕滚动动画
|
|||
|
|
|
|||
|
|
* 响应式设计
|
|||
|
|
|
|||
|
|
### 2. JavaScript
|
|||
|
|
|
|||
|
|
* 实时获取弹幕（Ajax轮询）
|
|||
|
|
|
|||
|
|
* 弹幕动画效果，从右向左滑动，多行显示，
|
|||
|
|
|
|||
|
|
* 考虑到有些弹幕包含图片，计算图片的高度和宽度，不遮挡其它文字弹幕
|
|||
|
|
|
|||
|
|
* 表单验证和提交
|
|||
|
|
|
|||
|
|
### 3. 媒体文件
|
|||
|
|
|
|||
|
|
* 默认背景图片
|
|||
|
|
|
|||
|
|
* 默认二维码图片
|
|||
|
|
|
|||
|
|
* 上传的用户图片存储目录
|
|||
|
|
|
|||
|
|
## 工具函数
|
|||
|
|
|
|||
|
|
### 1. 随机祝福语生成
|
|||
|
|
|
|||
|
|
* 从数据库中随机获取5条祝福语
|
|||
|
|
|
|||
|
|
* 提供几百条预设祝福语
|
|||
|
|
|
|||
|
|
### 2. 媒体文件处理
|
|||
|
|
|
|||
|
|
* 图片压缩
|
|||
|
|
|
|||
|
|
* 视频格式验证
|
|||
|
|
|
|||
|
|
## 实现步骤
|
|||
|
|
|
|||
|
|
1. 初始化Django项目
|
|||
|
|
2. 创建应用和基本模型
|
|||
|
|
3. 实现管理员后台配置
|
|||
|
|
4. 添加预设祝福语
|
|||
|
|
5. 实现扫码提交功能
|
|||
|
|
6. 实现主页面弹幕显示
|
|||
|
|
7. 实现管理员审核功能
|
|||
|
|
8. 实现设置页面
|
|||
|
|
9. 添加CSS样式和JavaScript交互
|
|||
|
|
10. 测试和优化
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
* Django 5.2.9
|
|||
|
|
|
|||
|
|
* Bootstrap 5（前端框架）
|
|||
|
|
|
|||
|
|
* jQuery（简化DOM操作）
|
|||
|
|
|
|||
|
|
* SQLite（开发环境数据库）
|
|||
|
|
|
|||
|
|
## 安全考虑
|
|||
|
|
|
|||
|
|
* 图片上传验证和限制
|
|||
|
|
|
|||
|
|
* 管理员页面权限控制
|
|||
|
|
|
|||
|
|
* 防止XSS攻击
|
|||
|
|
|
|||
|
|
* CSRF保护
|
|||
|
|
|
|||
|
|
## 部署考虑
|
|||
|
|
|
|||
|
|
* 静态文件和媒体文件的部署
|
|||
|
|
|
|||
|
|
* 数据库迁移
|
|||
|
|
|
|||
|
|
* 性能优化（如弹幕缓存）
|
|||
|
|
|