本文深入探讨了在使用Node.js和Handlebars进行Web开发时，如何正确地将前端用户输入的值传递到后端。针对常见的误区——试图通过标签和URL路径参数传递动态输入值，文章详细解释了其失效原因。并提供了一种健壮且推荐的解决方案：利用HTML表单（: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
以上就是Node.js与Handlebars：前端输入值到后端传递的正确姿势的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519197.html
微信扫一扫 
支付宝扫一扫 
