档案系统业务培训在线报名功能实现全流程指南
一、核心功能与系统架构设计
本指南将指导你从零开始，实现一个完整的档案业务培训在线报名系统。该系统核心功能包括：培训课程发布、学员在线报名、报名数据收集与导出、以及简单的后台管理。我们将采用前后端分离的架构，前端使用原生HTML、CSS和JavaScript，后端使用Node.js搭配Express框架，数据存储使用轻量级的SQLite数据库。
1.1 系统模块划分
- 前端展示页：展示培训课程列表、详情及报名表单。
- 报名处理接口：接收并验证前端提交的报名数据，存入数据库。
- 管理后台接口：提供课程增删改查、报名数据查询与导出的API。
- 数据库：存储课程信息（courses表）和报名记录（registrations表）。
二、开发环境搭建与项目初始化
确保你的开发环境已安装Node.js（版本14或以上）。
2.1 创建项目目录并初始化
打开终端，执行以下命令：
``` mkdir archive-training-registration cd archive-training-registration npm init -y ```2.2 安装必备依赖包
在项目根目录下，运行以下命令安装后端所需的核心包：
``` npm install express sqlite3 cors body-parser ```同时，安装开发依赖nodemon，以便在开发时自动重启服务：
``` npm install --save-dev nodemon ```2.3 配置启动脚本
打开项目根目录下的package.json文件，找到"scripts"部分，修改为：
三、后端服务器与数据库构建
3.1 创建主服务器文件
在项目根目录创建server.js文件，并写入以下完整代码：
3.2 实现核心API接口
在server.js文件的app.listen之前，添加以下API接口。
3.2.1 课程相关API
获取所有课程列表：
``` // 获取所有可用课程 app.get('/api/courses', (req, res) => { const sql = `SELECT FROM courses WHERE date >= date('now') ORDER BY date ASC`; db.all(sql, [], (err, rows) => { if (err) { res.status(400).json({ "error": err.message }); return; } res.json({ "message": "success", "data": rows }); }); }); ```创建新课程（管理用）：
``` // 创建新课程（管理后台使用，建议在实际部署时添加身份验证） app.post('/api/courses', (req, res) => { const { title, description, trainer, date, location, max_seats } = req.body; const sql = `INSERT INTO courses (title, description, trainer, date, location, max_seats) VALUES (?, ?, ?, ?, ?, ?)`; const params = [title, description, trainer, date, location, max_seats]; db.run(sql, params, function (err) { if (err) { res.status(400).json({ "error": err.message }); return; } res.json({ "message": "success", "courseId": this.lastID }); }); }); ```3.2.2 报名相关API
提交报名信息：这是系统的核心接口，包含业务逻辑验证（如名额检查）。
``` // 提交培训报名 app.post('/api/register', (req, res) => { const { course_id, name, department, employee_id, phone, email, notes } = req.body; // 第一步：检查课程是否存在且未报满 const checkSql = `SELECT max_seats, current_seats FROM courses WHERE id = ?`; db.get(checkSql, [course_id], (err, course) => { if (err) { return res.status(500).json({ "error": "数据库查询失败" }); } if (!course) { return res.status(404).json({ "error": "未找到指定的培训课程" }); } if (course.current_seats >= course.max_seats) { return res.status(400).json({ "error": "该课程报名名额已满" }); } // 第二步：检查该员工是否已报名此课程（防止重复报名） const duplicateCheckSql = `SELECT id FROM registrations WHERE course_id = ? AND employee_id = ?`; db.get(duplicateCheckSql, [course_id, employee_id], (err, row) => { if (err) { return res.status(500).json({ "error": "重复性检查失败" }); } if (row) { return res.status(400).json({ "error": "您已报名此课程，请勿重复提交" }); } // 第三步：插入报名记录 const insertSql = `INSERT INTO registrations (course_id, name, department, employee_id, phone, email, notes) VALUES (?, ?, ?, ?, ?, ?, ?)`; db.run(insertSql, [course_id, name, department, employee_id, phone, email, notes], function (insertErr) { if (insertErr) { return res.status(500).json({ "error": "报名信息保存失败" }); } // 第四步：成功插入后，更新课程的当前报名人数 const updateSeatSql = `UPDATE courses SET current_seats = current_seats + 1 WHERE id = ?`; db.run(updateSeatSql, [course_id], (updateErr) => { if (updateErr) { console.error("更新课程人数失败:", updateErr); // 注意：这里发生了数据不一致的风险，生产环境需要引入事务(transaction)来回滚 } res.json({ "message": "报名成功！", "registrationId": this.lastID }); }); }); }); }); }); ```四、前端页面开发
在项目根目录下创建public文件夹，所有前端文件将放置于此。
4.1 创建主页面 (index.html)
在public目录下创建index.html，这是一个包含课程列表和报名表单的单页应用。
档案业务培训课程列表
```
正在加载课程信息...
培训报名
4.2 创建前端逻辑脚本 (main.js)
在public目录下创建main.js，处理页面交互和API调用。
暂无即将开始的培训课程。
'; return; } courses.forEach(course => { // 渲染课程列表项 const isFull = course.current_seats >= course.max_seats; const courseItem = document.createElement('div'); courseItem.className = `course-item ${isFull ? 'full' : ''}`; courseItem.innerHTML = `${course.title} ${isFull ? '(已满)' : ''}
讲师：${course.trainer}
时间：${course.date}
地点：${course.location}
名额：${course.current_seats} / ${course.max_seats}
${course.description}
`; coursesContainer.appendChild(courseItem); // 填充下拉选择框（仅显示未报满的课程） if (!isFull) { const option = document.createElement('option'); option.value = course.id; option.textContent = `${course.title} (${course.date})`; courseSelect.appendChild(option); } }); } else { showMessage('加载课程失败，请刷新页面重试。', 'error'); } }) .catch(error => { console.error('Error:', error); showMessage('网络错误，无法连接到服务器。', 'error'); }); // 2. 处理报名表单提交 registrationForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 const formData = { course_id: parseInt(courseSelect.value), name: document.getElementById('name').value.trim(), department: document.getElementById('department').value.trim(), employee_id: document.getElementById('employeeId').value.trim(), phone: document.getElementById('phone').value.trim(), email: document.getElementById('email').value.trim(), notes: document.getElementById('notes').value.trim() }; // 简单的前端验证 if (!formData.course_id) { showMessage('请选择要报名的课程。', 'error'); return; } // 禁用提交按钮，防止重复提交 const submitBtn = registrationForm.querySelector('button[type="submit"]'); const originalBtnText = submitBtn.textContent; submitBtn.disabled = true; submitBtn.textContent = '提交中...'; // 调用报名API fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(formData) }) .then(response => response.json()) .then(data => { if (data.message) { showMessage(data.message, 'success'); registrationForm.reset(); // 清空表单 } else if (data.error) { showMessage(data.error, 'error'); } }) .catch(error => { console.error('Error:', error); showMessage('提交失败，请检查网络连接。', 'error'); }) .finally(() => { // 恢复提交按钮状态 submitBtn.disabled = false; submitBtn.textContent = originalBtnText; }); }); // 显示消息的函数 function showMessage(text, type) { messageDiv.textContent = text; messageDiv.className = `message ${type}`; messageDiv.style.display = 'block'; // 5秒后自动隐藏消息 setTimeout(() => { messageDiv.style.display = 'none'; }, 5000); } }); ```五、系统测试与部署
5.1 启动系统并测试
在项目根目录的终端中，运行开发服务器：
``` npm run dev ```打开浏览器，访问 http://localhost:3000。你应该能看到课程列表页面和报名表单。
5.2 插入测试课程数据
为了测试，你需要先创建一些课程。可以使用命令行工具（如curl）或API测试工具（如Postman）调用创建课程接口。
示例：使用curl命令创建一门课程
``` curl -X POST http://localhost:3000/api/courses \ -H "Content-Type: application/json" \ -d '{ "title": "档案数字化管理规范", "description": "讲解档案数字化全流程标准操作规范与常见问题处理。", "trainer": "张主任", "date": "2023-11-15", "location": "总部三楼会议室", "max_seats": 30 }' ```重复执行此命令（修改title、date等字段）创建多门课程用于测试。
5.3 完整功能测试流程
- 刷新前端页面，确认课程列表正确显示。
- 在报名表单中，选择一门课程，填写完整的个人信息，点击提交。
- 观察页面提示“报名成功！”。
- 再次为同一课程用相同工号报名，应提示“您已报名此课程”。
- 将一门课程的
max_seats设置为1，并报名一次后，再次报名应提示“名额已满”。
5.4 简易管理后台与数据导出
你可以通过直接查询
相关文章
