
关键点解析:
-
:
- action属性定义了表单数据提交的目标URL。
- method="POST"指定了使用HTTP POST方法提交数据。POST方法适用于创建、更新或提交数据到服务器,其数据包含在请求体中,相对更安全且没有URL长度限制。
-
:
- name="cedula"属性至关重要,它定义了该输入字段在提交到服务器时的数据键名。后端将通过这个键名来访问用户输入的值。
- : 当点击类型为submit的按钮时,表单数据将被浏览器收集并提交到action指定的URL。
后端 Node.js (Express) 代码适配:
由于前端现在使用POST方法提交数据,后端路由也需要相应地从GET改为POST,并且通过req.body来获取提交的数据。请确保你的Express应用已经配置了中间件来解析请求体,例如express.urlencoded()。
// 在你的Express应用配置中(例如app.js或index.js),确保已启用请求体解析:
// app.use(express.urlencoded({ extended: true })); // 用于解析 application/x-www-form-urlencoded
// app.use(express.json()); // 如果也处理 JSON 请求体
// 适配后的后端路由
router.post('/donaciones/ingresos', isLoggedIn ,async(req, res) =>{
// 从请求体(req.body)中获取 'cedula' 值
// 注意:这里的 'cedula' 对应前端 input 元素的 name 属性
const { cedula } = req.body;
// 后续数据库查询逻辑保持不变
const donante = await pool.query('SELECT * FROM donantes WHERE cedula = ?', [cedula]);
if (donante.length < 1) {
req.flash('message', 'Donante no registrado!');
res.redirect('/donantes/ingreso_donantes');
}else {
res.render('donaciones/donaciones_ingreso', { donante : donante[0] });
}
});现在,当用户在前端输入cedula并点击“Buscar”按钮时,该值会作为POST请求的一部分被发送到/donaciones/ingresos路由,后端便可以通过req.body.cedula正确获取并处理。
3. 注意事项与最佳实践
-
GET vs. POST 的选择:
- GET: 主要用于从服务器获取资源。参数通常附加在URL中(查询字符串),不应携带敏感信息,也不应导致服务器状态的改变。适用于搜索、过滤等操作。
- POST: 用于向服务器提交数据,通常用于创建新资源或修改现有资源。数据包含在请求体中,相对更安全,且没有URL长度限制。适用于表单提交、文件上传等操作。
- 输入验证与安全性: 无论数据通过何种方式提交,后端都必须对接收到的所有用户输入进行严格的验证和清理。这对于防止安全漏洞(如SQL注入、跨站脚本XSS)和确保数据一致性至关重要。虽然示例代码使用了参数化查询(?),这有助于防止SQL注入,但前端输入验证和后端业务逻辑验证仍然不可或缺。
- 用户体验: 表单提交后,应向用户提供清晰的反馈。这可能包括成功消息、错误提示(例如“捐赠者未注册”)或重定向到相关页面,以确保用户知道他们的操作结果。
- 错误处理: 在前端和后端都实现健壮的错误处理机制。例如,当数据库查询失败、网络请求异常或用户未输入必填值时,能够优雅地处理并通知用户。
4. 总结
在Node.js与Handlebars结合的应用中,将前端用户输入传递到后端的核心原则是:对于动态的用户输入数据,应始终使用HTML









