245 lines
6.2 KiB
Markdown
245 lines
6.2 KiB
Markdown
# 点名系统
|
||
|
||
一个基于Web的点名系统，支持后台管理和用户点名功能。**支持双模式运行：服务器模式和本地模式**。
|
||
|
||
## 🌟 核心特性
|
||
|
||
### 双模式运行
|
||
- **服务器模式**：通过Node.js服务器运行，支持多用户、数据持久化
|
||
- **本地模式**：直接打开HTML文件，使用浏览器localStorage存储，无需服务器
|
||
|
||
### 功能特性
|
||
- 管理员登录（默认账号：admin / admin123）
|
||
- 创建点名名单，自动生成编号和二维码
|
||
- 用户通过编号或二维码进入点名
|
||
- 实时进度条显示
|
||
- 拍照点名（支持人脸识别）
|
||
- 手动点名
|
||
- 数据实时同步
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 方式一：本地模式（推荐新手）
|
||
|
||
**无需安装Node.js，直接使用！**
|
||
|
||
1. **打开后台管理**
|
||
- 直接双击 `admin.html` 文件
|
||
- 或在浏览器中打开 `admin.html`
|
||
|
||
2. **登录系统**
|
||
- 用户名: `admin`
|
||
- 密码: `admin123`
|
||
|
||
3. **创建点名名单**
|
||
- 输入名单名称和成员
|
||
- 系统自动生成编号和二维码
|
||
|
||
4. **用户点名**
|
||
- 打开 `index.html`
|
||
- 输入编号进入点名
|
||
|
||
**优点**：
|
||
- ✅ 无需安装任何软件
|
||
- ✅ 即开即用
|
||
- ✅ 数据保存在浏览器本地
|
||
|
||
**注意**：
|
||
- ⚠️ 数据仅保存在当前浏览器
|
||
- ⚠️ 清除浏览器数据会丢失记录
|
||
- ⚠️ 不同浏览器/电脑数据不共享
|
||
|
||
### 方式二：服务器模式（推荐正式使用）
|
||
|
||
**需要Node.js环境**
|
||
|
||
1. **启动服务器**
|
||
```bash
|
||
# 方法1: 使用批处理文件
|
||
双击 "启动服务器.bat"
|
||
|
||
# 方法2: 命令行启动
|
||
cd 手机点名器
|
||
node server.js
|
||
```
|
||
|
||
2. **访问系统**
|
||
- 后台管理: http://localhost:3000/admin.html
|
||
- 用户点名: http://localhost:3000/index.html
|
||
|
||
3. **登录系统**
|
||
- 用户名: `admin`
|
||
- 密码: `admin123`
|
||
|
||
**优点**：
|
||
- ✅ 数据持久化到文件
|
||
- ✅ 支持多用户访问
|
||
- ✅ 数据不会丢失
|
||
- ✅ 可以在局域网使用
|
||
|
||
## 📖 详细使用说明
|
||
|
||
### 后台管理操作
|
||
|
||
1. **创建点名名单**
|
||
- 输入名单名称（如："2024春季班点名"）
|
||
- 输入成员名单（每行一个姓名）
|
||
- 点击"生成"按钮
|
||
- 系统自动生成编号和二维码
|
||
|
||
2. **管理名单**
|
||
- 查看二维码：显示编号和二维码
|
||
- 编辑：修改名单名称和成员
|
||
- 删除：删除整个名单
|
||
|
||
3. **查看记录**
|
||
- 查看所有点名记录
|
||
- 显示点名时间、名单、编号
|
||
|
||
### 用户点名操作
|
||
|
||
1. **进入点名**
|
||
- 方式1：输入编号
|
||
- 方式2：扫描二维码（需摄像头）
|
||
- 方式3：直接访问带参数的URL
|
||
|
||
2. **点名方式**
|
||
- **拍照点名**：开启摄像头拍照，系统自动识别
|
||
- **手动点名**：从下拉列表选择姓名
|
||
|
||
3. **查看进度**
|
||
- 实时进度条显示
|
||
- 已点名/总人数统计
|
||
- 成员状态标记
|
||
|
||
## 🔄 模式自动切换
|
||
|
||
系统会自动检测运行环境：
|
||
|
||
| 访问方式 | 运行模式 | 数据存储 |
|
||
|---------|---------|---------|
|
||
| 双击HTML文件 | 本地模式 | localStorage |
|
||
| file://协议 | 本地模式 | localStorage |
|
||
| http://localhost | 服务器模式 | 服务器文件 |
|
||
| http://域名 | 服务器模式 | 服务器文件 |
|
||
|
||
## 📁 文件结构
|
||
|
||
```
|
||
手机点名器/
|
||
├── server.js # Node.js后端服务器
|
||
├── package.json # 项目配置
|
||
├── storage.js # 通用数据存储模块（核心）
|
||
├── admin.html # 后台管理页面
|
||
├── index.html # 用户点名页面
|
||
├── styles.css # 共享样式
|
||
├── admin.js # 后台管理逻辑
|
||
├── index.js # 用户点名逻辑
|
||
├── qrcode.js # 本地二维码生成器
|
||
├── 启动服务器.bat # Windows启动脚本
|
||
├── 启动说明.md # 启动说明
|
||
├── data_lists.json # 点名列表数据（服务器模式）
|
||
├── data_records.json # 点名记录数据（服务器模式）
|
||
├── idea.md # 需求文档
|
||
└── README.md # 使用说明
|
||
```
|
||
|
||
## 🛠️ 技术架构
|
||
|
||
### 前端
|
||
- 纯HTML/CSS/JavaScript
|
||
- 无框架依赖
|
||
- 响应式设计
|
||
- 本地二维码生成
|
||
|
||
### 后端（可选）
|
||
- Node.js原生HTTP服务器
|
||
- RESTful API设计
|
||
- 文件系统数据存储
|
||
- CORS支持
|
||
|
||
### 数据存储
|
||
- **本地模式**：浏览器localStorage
|
||
- **服务器模式**：JSON文件持久化
|
||
|
||
## 📝 API接口文档（服务器模式）
|
||
|
||
### 登录
|
||
- **URL**: `/api/login`
|
||
- **方法**: POST
|
||
- **参数**: `{ username, password }`
|
||
|
||
### 创建点名名单
|
||
- **URL**: `/api/create-list`
|
||
- **方法**: POST
|
||
- **参数**: `{ name, members: [] }`
|
||
|
||
### 获取所有名单
|
||
- **URL**: `/api/get-lists`
|
||
- **方法**: GET
|
||
|
||
### 获取单个名单
|
||
- **URL**: `/api/get-list?code=xxx`
|
||
- **方法**: GET
|
||
|
||
### 更新名单
|
||
- **URL**: `/api/update-list`
|
||
- **方法**: POST
|
||
- **参数**: `{ id, name, members: [] }`
|
||
|
||
### 删除名单
|
||
- **URL**: `/api/delete-list`
|
||
- **方法**: POST
|
||
- **参数**: `{ id }`
|
||
|
||
### 点名
|
||
- **URL**: `/api/roll-call`
|
||
- **方法**: POST
|
||
- **参数**: `{ code, name }`
|
||
|
||
### 获取点名记录
|
||
- **URL**: `/api/get-records`
|
||
- **方法**: GET
|
||
|
||
## ❓ 常见问题
|
||
|
||
### Q1: 本地模式下数据会丢失吗？
|
||
A: 数据保存在浏览器localStorage中，除非清除浏览器数据，否则不会丢失。
|
||
|
||
### Q2: 可以在不同电脑上使用吗？
|
||
A:
|
||
- 本地模式：每台电脑独立数据，不共享
|
||
- 服务器模式：可以通过局域网IP访问，数据共享
|
||
|
||
### Q3: 如何在手机上使用？
|
||
A:
|
||
- 本地模式：将HTML文件传到手机，用浏览器打开
|
||
- 服务器模式：通过局域网IP访问（如 http://192.168.1.100:3000）
|
||
|
||
### Q4: 服务器模式如何停止？
|
||
A: 在命令行窗口按 Ctrl+C 或关闭窗口
|
||
|
||
### Q5: 端口被占用怎么办？
|
||
A: 修改 server.js 中的 `const PORT = 3000;` 为其他端口
|
||
|
||
## 🔧 扩展建议
|
||
|
||
1. 集成真实的人脸识别API
|
||
2. 使用数据库替代文件存储
|
||
3. 实现扫码功能
|
||
4. 添加数据导出功能
|
||
5. 支持批量导入名单
|
||
6. 添加用户权限管理
|
||
7. 实现WebSocket实时通信
|
||
8. 添加日志记录功能
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
---
|
||
|
||
**推荐使用方式**：
|
||
- 🎯 **学习/测试**：使用本地模式，简单快捷
|
||
- 🏢 **正式使用**：使用服务器模式，稳定可靠
|