Node.js与Handlebars：从前端表单安全高效地传递数据至后端

在web开发中，从用户界面（前端）获取输入并将其发送到服务器端（后端）进行处理是核心功能之一。无论是搜索、注册还是数据更新，这一过程都要求数据能够准确、可靠地从浏览器传递到服务器。本文将以一个具体的场景为例，探讨在使用node.js作为后端框架和handlebars作为模板引擎时，如何正确地实现这一数据传递机制。

2. 问题剖析：为什么直接使用标签和Handlebars变量无效？

许多初学者可能会尝试通过在标签的href属性中嵌入Handlebars变量来构建动态URL，以期将用户输入作为URL参数发送。

原始前端代码示例（Handlebars）：

<div class="form-group">
    <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>
</div>

问题分析：

上述方法之所以失败，关键在于对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）：

Lateral App

整理归类论文

85

查看详情

<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>

关键点：

• 我们将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-urlencoded
  app.use(express.urlencoded({ extended: true }));
  // 解析 application/json (如果也处理JSON请求)
  app.use(express.json());

  登录后复制

• 数据验证与安全性： 无论数据通过何种方式传递到后端，都必须在后端进行严格的输入验证和清理，以防止SQL注入、XSS攻击等安全漏洞。

• 客户端动态URL构建（如果必须使用GET）： 如果业务逻辑严格要求使用GET方法并通过URL路径参数传递客户端输入的动态值，那么就不能仅仅依赖Handlebars和标签。在这种情况下，您需要使用JavaScript在客户端动态构建URL并进行页面跳转。例如：

  <input type="number" id="cedulaInput" placeholder="Cedula donante">
  <button onclick="searchDonante()">Buscar</button>
  
  <script>
      function searchDonante() {
          const cedula = document.getElementById('cedulaInput').value;
          if (cedula) {
              window.location.href = `/donaciones/buscar/${cedula}`;
          } else {
              alert('请输入捐赠者证件号码！');
          }
      }
  </script>

  登录后复制

  但对于简单的表单提交，使用

  通常更为简洁和推荐。

6. 总结

在Node.js和Handlebars应用中，从前端获取用户输入并将其传递到后端进行处理，应优先考虑使用HTML

以上就是Node.js与Handlebars：从前端表单安全高效地传递数据至后端的详细内容，更多请关注php中文网其它相关文章！