# 数据收集与管理系统

一个基于 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. 安装依赖：
```bash
npm install
```

2. 启动服务器：
```bash
npm start
```

3. 访问应用：
- 普通访客页面：http://localhost:3000
- 管理员页面：http://localhost:3000/admin.html

### Docker 运行（推荐）

#### 方法 1：使用 docker run

```bash
# 运行容器并挂载源码目录
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` 文件：

```yaml
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
```

启动容器：
```bash
docker-compose up -d
```

查看日志：
```bash
docker-compose logs -f
```

停止容器：
```bash
docker-compose down
```

## API 接口说明

### 获取所有记录
```
GET /api/list
```

**响应示例**：
```json
{
  "success": true,
  "records": [...]
}
```

### 提交新记录
```
POST /api/submit
Content-Type: multipart/form-data
```

**参数**：
- `name`: 人名（必填）
- `link`: 牌谱链接（必填，URL 格式）
- `note`: 备注说明（必填，10-200 字）
- `images`: 图片文件（可选，最多 10 张）

**响应示例**：
```json
{
  "success": true,
  "message": "提交成功",
  "record": {...}
}
```

### 更新 Naga 信息（管理员）
```
POST /api/admin/update
Content-Type: application/json
```

**参数**：
```json
{
  "id": 1,
  "nagaLink": "https://example.com/naga",
  "nagaNote": "Naga 说明文字"
}
```

**响应示例**：
```json
{
  "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 行：
```javascript
const ADMIN_PASSWORD = 'your_new_password';
```

## 扩展建议

### 迁移到数据库

如需使用 SQLite 或其他数据库，可以：

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

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

3. 创建数据库表结构：
```sql
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. 浏览器控制台是否有错误信息