数据收集与管理系统
一个基于 Node.js + Express 的前后端一体化 Web 应用，用于收集、管理并展示用户提交的数据，支持图片上传与展示。
功能特性
✅ 用户提交功能
- 填写人名、牌谱链接、备注说明
- 上传多张图片（最多 10 张，单个文件最大 5MB）
- 自动记录提交时间
- 表单字段验证
✅ 管理员功能
- 简单密码认证（默认：admin123）
- 为已有记录补充 Naga 链接和说明
- 自动判断"是否有 Naga 链接"状态
✅ 数据展示
- 类似 Excel 的表格样式
- 图片缩略图预览与模态框查看
- 无需刷新即可更新数据
技术栈
- 后端: Node.js + Express
- 数据存储: JSON 文件（data/data.json）
- 文件上传: Multer
- 前端: 原生 HTML/CSS/JavaScript
- 容器化: Docker（基于官方 node:18 镜像）
项目结构
project/
├── server.js # Express 服务器主文件
├── package.json # 项目依赖配置
├── data/
│ └── data.json # JSON 数据存储文件
├── uploads/ # 图片上传目录
└── public/ # 前端静态文件
├── index.html # 普通访客页面
├── admin.html # 管理员页面
├── style.css # 样式文件
├── main.js # 普通页面脚本
└── admin.js # 管理员页面脚本
快速开始
本地运行
- 安装依赖：
npm install
- 启动服务器：
npm start
- 访问应用：
- 普通访客页面：http://localhost:3000
- 管理员页面：http://localhost:3000/admin.html
Docker 运行（推荐）
方法 1：使用 docker run
# 运行容器并挂载源码目录
docker run -d \
--name data-collection-app \
-p 3000:3000 \
-v $(pwd):/app \
-w /app \
node:18 \
sh -c "npm install && npm start"
方法 2：使用 docker-compose
创建 docker-compose.yml 文件：
version: '3.8'
services:
app:
image: node:18
container_name: data-collection-app
working_dir: /app
volumes:
- .:/app
ports:
- "3000:3000"
command: sh -c "npm install && npm start"
restart: unless-stopped
启动容器：
docker-compose up -d
查看日志：
docker-compose logs -f
停止容器：
docker-compose down
API 接口说明
获取所有记录
GET /api/list
响应示例：
{
"success": true,
"records": [...]
}
提交新记录
POST /api/submit
Content-Type: multipart/form-data
参数：
name: 人名（必填）link: 牌谱链接（必填，URL 格式）note: 备注说明（必填，10-200 字）images: 图片文件（可选，最多 10 张）
响应示例：
{
"success": true,
"message": "提交成功",
"record": {...}
}
更新 Naga 信息（管理员）
POST /api/admin/update
Content-Type: application/json
参数：
{
"id": 1,
"nagaLink": "https://example.com/naga",
"nagaNote": "Naga 说明文字"
}
响应示例：
{
"success": true,
"message": "更新成功",
"record": {...}
}
数据字段说明
每条记录包含以下字段（按顺序）：
| 字段 | 说明 | 填写方 | 类型 |
|---|---|---|---|
| 序号 | 自动生成，从 1 开始递增 | 系统 | Number |
| 提交时间 | 精确到分钟 | 系统 | String |
| 人名 | 提交者姓名 | 用户 | String |
| 牌谱链接 | URL 地址 | 用户 | String (URL) |
| 备注说明 | 10-200 字 | 用户 | String |
| 是否有 Naga | 自动判断 | 系统 | Boolean |
| Naga 链接 | URL 地址 | 管理员 | String (URL) |
| Naga 说明 | 最多 200 字 | 管理员 | String |
| 图片 | 0-10 张图片 | 用户 | Array |
管理员认证
默认管理员密码：admin123
修改密码方法：
编辑 public/admin.js 文件第 2 行：
const ADMIN_PASSWORD = 'your_new_password';
扩展建议
迁移到数据库
如需使用 SQLite 或其他数据库，可以：
- 安装数据库驱动（如
better-sqlite3）：
npm install better-sqlite3
-
修改
server.js中的readData()和writeData()函数 -
创建数据库表结构：
CREATE TABLE records (
id INTEGER PRIMARY KEY AUTOINCREMENT,
submit_time TEXT NOT NULL,
name TEXT NOT NULL,
link TEXT NOT NULL,
note TEXT NOT NULL,
naga_link TEXT,
naga_note TEXT,
images TEXT
);
增强安全性
- 使用环境变量存储密码
- 添加 JWT 或 Session 认证
- 实现 HTTPS
- 添加 CSRF 保护
- 实现文件上传的病毒扫描
性能优化
- 添加缓存机制
- 实现分页加载
- 图片压缩与 CDN 存储
- 使用数据库索引
常见问题
Q: 如何重置所有数据？
A: 删除 data/data.json 文件，重启服务器会自动创建新的空数据文件。
Q: 图片存储在哪里？
A: 图片存储在 uploads/ 目录，通过 /uploads/文件名 访问。
Q: 如何修改端口？
A: 设置环境变量 PORT=8080 或修改 server.js 第 7 行。
Q: 支持哪些图片格式？ A: 支持 jpeg, jpg, png, gif, webp 格式。
许可证
MIT License
技术支持
如有问题，请检查：
- Node.js 版本是否 >= 18
- 端口 3000 是否被占用
data/和uploads/目录是否有写入权限- 浏览器控制台是否有错误信息