Node.js与Handlebars：前端输入值到后端传递的正确姿势

1. 问题背景与误区：<a>标签与动态输入

在使用node.js和handlebars构建动态web应用时，开发者常遇到一个需求：将用户在前端输入框中填写的值传递到后端进行处理（例如，查询数据库）。一种常见的尝试是利用<a>标签结合handlebars模板语法，将输入值作为url路径的一部分：

        <label for="cedula">Cedula donante:</label>
         <input type="number" name="cedula" id="cedula" value="" placeholder="Cedula donante" autofocus>
     <a href="/donaciones/buscar/{{cedula}}" class="btn btn-primary">Buscar</a>

以及对应的后端Express路由：

router.get('/buscar/:cedula', isLoggedIn ,async(req, res) =>{
    const { cedula } = req.params;
    // ... 数据库查询逻辑
});

然而，这种方法通常会导致“Cannot GET /donaciones/buscar/”之类的错误。这是因为{{cedula}}在Handlebars模板渲染时，如果cedula变量在当前上下文中没有被定义或为空，它会被渲染为空字符串。一旦页面加载完成，<a>标签的href属性就固定了，它不会动态地捕获用户在<input>框中实时输入的值。因此，无论用户在输入框中输入什么，点击链接时，浏览器实际发送的请求是/donaciones/buscar/，导致后端无法匹配带有参数的路由。

尽管直接在浏览器地址栏输入localhost:3000/donaciones/buscar/4----可以正常工作，但这只是因为URL中的值是硬编码的，而非通过前端输入框动态获取并传递。这进一步证明了问题在于前端动态值的传递机制。

2. 解决方案：使用HTML表单（<form>）提交数据

将用户输入从前端传递到后端的标准且推荐方式是使用HTML的<form>元素。表单专门设计用于收集用户输入并将这些数据发送到服务器。

立即学习“前端免费学习笔记（深入）”；

前端 Handlebars 代码优化：

将输入框和“Buscar”按钮包裹在一个<form>标签中，并指定action（数据提交的目标URL）和method（HTTP方法，通常为POST用于提交数据）。

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

0

查看详情

<form action="/donaciones/ingresos" method="POST">
     <div class="form-group">
         <label for="cedula">Cedula donante:</label>
         <input type="number" name="cedula" id="cedula" value="" placeholder="Cedula donante" autofocus>
         <button type="submit" class="btn btn-primary">Buscar</button>
     </div>
</form>

关键点解析：

• <form action="/donaciones/ingresos" method="POST">:
  • action属性定义了表单数据提交的目标URL。
  • method="POST"指定了使用HTTP POST方法提交数据。POST方法适用于创建、更新或提交数据到服务器，其数据包含在请求体中，相对更安全且没有URL长度限制。
• <input type="number" name="cedula" ...>:
  • name="cedula"属性至关重要，它定义了该输入字段在提交到服务器时的数据键名。后端将通过这个键名来访问用户输入的值。
• <button type="submit" ...>: 当点击类型为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 <form> 元素配合适当的 HTTP 方法（通常是 POST）进行提交。避免误用<a>标签来传递动态输入值，因为它仅在页面渲染时处理模板变量，无法捕获实时的用户输入。通过遵循这一模式，并结合后端请求体解析、输入验证和错误处理，可以确保前端与后端之间的数据流是可靠、高效且符合Web标准的。

以上就是Node.js与Handlebars：前端输入值到后端传递的正确姿势的详细内容，更多请关注php中文网其它相关文章！