# 抽奖系统

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

## 功能特点

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

## 快速开始

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

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

### 方式二：手动启动

1. 安装依赖：
```bash
npm install
```

2. 启动后端服务器：
```bash
node server/index.js
```

3. 启动前端开发服务器：
```bash
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

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