本文将会介绍如何在 Express.js 中处理表单数据。在 Web 开发中，表单是收集用户数据的重要组成部分。表单数据是通过 HTTP 请求发送到服务器端，开发者需要在服务器端处理这些数据，并作出相应的响应。
什么是表单
表单是通过 HTML 元素创建用于收集用户数据的界面组件。表单通常由输入框、下拉菜单、复选框等元素组成。用户可以在表单中填写数据并将其提交到服务器。
在 HTML 中，表单通常使用 <form> 元素表示，并具有一个 action 属性和一个 method 属性。例如：
-- -------------------- ---- ------- ----- ---------------- -------------- ------ --------------------- ------ ----------- --------- ------------ ------ ------------------------ ------ ------------ ---------- ------------- ------ ------------- ----------- -------
在上面的示例中，表单的 action 属性指定了提交的目标 URL，method 属性指定了提交方式，这里使用 POST 方法。
Express.js 中的表单处理
Express.js 是一个流行的 Node.js Web 框架，提供了强大的路由和中间件功能。在 Express.js 中，处理表单数据非常简单。我们可以使用 body-parser 中间件来解析表单数据。
安装 body-parser
在开始之前，我们需要先安装 body-parser 中间件。你可以通过 npm 进行安装：
npm install body-parser
安装完成后，我们需要在应用程序中引入它：
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// 使用 body-parser 中间件解析表单数据
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());在上面的示例中，我们先引入了 body-parser 中间件并使用 app.use() 方法将其作为中间件添加到应用程序中。body-parser 中间件提供了两种解析表单数据的方式：urlencoded 和 json。我们可以选择其中一种或同时使用。
处理表单数据
body-parser 中间件将表单数据解析为 JavaScript 对象，我们可以通过访问其中的数据来处理表单数据。
考虑以下示例：
app.post('/submit', function(req, res) {
const { name, email } = req.body;
console.log('姓名：', name);
console.log('电子邮件：', email);
res.send('提交成功！');
});在上面的示例中，我们使用 POST 方法处理 /submit 路由。我们可以通过 req.body 对象访问表单数据，并将其打印到控制台。最后，我们使用 res.send() 方法向客户端发送响应。
添加完上述路由后，我们可以通过访问 http://localhost:3000/submit 并填写表单来测试应用程序。
深入阐述
在真实应用程序中，表单数据的处理通常更加复杂。以下是一些需要注意的问题：
数据验证
表单提交的数据可能包含恶意信息或无效数据。在处理表单数据之前，应该对数据进行验证。我们可以使用第三方工具库如 validator 或 Joi 对数据进行验证。
例如：
-- -------------------- ---- -------
----- --------- - ---------------------
------------------- ------------- ---- -
----- - ----- ----- - - ---------
-- -----------
-- --------------------------- -
------ -----------------------------------
-
------------------ ------
-------------------- -------
------------------
---在上面的示例中，我们使用 validator 库验证了电子邮件地址的格式。如果验证失败，我们返回一个 400 错误。
文件上传
表单数据可能包含文件上传的数据。我们可以使用 Node.js 的 fs 模块或第三方库如 Multer 处理文件上传。
例如：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ------ - -------- ----- ---------- --- -- ----------- ------------------- ------------------------ ------------- ---- - ----- - ----- ----- - - --------- ----- - ----- --------- ---- - - --------- ------------------ ------ -------------------- ------- -------------------- ------ -------------------- ---------- -------------------- ------ ------------------ ---
在上面的示例中，我们使用了 Multer 库处理文件上传。我们使用 upload.single('avatar') 指定上传的单个文件的字段名称。在路由函数中，我们可以通过 req.file 访问上传的文件信息。
CSRF 防护
跨站点请求伪造（CSRF）是一种攻击方式，攻击者会利用用户的登录状态伪造请求。在处理表单数据之前，应该对数据进行 CSRF 防护。
Express.js 可以使用 csurf 中间件提供 CSRF 防护。在启用 body-parser 中间件后，我们可以将 csurf 添加到应用程序中，并在处理表单请求的路由函数中使用 res.locals 向模板中注入 CSRF 令牌。
例如：
-- -------------------- ---- ------- ----- ---- - ----------------- ----- -------------- - ------ ------- ---- --- ---------------- --------------- ------------- ---- - ------------------ - ---------- --------------- --- --- ------------------- --------------- ------------- ---- - -- ------ ---
在上面的示例中，我们先创建了 csurf 中间件并添加到应用程序中。然后，我们使用 csrfProtection 中间件保护 /form 和 /submit 路由。在 GET 方法处理 /form 路由时，我们向渲染 form 模板注入了 CSRF 令牌。
结论
在本文中，我们介绍了如何在 Express.js 中处理表单数据。我们使用 body-parser 中间件解析表单数据，并讨论了文件上传、数据验证和 CSRF 防护等相关话题。这些知识对于构建安全、可靠的 Web 应用程序非常重要。
代码示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --------- - ---------------------
----- ---- - -----------------
----- ------ - ------------------
----- ------ - -------- ----- ---------- ---
----- -------------- - ------ ------- ---- ---
----- --- - ----------
------------------------------- --------- ----- ----
---------------------------
---------------- --------------- ------------- ---- -
------------------ - ---------- --------------- ---
---
------------------- --------------- ------------- ---- -
----- - ----- ----- - - ---------
-- -----------
-- --------------------------- -
------ -----------------------------------
-
-- ------
------------------ ------
-------------------- -------
------------------
---
------------------- ------------------------ ------------- ---- -
----- - ----- --------- ---- - - ---------
-- ------
-------------------- ------
-------------------- ----------
-------------------- ------
------------------
---
---------------- ---------- -
-----------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752e0818bd460d3ad9965b0