268 lines
5.4 KiB
Markdown
268 lines
5.4 KiB
Markdown
# 数据收集与管理系统
|
||
|
||
一个基于 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. 浏览器控制台是否有错误信息 |