First
This commit is contained in:
Harry
GitHub
244
README.md
Normal file
244
README.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# 点名系统
|
||||
|
||||
一个基于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
|
||||
|
||||
---
|
||||
|
||||
**推荐使用方式**：
|
||||
- 🎯 **学习/测试**：使用本地模式，简单快捷
|
||||
- 🏢 **正式使用**：使用服务器模式，稳定可靠
|
||||
Reference in New Issue
Block a user