# Congratulation

**Repository Path**: lanxiaoxs/congratulation

## Basic Information

- **Project Name**: Congratulation
- **Description**: 毕业典礼的一个简短的抽奖活动
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-23
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎓 高三毕业典礼抽奖系统

一个专为高三毕业典礼设计的在线抽奖系统，支持多人同时抽奖、实时统计和大屏幕展示。

## ✨ 功能特性

### 🎯 核心功能
- **扫码入场**：通过二维码快速进入抽奖页面
- **防重复抽奖**：每人仅限一次，重复抽奖结果相同
- **智能奖项分配**：
  - 特等奖：5个
  - 一等奖：10个  
  - 二等奖：15个
  - 三等奖：无限（参与即有）
- **实时库存管理**：自动跟踪奖项剩余数量

### 🎨 用户界面
- **响应式设计**：适配手机、平板、电脑各种设备
- **动画效果**：
  - 入场动画（GIF占位）
  - 抽奖动画（GIF占位）
  - 庆祝特效
- **流畅体验**：单页面应用式交互

### 📊 管理功能
- **实时监控**：参与人数、奖项剩余、中奖分布
- **大屏幕展示**：专门的大屏幕页面，实时更新
- **数据导出**：支持CSV格式导出中奖名单
- **系统管理**：重置系统、清除缓存

## 🚀 快速开始

### 环境要求
- Node.js 18+ 
- npm 或 yarn
- SQLite3（已包含在依赖中）

### 安装步骤

1. **克隆项目**
```bash
git clone <your-repo-url>
cd congratulation
```

2. **安装依赖**
```bash
npm install
```

3. **构建CSS**
```bash
npm run build:css
```

4. **启动开发服务器**
```bash
npm run dev
```

5. **访问应用**
- 用户界面：http://localhost:3000
- 管理后台：http://localhost:3000/admin
- 大屏幕：http://localhost:3000/screen

## 🌐 部署到Render

### 一键部署
1. 注册 [Render](https://render.com) 账号
2. 连接你的Git仓库
3. 选择 `congratulation` 项目
4. Render会自动检测 `render.yaml` 配置
5. 点击部署，等待完成

### 部署后配置
1. 获取免费域名：`https://your-app.onrender.com`
2. 生成二维码并打印在大屏幕上
3. 测试完整流程

## 📱 使用流程

### 用户端流程
1. **扫描二维码** → 进入入场动画页面
2. **观看动画** → 5秒后自动跳转
3. **输入姓名** → 2-4个中文字符
4. **点击抽奖** → 观看抽奖动画
5. **查看结果** → 显示中奖等级
6. **分享结果** → 可选分享到社交平台

### 管理端流程
1. **访问管理后台**：`/admin`
2. **实时监控**：查看参与人数、奖项剩余
3. **大屏幕展示**：`/screen` 用于现场展示
4. **数据管理**：导出中奖名单、重置系统

## 🗄️ 数据库结构

### lottery_users 表
```sql
id           INTEGER PRIMARY KEY AUTOINCREMENT
name         TEXT UNIQUE NOT NULL    -- 用户姓名（唯一）
prize        TEXT NOT NULL           -- 中奖项等级
created_at   TIMESTAMP DEFAULT CURRENT_TIMESTAMP
```

### lottery_prizes 表
```sql
prize_id     INTEGER PRIMARY KEY AUTOINCREMENT
prize_name   TEXT NOT NULL           -- 奖项名称
total_count  INTEGER NOT NULL        -- 总数量
remaining    INTEGER NOT NULL        -- 剩余数量
updated_at   TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
```

## 🔧 技术架构

### 前端技术栈
- **服务端渲染**：Express.js + EJS模板
- **样式框架**：Tailwind CSS
- **动画效果**：CSS动画 + JavaScript
- **交互逻辑**：原生JavaScript + Fetch API

### 后端技术栈
- **运行时**：Node.js
- **Web框架**：Express.js
- **数据库**：SQLite3
- **模板引擎**：EJS

### 部署架构
- **平台**：Render（免费云服务）
- **数据库**：Render PostgreSQL（免费512MB）
- **静态文件**：同服务器部署
- **SSL证书**：自动提供

## 🎨 自定义配置

### 替换动画文件
1. **入场动画**：替换 `public/images/entry-animation.gif`
2. **抽奖动画**：替换 `public/images/lottery-animation.gif`

### 修改样式
1. 编辑 `public/css/input.css`
2. 运行 `npm run build:css`
3. 或使用 `npm run watch:css` 实时编译

### 修改奖项设置
1. 编辑 `db/database.js` 中的 `initializePrizes` 函数
2. 修改奖项名称和数量

## 📈 性能优化

### 已实施的优化
- **数据库索引**：姓名字段唯一索引
- **内存缓存**：使用sessionStorage缓存用户结果
- **懒加载**：图片和脚本按需加载
- **压缩传输**：GZIP压缩静态资源

### 建议的优化
- **CDN加速**：静态资源使用CDN
- **数据库优化**：定期清理旧数据
- **缓存策略**：添加Redis缓存层

## 🔒 安全措施

### 数据安全
- **输入验证**：前后端双重验证
- **SQL防注入**：使用参数化查询
- **XSS防护**：EJS自动转义
- **CSRF防护**：添加CSRF令牌

### 访问控制
- **管理后台**：建议添加密码保护
- **API限流**：防止暴力请求
- **IP限制**：可选IP白名单

## 🐛 故障排除

### 常见问题

**Q: 数据库连接失败**
```bash
# 检查SQLite文件权限
chmod 666 lottery.db
```

**Q: CSS样式不生效**
```bash
# 重新构建CSS
npm run build:css
```

**Q: 端口被占用**
```bash
# 修改server.js中的端口号
const PORT = process.env.PORT || 3001;
```

**Q: Render部署后无法访问**
- 检查Render服务状态
- 查看部署日志
- 确保 `render.yaml` 配置正确

### 日志查看
```bash
# 查看应用日志
npm run dev  # 开发环境
# 或查看Render控制台日志
```

## 📝 开发说明

### 项目结构
```
congratulation/
├── server.js              # 主服务器文件
├── package.json          # 依赖配置
├── render.yaml           # Render部署配置
├── tailwind.config.js    # Tailwind配置
├── db/                   # 数据库模块
│   └── database.js
├── routes/               # 路由模块
│   ├── index.js
│   ├── lottery.js
│   ├── admin.js
│   └── api.js
├── views/                # 视图模板
│   ├── index.ejs
│   ├── name-input.ejs
│   ├── lottery.ejs
│   ├── result.ejs
│   ├── screen.ejs
│   ├── admin.ejs
│   └── error.ejs
├── public/               # 静态资源
│   ├── css/
│   │   ├── input.css
│   │   └── style.css
│   ├── js/
│   │   ├── entry.js
│   │   ├── name-input.js
│   │   ├── lottery.js
│   │   ├── result.js
│   │   ├── screen.js
│   │   └── admin.js
│   └── images/
│       ├── entry-animation.gif    # 待替换
│       └── lottery-animation.gif  # 待替换
└── README.md             # 项目文档
```

### 开发命令
```bash
# 开发模式（带热重载）
npm run dev

# 生产模式
npm start

# 构建CSS
npm run build:css

# 监听CSS变化
npm run watch:css
```

## 🤝 贡献指南

1. Fork项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🙏 致谢

感谢所有为这个项目做出贡献的人！

---

**温馨提示**：活动前请务必进行充分测试，确保系统稳定运行。祝毕业典礼圆满成功！🎓🎉

如有问题或建议，请通过GitHub Issues反馈。