website/nodejs-project/naga/README.md

数据收集与管理系统

一个基于 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          # 管理员页面脚本

快速开始

本地运行

1. 安装依赖：

npm install

2. 启动服务器：

npm start

3. 访问应用：

• 普通访客页面：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 或其他数据库，可以：

1. 安装数据库驱动（如 better-sqlite3）：

npm install better-sqlite3

2. 修改 server.js 中的 readData() 和 writeData() 函数

3. 创建数据库表结构：

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

技术支持

如有问题，请检查：

1. Node.js 版本是否 >= 18
2. 端口 3000 是否被占用
3. data/ 和 uploads/ 目录是否有写入权限
4. 浏览器控制台是否有错误信息