dianming/README.md

点名系统

一个基于Web的点名系统，支持后台管理和用户点名功能。支持双模式运行：服务器模式和本地模式。

🌟 核心特性

双模式运行

• 服务器模式：通过Node.js服务器运行，支持多用户、数据持久化
• 本地模式：直接打开HTML文件，使用浏览器localStorage存储，无需服务器

功能特性

• 管理员登录（默认账号：admin / admin123）
• 创建点名名单，自动生成编号和二维码
• 用户通过编号或二维码进入点名
• 实时进度条显示
• 拍照点名（支持人脸识别）
• 手动点名
• 数据实时同步

🚀 快速开始

方式一：本地模式（推荐新手）

无需安装Node.js，直接使用！

1. 打开后台管理

   • 直接双击 admin.html 文件
   • 或在浏览器中打开 admin.html

2. 登录系统

   • 用户名: admin
   • 密码: admin123

3. 创建点名名单

   • 输入名单名称和成员
   • 系统自动生成编号和二维码

4. 用户点名

   • 打开 index.html
   • 输入编号进入点名

优点：

• ✅ 无需安装任何软件
• ✅ 即开即用
• ✅ 数据保存在浏览器本地

注意：

• ⚠️ 数据仅保存在当前浏览器
• ⚠️ 清除浏览器数据会丢失记录
• ⚠️ 不同浏览器/电脑数据不共享

方式二：服务器模式（推荐正式使用）

需要Node.js环境

1. 启动服务器

   # 方法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

---

推荐使用方式：

• 🎯 学习/测试：使用本地模式，简单快捷
• 🏢 正式使用：使用服务器模式，稳定可靠