96 lines
2.1 KiB
Markdown
96 lines
2.1 KiB
Markdown
# 抽奖系统
|
||
|
||
一个基于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
|
||
|
||
如需修改端口，请编辑相应的配置文件。 |