抽奖系统

一个基于React + Node.js + SQLite的抽奖系统，支持多浏览器数据同步。

功能特点

• ✅ 统一数据库: 使用SQLite数据库，确保所有浏览器访问相同数据
• ✅ 实时同步: 前后端分离架构，数据实时同步
• ✅ 多浏览器支持: 不同浏览器访问显示相同的抽奖数据
• ✅ 管理功能: 完整的后台管理系统
• ✅ 抽奖记录: 完整的抽奖历史记录

快速开始

方式一：使用启动脚本（推荐）

# 一键启动前后端服务
./start.sh

方式二：手动启动

1. 安装依赖：

npm install

2. 启动后端服务器：

node server/index.js

3. 启动前端开发服务器：

npm run dev

访问地址

• 前端页面: http://localhost:5173
• 后端API: http://localhost:3001
• 管理页面: http://localhost:5173/admin

数据库说明

系统使用SQLite数据库存储所有数据，数据库文件位于：/server/lottery.db

数据表结构

• system_config: 系统配置
• prizes: 奖项信息
• students: 学生抽奖记录
• records: 抽奖历史记录

多浏览器测试

1. 在Chrome中打开: http://localhost:5173
2. 在Firefox中打开: http://localhost:5173
3. 在Safari中打开: http://localhost:5173

所有浏览器将显示相同的数据，确保数据一致性。

默认配置

• 管理员密码: 123456
• 登录密码: 123456
• 最大抽奖次数: 1

技术栈

• 前端: React 18 + TypeScript + Vite + Tailwind CSS
• 后端: Node.js + Express + SQLite3
• 状态管理: Zustand
• 数据库: SQLite

故障排除

前端无法连接后端

1. 确保后端服务器正在运行（端口3001）
2. 检查CORS配置
3. 确认防火墙设置

数据不同步

1. 确认所有浏览器都访问同一个前端地址
2. 检查后端数据库文件是否存在
3. 清除浏览器缓存后重试

端口冲突

• 前端默认端口: 5173
• 后端默认端口: 3001

如需修改端口，请编辑相应的配置文件。