使用linux+javascript+html+mysql+nodejs+npm+express等构建信息资料采集系统
一、适用场景
1、人才信息库、档案管理，构建企业或单位内部人才库。
2、公务员/事业单位招聘，网上报名填写资料、上传证书等。
3、科研项目申报，课题负责人信息、成果附件、审查材料上传。
4、志愿者招募：在线填写报名信息，上传技能证书、健康证明、等级证书等。
5、金融保险行业信息采集，如：理赔事故照片、医疗单据、身份证明、银行卡复印件。
二、运行环境与拓扑图：
（一）运行环境（所需依赖）
1、服务器中运行必须组件所需的依赖
2、本例中服务器版本（CentOS8升级过内核）
3、本例客户端运行浏览器即可，即BS模式（浏览器Browser——服务器Server）
4、本例实现的功能有：
（1）客户端的用户可通过浏览器完成用户的注册，用户名和密码保存于mysql数据库中，数据库通过加密手段，使密码不明文显示。
（2）客户端通过浏览器填写表单，不需要安装任何多余的插件或软件
（3）客户端可通过浏览器上传证件图片等，支持图片类型如：jpg、jpeg、bmp、png、pdf、webp、gif等。
（4）可通过WEB浏览器预览所填写的资料，上传的图片等，预览WEB页资料时，可将证件图片的缩略图放大查看详情。
（5）使用下拉列表选择（如：性别、学历、学位）+手动填写相结合完成表单资料填写。
（6）可上传文件至服务器，为区分每个人上传的资料，上传前自动建立一个以姓名+电话为名的文件夹，每个人上传的资料只在自己独立的文件夹下，不会混淆别人的资料。
（7）对管理端预览输出的WEB页面资料添加了打印功能。
（8）可以对所有已上传数据的人员进行资料汇总，形成汇总表，在汇总表中想查看某人的信息资料时，单击即可以WEB方式进行预览。
（二）拓扑图
三、实现的过程：
（一）拓扑图完成的流程
1、拓扑图中，底层也可先用一台物理台式机安装环境，图中vmware ESXi系统的搭建，此处不赘述，请参考：
（1）虚拟化部署ESXI6.7+intel x710-da4万兆网卡
https://blog.csdn.net/weixin_43075093/article/details/123985235
（2）虚拟化部署ESXI6.7跑多个vm server系统
https://blog.csdn.net/weixin_43075093/article/details/124055072
（3）管理网络与业务网络分离+虚拟网络部署
https://blog.csdn.net/weixin_43075093/article/details/124072923
（4）虚拟化部署备份+精简置备与厚置备+OVF模板部署
https://blog.csdn.net/weixin_43075093/article/details/124104109
2、拓扑图中的OS操作系统，安装过程此处不赘述，请参考：
虚拟化部署ESXI6.7跑多个vm server系统（CentOS操作系统安装）
https://blog.csdn.net/weixin_43075093/article/details/124055072
3、本例的操作重点在APP环境的搭建，以及服务器端（后端）与客户端（前端）运行代码的编写。
（二）本例中的目录结构与说明
1、目录结构
app/
│─ server.js // 后端入口
│─ package.json
│─ db.js // MySQL 连接池
│─ public/
│ ├─preview
│ ├─ index.html //WEB方式预览某一个人填写和上传的资料
│ └─ total.html // WEB方式预览汇总表
│── uploads //运行时自动创建，用于上传资料的文件夹
│ └─ 张三-13110881111
│ │ └─ info.json
│ │ └─ 身份证正面
│ │ └─ 身份证反面
│ │ └─ 职称证书
│ │ └─ 职业资格证书
│ │ └─ 毕业证书
│ │ └─ 荣誉证书1
│ │ └─ 荣誉证书2
│ │ └─ 荣誉证书3
│ …
│ └─李四-13911228899
│ │ └─ info.json
│ │ …
│ └─王五-18955554456
│ …
│—— register.html // 注册 / 修改密码
│—— index.html // 登录
│—— reset.html //密码重置
│—— forgot.html //忘记密码、找回密码
│—— form.html //登录成功后，填写表单的内容，选择要上传的证件资料
└─ .env // 存放敏感配置
2、package.json是Node.js项目的核心配置文件，用于描述项目元数据、管理依赖关系、定义脚本命令及配置项目参数。
3、核心功能概述
（1）项目元数据管理。记录项目名称、版本、作者、许可证等基本信息，相当于项目的“身份证”。
（2）依赖管理。dependencies：生产环境依赖包。devDependencies：开发环境专用依赖（如构建工具）。支持语义化版本控制（如^1.2.3和~1.2.3的区别）。
（3）脚本命令定义。通过scripts字段配置自动化任务（如启动服务、构建、测试）。
4、扩展功能：
（1）模块入口配置：指定主文件（main）和浏览器端入口（browser）。
（2）私有配置集成：可嵌入ESLint、Browserslist等工具的配置。
（3）发布管理：为npm包提供元数据，便于开源共享。
与其他生态对比：类似Java的pom.xml、Python的requirements.txt或Rust的Cargo.toml，实现依赖与项目配置的标准化。
（三）前端运行代码
1、首页代码
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"/><title>信息采集系统</title><link rel="stylesheet" href="style.css"/><!-- 背景图与标题样式 --><style>html,body{height:100%;margin:0;}body{background:url('/image/reg.webp') center/cover no-repeat fixed;display:flex;flex-direction:column;align-items:center;position:relative; /* 让绝对定位参考 body */}/* 标题专用样式 */.page-title{position:absolute;top:120px; /* 距离视口顶部 120px（可微调） */left:45%; /* 水平中心50% */transform:translateX(-43%);/* 精确居中-50% */font-size:55px;font-weight:bold;color:#000;text-shadow:0 0 6px rgba(0,0,0,.6);}</style>
</head>
<body><!-- 系统标题，用 class 控制样式 --><h1 class="page-title">信息采集系统</h1><div class="box"><h2>用户登录</h2><form id="loginForm"><input type="text" placeholder="用户名" id="username" required/><input type="password" placeholder="密码" id="password" required/><button type="submit">登录</button><a href="register.html">还没有账号？立即注册</a><a href="forgot.html">忘记密码</a></form></div><script>/* 脚本 */document.getElementById('loginForm').addEventListener('submit', async e => {e.preventDefault();const res = await fetch('/api/login', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({username: document.getElementById('username').value,password: document.getElementById('password').value})}).then(r => r.json());if (res.code) return alert(res.msg);location.href = res.data.redirect;});</script>
</body>
</html>2、注册用户页的代码
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"/><title>注册</title><link rel="stylesheet" href="style.css"/><!-- 背景图 --><style>html,body{height:100%;margin:0;}body{background:url('/image/reg.webp') center/cover no-repeat fixed;display:flex;flex-direction:column;align-items:center;position:relative; /* 让绝对定位参考 body */}/* 标题专用样式 */.page-title{position:absolute;top:120px; /* 距离视口顶部 120px（可微调） */left:45%; /* 水平中心50% */transform:translateX(-43%);/* 精确居中-50% */font-size:55px;font-weight:bold;color:#000;text-shadow:0 0 6px rgba(0,0,0,.6);}</style>
</head><body>
<!-- 系统标题，用 class 控制样式 --><h1 class="page-title">信息采集系统</h1><div class="box"><h2>用户注册</h2><form id="regForm"><input type="text" placeholder="用户名" id="username" required/><span id="userTip"></span><input type="email" placeholder="邮箱" id="email" required/><input type="password" placeholder="密码" id="password" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_]).{8,}$" required/><small>需8位以上，含字母、数字、符号</small><button type="submit">注册</button><a href="index.html">已有账号？去登录</a></form></div><script>const username = document.getElementById('username');username.addEventListener('blur', async () => {if (!username.value) return;const res = await fetch('/api/check-username?username=' + encodeURIComponent(username.value)).then(r => r.json());document.getElementById('userTip').textContent = res.data.exists ? '用户名已存在' : '用户名可用';});document.getElementById('regForm').addEventListener('submit', async e => {e.preventDefault();const res = await fetch('/api/register', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({username: username.value,email: document.getElementById('email').value,password: document.getElementById('password').value})}).then(r => r.json());alert(res.code ? res.msg : '注册成功，去登录');if (!res.code) location.href = 'index.html';});</script>
</body>
</html>
3、表单填写页的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>教师信息收集</title>
<style>body{font-family:Arial;background:#f7f7f7;margin:0}.box{max-width:800px;margin:40px auto;background:#fff;padding:30px;border-radius:8px}h2{text-align:center}label{display:block;margin-top:15px;font-weight:bold}input,select,textarea{width:100%;padding:8px;margin-top:4px}.img-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.img-item{flex:1 1 180px}img.preview{max-width:100%;max-height:120px;border:1px solid #ccc;margin-top:4px}button{margin-top:25px;padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.error{color:red;font-size:14px}#progressBar{width:100%;height:8px;background:#eee;margin:10px 0;border-radius:4px;overflow:hidden;}#progressBar div{height:100%;background:#007bff;width:0%;transition:width .2s;}#progressText{margin-bottom:10px;font-size:14px;color:#555;}
</style><!-- 背景图 --><style>html,body{height:100%;margin:0;}body{background:url('/image/reg.webp') center/cover no-repeat fixed;}</style></head>
<body>
<div class="box"><h2>教师信息 & 证件上传</h2><form id="teacherForm" enctype="multipart/form-data"><!-- 基本信息 --><label>姓名<input type="text" name="name" required></label><label>性别<select name="gender"><option>男</option><option>女</option></select></label><label>出生日期<input type="date" name="birthday" required></label><label>联系电话<input type="tel" name="phone" required></label><label>邮箱<input type="email" name="email" required></label><!-- 新增：学历（必填） --><label>学历（必填）<select name="education" required><option value="">请选择</option><option>中职</option><option>技校</option><option>高中</option><option>专科</option><option>本科</option><option>研究生</option></select></label><!-- 新增：学位 --><label>学位<select name="degree"><option value="">无</option><option>学士</option><option>硕士</option><option>博士</option></select></label><label>职称<input type="text" name="title" placeholder="如 副教授"></label><label>毕业院校<input type="text" name="school"></label><label>专业<input type="text" name="major"></label><label>个人简介<textarea name="bio" rows="3"></textarea></label><!-- 证件上传 --><fieldset><legend>证件图片（每张 ≤ 5MB，最多20张）</legend><div class="img-item"><label>身份证正面<input type="file" name="id_front" accept="image/*"></label><img class="preview" id="preview_id_front"></div><div class="img-item"><label>身份证反面<input type="file" name="id_back" accept="image/*"></label><img class="preview" id="preview_id_back"></div><div class="img-item"><label>职称证<input type="file" name="title_cert" accept="image/*"></label><img class="preview" id="preview_title_cert"></div><div class="img-item"><label>职业资格证<input type="file" name="qual_cert" accept="image/*"></label><img class="preview" id="preview_qual_cert"></div><div class="img-item"><label>毕业证<input type="file" name="grad_cert" accept="image/*"></label><img class="preview" id="preview_grad_cert"></div><div class="img-item"><label>学位证书（可选）<input type="file" name="degree_cert" accept="image/*"></label><img class="preview" id="preview_degree_cert"></div><!-- 荣誉证 1~15 --><div id="honors"></div><button type="button" onclick="addHonor()">+ 添加荣誉证</button></fieldset><div id="progressText" style="display:none;"></div><div id="progressBar" style="display:none;"><div id="progressValue"></div></div><button type="submit">提交</button><div class="error" id="err"></div></form>
</div><script>
// 原脚本保持不变
function addHonor(){const container = document.getElementById('honors');if(container.children.length >= 15) return alert('最多15张荣誉证');const idx = container.children.length + 1;const div = document.createElement('div');div.className = 'img-item';div.innerHTML = `<label>荣誉证${idx}<input type="file" name="honor_${idx}" accept="image/*"></label><img class="preview" id="preview_honor_${idx}">`;container.appendChild(div);
}
document.addEventListener('change', e=>{if(e.target.type==='file'){const [file] = e.target.files;if(file && file.size > 5*1024*1024){document.getElementById('err').textContent='图片超过5MB：'+file.name;e.target.value=''; return;}document.getElementById('err').textContent='';const img = document.getElementById('preview_'+e.target.name);if(img) img.src = URL.createObjectURL(file);}
});
document.getElementById('teacherForm').addEventListener('submit', async e=>{e.preventDefault();const progressText = document.getElementById('progressText');const progressBar = document.getElementById('progressBar');const progressVal = document.getElementById('progressValue');const msg = document.getElementById('err');const form = new FormData(e.target);progressText.style.display = progressBar.style.display = 'block';progressVal.style.width = '0%';msg.textContent = '';const res = await fetch('/submit', {method:'POST', body: form});const reader = res.body.getReader();const decoder = new TextDecoder();let buffer = '';while (true) {const {done, value} = await reader.read();if (done) break;buffer += decoder.decode(value, {stream: true});const lines = buffer.split('\n');buffer = lines.pop() || '';for (const line of lines) {if (line.startsWith('data:')) {const data = line.slice(5).trim();if (data.includes('%')) {const percent = parseInt(data) || 0;progressVal.style.width = percent + '%';progressText.textContent = `正在上传 ${percent}%`;} else if (data.startsWith('done:')) {progressText.textContent = '提交成功，准备跳转…';progressVal.style.width = '100%';setTimeout(()=>location.href=`/preview/${data.slice(5)}`, 1000);} else if (data.startsWith('error:')) {msg.textContent = data.slice(6);progressText.style.display = progressBar.style.display = 'none';} else {progressText.textContent = data;}}}}
});
</script>
</body>
</html>4、忘记密码找回的代码
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"/><title>找回密码</title><link rel="stylesheet" href="style.css"/><!-- 背景图 --><style>html,body{height:100%;margin:0;}body{background:url('/image/reg.webp') center/cover no-repeat fixed;}</style></head>
<body><div class="box"><h2>找回密码</h2><form id="forgotForm"><input type="email" placeholder="注册邮箱" required/><button type="submit">发送重置邮件</button><a href="index.html">返回登录</a></form></div><script>document.getElementById('forgotForm').addEventListener('submit', async e => {e.preventDefault();const res = await fetch('/api/forgot', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ email: e.target[0].value })}).then(r => r.json());alert(res.code ? res.msg : '邮件已发送，10分钟内有效');});</script>
</body>
</html>
5、重置密码的代码
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"/><title>重置密码</title><link rel="stylesheet" href="style.css"/>
</head>
<body><div class="box"><h2>重置密码</h2><form id="resetForm"><input type="password" placeholder="新密码" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_]).{8,}$" required/><button type="submit">提交</button></form></div><script>const token = new URLSearchParams(location.search).get('token');if (!token) { alert('链接无效'); location.href = 'index.html'; }document.getElementById('resetForm').addEventListener('submit', async e => {e.preventDefault();const res = await fetch('/api/reset', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({token,password: e.target[0].value})}).then(r => r.json());alert(res.code ? res.msg : '重置成功，去登录');if (!res.code) location.href = 'index.html';});</script>
</body>
</html>
6、WEB预览填写+上传结果的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>教师资料预览</title>
<style>body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#f7f7f7;margin:0;padding:20px;}.card{max-width:720px;margin:0 auto;background:#fff;padding:30px 40px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);}h1{text-align:center;margin-bottom:30px;color:#333;}table{width:100%;border-collapse:collapse;margin-bottom:25px;}th,td{padding:10px 8px;border-bottom:1px solid #eee;text-align:left;}th{width:160px;color:#666;font-weight:600;}.gallery{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:25px;}.gallery img{width:180px;height:120px;object-fit:cover;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:transform .2s;}.gallery img:hover{transform:scale(1.05);}.no-img{color:#999;font-style:italic;}.foot{text-align:center;margin-top:30px;}.foot button{padding:8px 24px;font-size:15px;border:none;border-radius:4px;background:#007bff;color:#fff;cursor:pointer;}.foot button:hover{background:#0069d9;}/* 放大 */#overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:999;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s;}#overlay img{max-width:90vw;max-height:90vh;border-radius:4px;cursor:default;transform:scale(1);transition:transform .3s;}#overlay.show{opacity:1;visibility:visible;}
</style><!-- 背景图 --><style>html,body{height:100%;margin:0;}body{background:url('/image/reg.webp') center/cover no-repeat fixed;}</style></head>
<body><div class="card"><h1>教师资料预览</h1><!-- 基本信息 --><table id="infoTable"><tr><th>姓名</th><td id="name"></td></tr><tr><th>性别</th><td id="gender"></td></tr><tr><th>出生日期</th><td id="birthday"></td></tr><tr><th>电话号码</th><td id="phone"></td></tr><tr><th>邮件地址</th><td id="email"></td></tr><tr><th>职称</th><td id="title"></td></tr><tr><th>毕业院校</th><td id="school"></td></tr><tr><th>专业</th><td id="major"></td></tr><tr><th>学历</th><td id="education"></td></tr><tr><th>学位</th><td id="degree"></td></tr><tr><th>工作简历</th><td id="bio"></td></tr></table><!-- 证件图片 --><h2>证件图片</h2><div id="gallery" class="gallery"><p class="no-img">暂无图片</p></div><!-- 底部按钮区 --><div class="foot"><button onclick="history.back()">返回</button><button onclick="window.print()">打印</button></div></div><!-- 放大层 --><div id="overlay"><img id="overlayImg" alt="大图预览"></div><!-- 打印样式 --><style media="print">/* 打印时隐藏放大遮罩与按钮 */#overlay,.foot button {display: none !important;}/* 让卡片宽度占满纸张 */.card {max-width: 100%;box-shadow: none;border: none;}/* 调整图片打印尺寸（可选） */.gallery img {width: 120px;height: 80px;}</style><script>(async () => {const folder = decodeURIComponent(location.pathname.split('/').pop());const gallery = document.getElementById('gallery');const overlay = document.getElementById('overlay');const overlayImg = document.getElementById('overlayImg');/* 点击小图 → 放大 */gallery.addEventListener('click', e => {if (e.target.tagName === 'IMG') {overlayImg.src = e.target.src;overlayImg.style.transform = 'scale(1)';overlay.classList.add('show');}});/* 点击遮罩 → 关闭 */overlay.addEventListener('click', () => overlay.classList.remove('show'));/* 双击放大/还原（最多 300%） */overlayImg.addEventListener('dblclick', () => {const current = overlayImg.style.transform;overlayImg.style.transform = current === 'scale(3)' ? 'scale(1)' : 'scale(3)';});/* 加载数据 */try {const infoRes = await fetch(`/uploads/${encodeURIComponent(folder)}/info.json`);if (!infoRes.ok) throw new Error('info.json 读取失败');const data = await infoRes.json();['name','gender','birthday','phone','email','title','school','major','education','degree','bio'].forEach(k => document.getElementById(k).textContent = data[k] || '-');const listRes = await fetch(`/api/files?folder=${encodeURIComponent(folder)}`);if (!listRes.ok) throw new Error('文件列表读取失败');const imgs = await listRes.json();gallery.innerHTML = imgs.length? imgs.map(n => `<img src="/uploads/${encodeURIComponent(folder)}/${encodeURIComponent(n)}" alt="${n}" loading="lazy">`).join(''): '<p class="no-img">暂无图片</p>';} catch (e) {console.error(e);document.body.innerHTML = '<h2 style="text-align:center;color:red">资料读取失败！</h2>';}})();</script>
</body>
</html>
7、生成汇总表的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>教师资料汇总</title>
<style>body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#f7f7f7;margin:0;padding:20px;}h1{text-align:center;margin-bottom:20px;}table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);}th,td{padding:8px 6px;text-align:center;font-size:14px;border-bottom:1px solid #eee;}th{background:#fafafa;color:#333;}tr:hover{background:#f5faff;cursor:pointer;}.ok{color:green;font-weight:bold;}.no{color:#ccc;}.loading{text-align:center;padding:40px;font-size:18px;}.error{color:red;text-align:center;padding:40px;font-size:18px;}
</style>
</head>
<body><h1>教师资料汇总</h1><div id="loading" class="loading">正在加载汇总数据...</div><div id="error" class="error" style="display:none;"></div><table id="totalTable" style="display:none;"><thead><tr><th>姓名</th><th>性别</th><th>出生日期</th><th>电话</th><th>邮箱</th><th>职称</th><th>毕业院校</th><th>专业</th><th>学历</th><th>学位</th></tr></thead><tbody></tbody></table><!-- 底部按钮区 --><div class="foot" style="display:flex;justify-content:center;gap:20px;align-items:center;margin-top:40px;"><button style="font-size:12px;padding:8px 16px;" onclick="history.back()">返回</button><button style="font-size:12px;padding:8px 16px;" onclick="window.print()">打印</button></div><!-- 打印样式 --><style media="print">/* 打印时隐藏放大遮罩与按钮 */#overlay,.foot button {display: none !important;}/* 让卡片宽度占满纸张 */.card {max-width: 100%;box-shadow: none;border: none;}/* 调整图片打印尺寸（可选） */.gallery img {width: 120px;height: 80px;}</style><script>
/* 需要检测的证件文件名（不含扩展名）*/
const CERTS = ['身份证正面','身份证反面','职业资格证书','职称证书','荣誉证1','荣誉证2','荣誉证3','荣誉证4','荣誉证5'
];/* 判断文件是否存在（通过 /api/files）*/
async function fetchFileList(folder){const res = await fetch(`/api/files?folder=${encodeURIComponent(folder)}`);return res.ok ? res.json() : [];
}/* 生成一行表格 */
function buildRow(info,folder,files){const tr = document.createElement('tr');// 基本信息['name','gender','birthday','phone','email','title','school','major','education','degree'].forEach(key=>{const td=document.createElement('td');td.textContent = info[key] || '-';tr.appendChild(td);});/* 点击整行跳转预览页 */tr.addEventListener('click', () => {location.href = `/preview/${encodeURIComponent(folder)}`;});return tr;
}/* 主逻辑 */
(async () => {try{/* 1. 直接走后端接口拿文件夹列表 */const folders = await fetch('/api/folders').then(r=>r.json());if(!folders.length) throw new Error('暂无数据');/* 2. 并行读取每个文件夹 */const tbody = document.querySelector('#totalTable tbody');await Promise.all(folders.map(async f=>{try{const [info,files] = await Promise.all([fetch(`/uploads/${encodeURIComponent(f)}/info.json`).then(r=>r.json()),fetchFileList(f)]);tbody.appendChild(buildRow(info,f,files));}catch(err){console.error('读取失败：'+f,err);}}));document.getElementById('loading').style.display='none';document.getElementById('totalTable').style.display='table';}catch(e){document.getElementById('loading').style.display='none';const err = document.getElementById('error');err.textContent = '汇总数据加载失败：'+e.message;err.style.display='block';}
})();
</script>
</body>
</html>8、CSS样式代码
/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }body {height: 100vh;display: flex;align-items: center;justify-content: center;background: url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?auto=format&fit=crop&w=1350&q=80') center/cover no-repeat;font-family: Arial, sans-serif;
}.box {width: 320px;padding: 40px;background: rgba(255,255,255,0.9);border-radius: 8px;
}.box h2 { text-align: center; margin-bottom: 20px; }.box input {width: 100%;padding: 10px;margin: 8px 0;border: 1px solid #ccc;border-radius: 4px;
}.box button {width: 100%;padding: 10px;border: none;background: #007BFF;color: #fff;border-radius: 4px;cursor: pointer;
}.box a {display: block;text-align: center;margin-top: 10px;font-size: 0.9em;color: #007BFF;
}
（四）后端代码
1、server.js
// server.js
require('dotenv').config();
const express = require('express');
const mysql = require('mysql2/promise');
const bcrypt = require('bcryptjs');
const bodyParser = require('body-parser');
const rateLimit = require('express-rate-limit');
const nodemailer = require('nodemailer');
const crypto = require('crypto');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const { v4: uuid } = require('uuid');const app = express();
const port = 3000;// 创建 uploads 目录
const uploadDir = path.resolve(__dirname, 'uploads');
if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir);
app.use(bodyParser.json());
app.use(express.static(__dirname)); // 方便直接跑前端// 把 uploads 暴露给 /uploads 路径
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
// 把 public 暴露给根路径（包含 preview/index.html）
app.use(express.static('public'));// 登录接口限速：每 IP 每 30 分钟 3 次
const loginLimiter = rateLimit({windowMs: 30 * 60 * 1000,max: 3,standardHeaders: true,legacyHeaders: false,handler: (req, res) => res.status(429).json({ msg: '账户已锁定30分钟' })
});
// 发邮件
const transporter = nodemailer.createTransport({host: process.env.SMTP_HOST,port: Number(process.env.SMTP_PORT),secure: true,auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS }
});// 通用响应
const ok = (res, data = {}) => res.json({ code: 0, data });
const fail = (res, msg) => res.json({ code: 1, msg });// 用户名是否存在
app.get('/api/check-username', async (req, res) => {const [rows] = await pool.execute('SELECT 1 FROM users WHERE username=?', [req.query.username]);ok(res, { exists: rows.length > 0 });
});// 引入 TextDecoder内置模块
const { TextDecoder } = require('util');// 注册
app.post('/api/register', async (req, res) => {const { username, email, password } = req.body;if (!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_]).{8,}$/.test(password)) {return fail(res, '密码需8位以上，包含字母、数字和符号');}const hash = await bcrypt.hash(password, 12);try {await pool.execute('INSERT INTO users(username, email, pwd_hash) VALUES (?,?,?)', [username, email, hash]);ok(res);} catch (e) {if (e.code === 'ER_DUP_ENTRY') return fail(res, '用户名或邮箱已存在');fail(res, '注册失败');}
});// 登录
app.post('/api/login', loginLimiter, async (req, res) => {const { username, password } = req.body;const [rows] = await pool.execute('SELECT * FROM users WHERE username=?', [username]);if (!rows.length) return fail(res, '用户不存在');const user = rows[0];// 检查锁定if (user.lock_until && new Date() < new Date(user.lock_until)) {return fail(res, '账户已锁定30分钟');}const pwdOk = await bcrypt.compare(password, user.pwd_hash);if (!pwdOk) {await pool.execute('UPDATE users SET failed=failed+1 WHERE username=?', [username]);if (user.failed + 1 >= 3) {await pool.execute('UPDATE users SET failed=0, lock_until=DATE_ADD(NOW(), INTERVAL 30 MINUTE) WHERE username=?', [username]);return fail(res, '连续登录失败3次，账户锁定30分钟');}return fail(res, '密码错误');}await pool.execute('UPDATE users SET failed=0, lock_until=NULL WHERE username=?', [username]);ok(res, { redirect: '/form.html' });
});// 找回密码：发送邮件
app.post('/api/forgot', async (req, res) => {const { email } = req.body;const [rows] = await pool.execute('SELECT username FROM users WHERE email=?', [email]);if (!rows.length) return fail(res, '邮箱未注册');const token = crypto.randomBytes(32).toString('hex');await pool.execute('UPDATE users SET reset_token=?, reset_exp=DATE_ADD(NOW(), INTERVAL 10 MINUTE) WHERE email=?', [token, email]);const link = `${process.env.FRONT_BASE}/reset.html?token=${token}`;await transporter.sendMail({from: `"找回密码" <${process.env.SMTP_USER}>`,to: email,subject: '重置密码',html: `<a href="${link}">点击重置密码</a>`});ok(res);
});// 重置密码
app.post('/api/reset', async (req, res) => {const { token, password } = req.body;if (!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_]).{8,}$/.test(password)) {return fail(res, '密码不符合强度要求');}const [rows] = await pool.execute('SELECT id FROM users WHERE reset_token=? AND reset_exp>NOW()', [token]);if (!rows.length) return fail(res, '链接无效或已过期');const hash = await bcrypt.hash(password, 12);await pool.execute('UPDATE users SET pwd_hash=?, reset_token=NULL, reset_exp=NULL WHERE reset_token=?', [hash, token]);ok(res);
});//multer 配置：图片保存到 uploads，保持原文件名（中文不乱码）
const storage = multer.diskStorage({destination: (req, file, cb) => {// 先放到根 uploads 目录，稍后在 /submit 里再移动到最终文件夹cb(null, uploadDir);},filename: (req, file, cb) => {// 关键：把 multipart 里 Latin-1 编码的文件名还原为 UTF-8const originalName = new TextDecoder('utf-8').decode(Buffer.from(file.originalname, 'latin1'));cb(null, originalName); // 中文文件名正常}
});
const upload = multer({ storage });// SSE 头
function setSSE(res) {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');res.flushHeaders();
}// 提交接口
app.post('/submit', upload.any(), async (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');res.flushHeaders();const { name, phone } = req.body;if (!name || !phone) {res.write(`event:error\ndata:姓名或电话缺失\n\n`);res.end();return;}// 创建目标文件夹const folderName = `${name}-${phone}`;const folderPath = path.join(uploadDir, folderName);if (!fs.existsSync(folderPath)) fs.mkdirSync(folderPath, { recursive: true });// 写 info.jsonconst jsonPath = path.join(folderPath, 'info.json');fs.writeFileSync(jsonPath, JSON.stringify(req.body, null, 2));// 把 multer 已保存的文件移动到正确目录const files = req.files || [];const total = files.length;files.forEach((file, idx) => {const dst = path.join(folderPath, file.filename);fs.renameSync(file.path, dst);const percent = Math.round(((idx + 1) / total) * 100);res.write(`event:progress\ndata:正在上传第 ${idx + 1}/${files.length} 张…\n\n`);res.write(`data:${percent}%\n\n`);});// 结束// res.write(`event:done\ndata:${folderName}\n\n`);res.write(`event:done\ndata:资料提交成功，请尽快找管理员审核！\n\n`);res.end();
});// 文件列表接口
app.get('/api/files', (req, res) => {const folder = decodeURIComponent(req.query.folder || '');const dir = path.join(__dirname, 'uploads', folder);if (!require('fs').existsSync(dir)) return res.status(404).json([]);const files = require('fs').readdirSync(dir).filter(f => /.(jpe?g|png|gif|webp|bmp|pdf)$/i.test(f)).slice(0, 30);res.json(files);
});// 预览路由：/preview/张三-13555555555 返回 preview/index.html
app.get('/preview/:folder', (req, res) => {res.sendFile(path.join(__dirname, 'public', 'preview', 'index.html'));
});// 预览页
app.get('/preview/:folder', (req, res) => {res.sendFile(path.join(__dirname, 'preview.html'));
});//列出所有文件夹 的接口
app.get('/api/folders', (req, res) => {if (!fs.existsSync(uploadDir)) return res.json([]);const dirs = fs.readdirSync(uploadDir, { withFileTypes: true }).filter(d => d.isDirectory() && /^.+-\d+$/.test(d.name)).map(d => d.name);res.json(dirs);
});app.listen(3000, () => console.log('Server run at http://localhost:3000'));2、.env
DB_HOST=192.168.0.138
DB_USER=root
DB_PASS=g12345678!23
DB_NAME=user_system
SMTP_HOST=smtp.163.com
SMTP_PORT=465
SMTP_USER=你的发信邮箱
SMTP_PASS=你的发信密码或授权码
FRONT_BASE=http://localhost:30003、db连接池
// 数据库连接池
const pool = mysql.createPool({host: process.env.DB_HOST,user: process.env.DB_USER,password: process.env.DB_PASS,database: process.env.DB_NAME,port: process.env.DB_PORT,waitForConnections: true,connectionLimit: 10
});四、服务器环境准备
（一）搭建数据库环境（MySQL安装与配置）
1、登录到CentOS，清除缓存
yum clean all
yum makecache
2、下载mysql安装包
wget http://repo.mysql.com/mysql80-community-release-el7-3.noarch.rpm
3、升级包准备安装
rpm -ivh mysql80-community-release-el7-3.noarch.rpm
4、安装mysql
yum install mysql-server -y
5、启动mysql
Service mysqld start
6、查看mysql运行状态
service mysqld status
7、让mysql开机自动启动
systemctl enable mysqld.service
8、登录到mysql（刚安装好时，默认密码为空）
mysql -u root -p
9、修改mysql数据库密码 （刚安装好时，默认密码为空）
mysqladmin -u root -p password
10、系统防火墙开启mysql的3306端口号
firewall-cmd --permanent --add-port=3306/tcp
firewall-cmd --add-port=3306/tcp
firewall-cmd --list-ports
11、打开mysql数据库，修改mysql允许为网络连接，默认仅允许服务器本地连接
Show databases;
Use mysql;
12、查看数据库中有哪些表
Show tables;
select host from user where user = “root”;
13、为确保局域网能访问到数据库，注册时能向数据库中写入注册用户信息，配置数据库访问时允许服务器外的访问，否则只允许服务器本地访问
update user set host=“%” where user=“root”;
select host from user where user=“root”;
14、局域网端电脑安装并使用Navicat Premium 16连接mysql数据库，填写mysql安装时的相关信息，服务器地址，端口号3306，用户root，密码等
15、局域网端电脑连接数据库测试，successful即为成功，如下图：
16、在Navicat Premium 16工具连接上mysql数据库后，打开系统中的数据库，双击tables表，即可看到默认的系统表内容
17、配置新建数据库的访问权限
GRANT ALL PRIVILEGES ON . TO ‘username’@‘localhost’;
GRANT ALL PRIVILEGES ON . TO ‘root’@‘%’;
18、新建本例中所需的数据库和表
CREATE DATABASE IF NOT EXISTS user_system;
USE user_system;
CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
pwd_hash CHAR(60) NOT NULL,
failed TINYINT DEFAULT 0,
lock_until DATETIME DEFAULT NULL,
reset_token VARCHAR(64) DEFAULT NULL,
reset_exp DATETIME DEFAULT NULL
);
ALTER TABLE users
ADD COLUMN real_name VARCHAR(50) NULL AFTER email,
ADD COLUMN phone VARCHAR(20) NULL AFTER real_name,
ADD COLUMN id_card VARCHAR(18) NULL AFTER phone;
19、查看建好的数据库和表，如下图：
（二）服务器端（后端）核心实现
1、安装（Node.js）运行环境，初始化npm
npm init -y
2、安装npm运行所需的依赖
npm i express mysql2 dotenv bcrypt jsonwebtoken express-rate-limit uuid nodemailer
（1）安装依赖执行命令如下图：
（2）安装npm依赖完成如下图：
3、安装node.js
Node.js下载地址：https://nodejs.org/en/blog/release/v22.18.0
tar -xvf node-v22.18.0-linux-x64.tar.xz
4、将Node.js添加到PATH
为了能够在任何地方运行Node.js，你需要将其添加到你的PATH环境变量中。
echo ‘export PATH=$PATH:/opt /node-v22.18.0-linux-x64/bin’ >> ~/.bashrc
5、执行node.js环境变量更新
source ~/.bashrc
6、验证node.js的安装
安装完成后，你可以通过运行以下命令来验证Node.js是否正确安装：
node -v
Npm -v
7、npm初始化
Npm init -y
8、npm或手动配置初始化
npm init
:ml-citation{ref=“1,3” data=“citationList”}
npm -v
9、安装npm的依赖express
npm install express
安装过程如下图：
10、安装npm的依赖mysql2
npm install mysql2
11、安装npm的依赖bcrypt
Npm install bcrypt
12、安装npm的依赖jsonwebtoken
npm install jsonwebtoken
13、安装npm的依赖uuid
Npm install uuid
14、安装npm的依赖nodemialer
npm install nodemailer
五、客户端访问
1、服务器开启端口号3000与3306
firewall-cmd --add-port=3000/tcp
firewall-cmd --add-port=3306/tcp
firewall-cmd --add-port=3000/tcp --permanent
firewall-cmd --add-port=3306/tcp --permanent
2、服务器启动js
Node server.js
3、客户端通过浏览器访问 http://192.168.0.5:3000开始测试。
4、注册用户
5、登录后填写表单
6、登录后上传证件图片相关信息
7、填写好资料后提交
六、后台数据
1、注册1个用户后数据库中的表增加了1条用户记录
2、上传的证件图片每个人区分开，以免混淆
3、填写的表单资料存放于个人文件夹info.json中，图片资料则存放于个人文件夹（姓名-电话）为名称的文件夹
4、管理人员可以查看汇总的数据
5、在汇总的数据列表中，单击某一个人的链接，即可查看此人的详细信息
6、单击图片的缩略图，可放大查看证书的详细信息，如查看职业资格证书
七、生产级加固建议（可选但强烈建议）
1、HTTPS：使用 Nginx + Let’s Encrypt。
2、Helmet：防常见 HTTP 头攻击。
3、rate-limit：已用 express-rate-limit 限制暴力破解。
4、CSRF：前后端分离时可加 csurf。
5、日志：接入 winston + morgan。
6、前端部署到 CDN，后端仅暴露 API。
7、前端防篡改，登录用户与填写数据保持一致。
8、用户分角色分配不同的权限，目前是完成的基础功能。
本文至此结束，不足之处敬请批评指正。本例服务器端采用的CentOS8.5，服务器后端运行的代码采用了node.js环境+npm管理工具+express，通过安装npm的各种依赖，后端运行了mysql数据库，通过db池进行连接。前端 采用了javascript+html。结合起来，构建了信息资料采集系统的初步功能。