
关键点说明:
-
: - action: 指定表单数据将被发送到的后端路由URL。这里我们将其设置为/donaciones/buscar。
- method: 指定发送数据时使用的HTTP方法。POST是处理表单提交的常用方法,因为它将数据包含在请求体中,而不是URL中,更适合敏感或大量数据。
-
:
- name="cedula": 这是至关重要的一点。后端将通过这个name属性来识别和获取输入字段的值。
- required: (可选) HTML5属性,表示该字段是必填的,提供基本的客户端验证。
-
:
- type="submit": 明确指定这是一个提交按钮,点击后会触发表单提交。
2. 后端(Node.js/Express)
为了处理POST请求并从请求体中获取表单数据,Node.js/Express应用需要配置相应的中间件。express.urlencoded是处理application/x-www-form-urlencoded类型表单数据的标准中间件。
首先,确保你的Express应用配置了该中间件:
const express = require('express');
const app = express();
// ... 其他中间件和配置
// 配置Express以解析URL编码的表单数据
app.use(express.urlencoded({ extended: false }));
// 如果还需要处理JSON数据,可以添加:
// app.use(express.json());
// ... 其他路由定义然后,创建对应的POST路由来接收和处理表单数据:
// 假设你的路由文件是router.js,并且已经导入了Express和数据库连接
// const router = express.Router();
// const pool = require('../database'); // 你的数据库连接池
// const isLoggedIn = require('../lib/auth').isLoggedIn; // 你的认证中间件
router.post('/donaciones/buscar', isLoggedIn, async (req, res) => {
// 从req.body中获取表单字段值。字段名与前端input的name属性一致。
const { cedula } = req.body;
// 输入验证 (非常重要!)
if (!cedula || isNaN(parseInt(cedula))) {
req.flash('message', '请输入有效的捐赠者身份证号码!');
return res.redirect('/donantes/ingreso_donantes'); // 或者渲染带有错误信息的页面
}
try {
// 使用参数化查询防止SQL注入
const donante = await pool.query('SELECT * FROM donantes WHERE cedula = ?', [cedula]);
if (donante.length < 1) {
req.flash('message', '捐赠者未注册!');
res.redirect('/donantes/ingreso_donantes');
} else {
// 找到捐赠者后,渲染页面并传递数据
res.render('donaciones/donaciones_ingreso', { donante: donante[0] });
}
} catch (error) {
console.error("数据库查询错误:", error);
req.flash('message', '查询捐赠者时发生错误。');
res.redirect('/donantes/ingreso_donantes');
}
});关键点说明:
- router.post('/donaciones/buscar', ...): 定义一个POST请求路由,其路径与前端表单的action属性匹配。
- const { cedula } = req.body;: express.urlencoded中间件会解析请求体,并将表单数据填充到req.body对象中。cedula就是前端input字段的name属性值。
- 输入验证: 在处理任何用户输入之前,务必进行严格的验证和清理。这里简单检查了cedula是否存在且是否为数字。
- 参数化查询: 使用pool.query('...', [cedula])这样的参数化查询是防止SQL注入的最佳实践。
注意事项与最佳实践
-
安全性:
- 输入验证: 始终在服务器端对所有用户输入进行验证和清理,即使前端已经做了验证。这可以防止恶意数据和应用程序错误。
- SQL注入防护: 使用参数化查询(如示例所示)是防止SQL注入的关键。
- CSRF防护: 对于敏感操作的表单提交,考虑实现跨站请求伪造(CSRF)防护,例如使用csurf等中间件。
-
用户体验:
- 表单验证: 除了后端验证,也可以在前端利用HTML5的required、pattern属性或JavaScript进行实时验证,提供即时反馈。
- 加载状态: 在表单提交后,可以禁用提交按钮或显示加载指示器,防止用户重复提交。
- 友好的错误信息: 当发生错误时,向用户提供清晰、有帮助的错误信息。
-
路由设计:
- 遵循RESTful原则,尽管这里是为了解决特定问题,但对于更复杂的应用,良好的路由设计能提高可维护性。
- GET请求通常用于获取资源,POST请求用于创建新资源或提交数据进行处理。
-
错误处理:
- 在后端代码中,使用try-catch块来捕获可能发生的错误,特别是数据库操作,并向用户返回适当的错误信息或重定向。
总结
通过本教程,我们了解了在Node.js与Handlebars应用中,如何正确地将前端用户输入数据传递到后端。核心在于避免使用标签和服务器端渲染的Handlebars变量来处理动态用户输入,而是应该利用HTML










