抽奖系统
一个基于React + Node.js + SQLite的抽奖系统，支持多浏览器数据同步。
功能特点
- ✅ 统一数据库: 使用SQLite数据库，确保所有浏览器访问相同数据
- ✅ 实时同步: 前后端分离架构，数据实时同步
- ✅ 多浏览器支持: 不同浏览器访问显示相同的抽奖数据
- ✅ 管理功能: 完整的后台管理系统
- ✅ 抽奖记录: 完整的抽奖历史记录
快速开始
方式一：使用启动脚本（推荐）
# 一键启动前后端服务
./start.sh
方式二：手动启动
- 安装依赖：
npm install
- 启动后端服务器：
node server/index.js
- 启动前端开发服务器：
npm run dev
访问地址
- 前端页面: http://localhost:5173
- 后端API: http://localhost:3001
- 管理页面: http://localhost:5173/admin
数据库说明
系统使用SQLite数据库存储所有数据，数据库文件位于：/server/lottery.db
数据表结构
system_config: 系统配置prizes: 奖项信息students: 学生抽奖记录records: 抽奖历史记录
多浏览器测试
- 在Chrome中打开: http://localhost:5173
- 在Firefox中打开: http://localhost:5173
- 在Safari中打开: http://localhost:5173
所有浏览器将显示相同的数据，确保数据一致性。
默认配置
- 管理员密码:
123456 - 登录密码:
123456 - 最大抽奖次数:
1
技术栈
- 前端: React 18 + TypeScript + Vite + Tailwind CSS
- 后端: Node.js + Express + SQLite3
- 状态管理: Zustand
- 数据库: SQLite
故障排除
前端无法连接后端
- 确保后端服务器正在运行（端口3001）
- 检查CORS配置
- 确认防火墙设置
数据不同步
- 确认所有浏览器都访问同一个前端地址
- 检查后端数据库文件是否存在
- 清除浏览器缓存后重试
端口冲突
- 前端默认端口: 5173
- 后端默认端口: 3001
如需修改端口，请编辑相应的配置文件。