Node.js与Handlebars：从前端表单安全高效地传递用户输入到后端

在web开发中，将用户在前端输入的数据发送到后端服务器进行处理是核心功能之一。无论是搜索数据库、提交表单还是更新信息，都需要一套可靠的机制来完成这一过程。本文将深入探讨在使用node.js（结合express框架）和handlebars模板引擎时，如何正确地实现这一数据传递机制。

理解问题：<a>标签与Handlebars的局限性

许多开发者在初次尝试传递动态用户输入时，可能会错误地认为可以直接利用Handlebars的表达式与HTML的<a>标签结合来构建动态URL。例如，当用户在一个输入框中键入“cedula”（身份证号）后，期望点击链接能将此值作为URL参数传递到后端：

前端（Handlebars模板中的错误尝试）:

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

问题分析： 这种方法的问题在于Handlebars是一个服务器端模板引擎。这意味着{{cedula}}这个表达式在页面被发送到浏览器之前，就已经在服务器上被解析和替换了。如果cedula变量在服务器端渲染时没有被定义或为空，那么<a>标签的href属性就会被渲染成/donaciones/buscar/，而不会包含用户在浏览器中输入的值。当用户在输入框中输入内容后，<a>标签的href属性并不会动态更新，因此点击链接时，浏览器会尝试访问/donaciones/buscar/，而非/donaciones/buscar/用户输入的值。这通常会导致后端路由无法匹配，从而出现“Cannot GET /donaciones/buscar/”之类的错误。

然而，值得注意的是，如果后端路由配置正确，并且直接在浏览器地址栏中输入类似localhost:3000/donaciones/buscar/456789这样的完整URL，后端是能够成功处理的。

后端（Node.js/Express中的相应GET路由）：

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

router.get('/buscar/:cedula', isLoggedIn ,async(req, res) =>{
    // 从URL参数中获取cedula
    const { cedula } = 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] });
    }
});

这段后端代码本身是正确的，它能够从URL路径参数中提取cedula并进行数据库查询。问题出在前端如何将用户输入动态地放入这个URL路径。

解决方案：使用HTML表单提交数据

要解决上述问题，最标准和可靠的方法是使用HTML的<form>标签来收集用户输入并将其提交到后端。表单提供了多种提交方法（GET或POST），并能确保用户输入的数据被正确地封装和发送。

前端（Handlebars模板中的正确实现）：

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

关键改进点：

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

67

查看详情

1. <form>标签： 将输入字段和按钮包裹在<form>标签内。
2. action属性： 指定表单数据提交的目标URL。这里我们假设提交到/donaciones/ingresos。
3. method="POST"： 明确指定使用HTTP POST方法提交数据。对于创建、更新或包含敏感信息的请求，POST是更安全和推荐的选择。
4. <button type="submit">： 确保按钮类型为submit，这样点击按钮时，表单数据才会被发送。
5. name属性： input标签的name属性（例如name="cedula"）至关重要，它定义了数据在提交时使用的键名。后端将通过这个键名来访问对应的值。

重要：后端路由的调整

当前端使用POST方法提交表单数据时，后端也必须相应地调整其路由和数据获取方式。

后端（Node.js/Express中处理POST请求的路由）：

// 确保在你的Express应用中启用了body-parser中间件来解析POST请求体
// 例如：app.use(express.urlencoded({extended: false}));
// 或 app.use(express.json());

router.post('/donaciones/ingresos', isLoggedIn, async (req, res) => {
    // 从请求体中获取cedula，因为前端使用了name="cedula"
    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] });
    }
});

关键调整点：

1. router.post()： 将路由方法从get改为post，以匹配前端表单的method="POST"。

2. 路径匹配： 路由路径应与前端表单的action属性匹配（/donaciones/ingresos）。

3. req.body： 对于POST请求，表单提交的数据会存储在req.body对象中。我们需要通过input标签的name属性来访问数据，例如req.body.cedula。

4. body-parser中间件： Express框架默认不解析请求体。你需要配置body-parser（或Express内置的express.urlencoded()和express.json()）中间件来解析POST请求体。通常在app.js或index.js中进行如下配置：

   const express = require('express');
   const app = express();
   
   // 解析URL编码的请求体（用于HTML表单提交）
   app.use(express.urlencoded({ extended: false })); 
   // 解析JSON格式的请求体（如果你的前端也发送JSON数据）
   // app.use(express.json()); 

   登录后复制

总结与最佳实践

• 服务器端渲染 vs. 客户端交互： Handlebars等模板引擎在服务器端渲染，它们无法响应用户在浏览器中进行的实时输入或交互。对于需要动态捕获用户输入的场景，应使用HTML表单或客户端JavaScript。
• 使用HTML表单： HTML <form>标签是发送用户输入到后端的标准方式。它提供了method（GET/POST）和action属性来控制数据如何以及发送到何处。
• GET vs. POST：
  • GET请求： 数据通过URL的查询字符串（例如/search?query=keyword）发送。适用于获取数据、无副作用的操作，且数据量较小、不敏感。数据会显示在浏览器历史记录和书签中。
  • POST请求： 数据通过请求体发送。适用于提交表单、创建/更新资源、发送敏感数据或大量数据。数据不会显示在URL中，更适合安全性要求较高的场景。
• 后端数据获取：
  • 对于GET请求，路径参数通过req.params获取（例如/user/:id中的id）。查询字符串参数通过req.query获取（例如/search?q=node中的q）。
  • 对于POST请求，表单数据通过req.body获取（需要配置body-parser或express.urlencoded()）。
• 安全性考虑： 永远不要直接信任来自前端的数据。在后端处理任何用户输入之前，务必进行严格的输入验证、清理和消毒，以防止SQL注入、XSS等安全漏洞。

通过遵循这些原则，开发者可以确保Node.js和Handlebars应用能够安全、高效地处理用户输入，提供稳定可靠的用户体验。

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