本文探讨了在Node.js和Handlebars应用中，如何将用户输入从前端安全有效地传递到后端。针对直接使用Handlebars变量在标签中构建动态URL的常见误区，文章详细解释了其失效原因，并提供了使用HTML表单（POST方法）作为解决方案。通过具体的前后端代码示例，指导开发者如何正确配置表单提交，以及后端如何通过req.body接收和处理数据，确保数据传输的准确性和应用逻辑的完整性。
1. 引言：前端数据向后端传递的挑战
在web开发中，从用户界面（前端）获取输入并将其发送到服务器端（后端）进行处理是核心功能之一。无论是搜索、注册还是数据更新，这一过程都要求数据能够准确、可靠地从浏览器传递到服务器。本文将以一个具体的场景为例，探讨在使用node.js作为后端框架和handlebars作为模板引擎时，如何正确地实现这一数据传递机制。
2. 问题剖析：为什么直接使用标签和Handlebars变量无效？
许多初学者可能会尝试通过在标签的href属性中嵌入Handlebars变量来构建动态URL，以期将用户输入作为URL参数发送。
原始前端代码示例（Handlebars）：
问题分析：
上述方法之所以失败，关键在于对Handlebars渲染时机和HTML元素解析方式的误解。
立即学习“前端免费学习笔记（深入）”；
Handlebars的服务器端渲染特性： Handlebars是一个服务器端模板引擎。这意味着{{cedula}}这样的表达式在服务器渲染HTML页面时就已经被替换为具体的值。然而，当页面加载到浏览器后，input标签中的值是由用户在客户端输入的，这个值是动态变化的。在页面加载时，{{cedula}}变量可能是一个空字符串或者未定义，因为它无法“感知”到客户端input字段中用户输入的值。标签的href属性解析： href属性在页面渲染时就已经确定。它不会在用户输入input字段后动态更新。因此，当用户点击链接时，href中传递的cedula值并非用户在input中输入的值，而是Handlebars在服务器端渲染时所持有的cedula值（通常为空或未定义）。这导致最终的URL变成/donaciones/buscar/，缺少了预期的参数，从而引发“Cannot GET /donaciones/buscar/”的错误。
3. 后端路由的预期行为（GET请求）
尽管前端的数据传递方式存在问题，但后端路由本身对于接收URL参数是配置正确的。
原始后端代码示例（Node.js/Express）：
router.get('/buscar/:cedula', isLoggedIn ,async(req, res) =>{ const { cedula } = req.params; // 从URL路径参数中获取cedula 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] }); }});
说明：
此后端路由通过router.get(‘/buscar/:cedula’, …)定义了一个可以接收名为cedula的URL路径参数的GET请求。req.params.cedula能够正确地捕获到URL中相应位置的值。例如，当浏览器直接访问localhost:3000/donaciones/buscar/4时，req.params.cedula会是”4″，并且后端逻辑能够正常执行数据库查询并返回结果。这进一步证明了问题在于前端未能将用户输入正确地注入到URL中。
4. 解决方案：使用HTML表单进行数据提交
将用户输入从前端传递到后端的标准且推荐方式是使用HTML
action属性： 指定表单数据提交到哪个URL。method属性： 指定提交数据的方式，通常是GET或POST。GET： 数据会附加到URL的查询字符串中（例如url?name=value）。适用于不敏感、幂等（重复提交无副作用）的请求，如搜索。POST： 数据会包含在HTTP请求体中。适用于敏感数据（密码）、大量数据或会改变服务器状态（创建、更新）的请求。input元素的name属性： 这是至关重要的，它定义了表单字段的名称，后端将通过这个名称来识别和获取对应的值。
修正后的前端代码示例（Handlebars/HTML）：
关键点：
我们将input和button包裹在一个action=”/donaciones/ingresos”：指定表单数据将提交到/donaciones/ingresos这个URL。请注意，这里根据实际业务逻辑调整了路径，使其更符合POST请求的语义。method=”POST”：明确指出数据将通过POST请求体发送。
与表单匹配的后端代码示例（Node.js/Express）：
由于前端现在使用POST方法提交数据，并且action指向/donaciones/ingresos，后端也需要相应地调整以接收这些数据。
// 确保您的Express应用已配置body-parser中间件来解析POST请求体// 例如：app.use(express.urlencoded({ extended: true }));router.post('/donaciones/ingresos', isLoggedIn, async (req, res) => { // 从请求体中获取表单数据 const { cedula } = req.body; // 注意：这里从 req.body 获取，而不是 req.params 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] }); }});
关键点：
路由方法匹配： 后端路由必须使用router.post()来匹配前端的method=”POST”。路由路径匹配： 后端路由路径/donaciones/ingresos必须与前端表单的action属性值匹配。数据获取方式： 当使用POST方法提交表单时，数据会包含在HTTP请求体中。在Express中，需要使用body-parser（或Express内置的express.urlencoded）中间件来解析请求体，然后通过req.body对象来访问表单字段的值。例如，req.body.cedula将获取到name=”cedula”的input字段的值。
5. 注意事项与最佳实践
GET与POST的选择：
GET 请求通常用于获取资源，数据通过URL参数传递，不适合传输敏感信息或大量数据。它具有幂等性，即重复请求不会产生额外副作用。POST 请求通常用于创建或更新资源，数据通过请求体传递，更适合传输敏感信息或大量数据，并且可以改变服务器状态。在本例中，虽然原意是“搜索”，但如果搜索条件复杂或需要隐藏，使用POST配合表单提交也是一个合理且健壮的选择。
Express body-parser 配置： 确保您的Express应用已正确配置body-parser中间件，以便能够解析POST请求体。对于现代Express版本，通常在app.js或主服务器文件中添加：
const express = require('express');const app = express();// 解析 application/x-www-form-urlencodedapp.use(express.urlencoded({ extended: true }));// 解析 application/json (如果也处理JSON请求)app.use(express.json());
数据验证与安全性： 无论数据通过何种方式传递到后端，都必须在后端进行严格的输入验证和清理，以防止SQL注入、XSS攻击等安全漏洞。
客户端动态URL构建（如果必须使用GET）： 如果业务逻辑严格要求使用GET方法并通过URL路径参数传递客户端输入的动态值，那么就不能仅仅依赖Handlebars和标签。在这种情况下，您需要使用JavaScript在客户端动态构建URL并进行页面跳转。例如：
function searchDonante() { const cedula = document.getElementById('cedulaInput').value; if (cedula) { window.location.href = `/donaciones/buscar/${cedula}`; } else { alert('请输入捐赠者证件号码！'); } }
但对于简单的表单提交，使用
6. 总结
在Node.js和Handlebars应用中，从前端获取用户输入并将其传递到后端进行处理，应优先考虑使用HTML
以上就是Node.js与Handlebars：从前端表单安全高效地传递数据至后端的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519206.html
微信扫一扫 
支付宝扫一扫 
