主题
表单提交处理
表单提交是 Web 开发中的常见操作。用户通过填写表单，将数据提交给服务器进行处理。Express 提供了简单的方式来处理表单提交，常见的 HTTP 请求方法是 POST。
安装必需的中间件
为了处理表单数据，需要使用 express.urlencoded() 中间件，它可以解析 application/x-www-form-urlencoded 格式的表单数据。
1. 安装 express.urlencoded() 中间件
js
const express = require('express');
const app = express();
// 中间件，用于解析表单数据
app.use(express.urlencoded({ extended: true }));extended: true 允许解析嵌套的对象，推荐使用。
表单提交的基本流程
假设我们有一个简单的用户登录表单，用户提交用户名和密码，Express 服务器接收到数据后处理并返回响应。
2. 创建 HTML 表单
创建一个 login.html 文件，包含用户名和密码的输入框：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<h1>用户登录</h1>
<form action="/login" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required />
<br />
<label for="password">密码：</label>
<input type="password" id="password" name="password" required />
<br />
<button type="submit">提交</button>
</form>
</body>
</html>3. 配置 Express 路由处理表单数据
在 app.js 中创建一个路由，处理 /login 路径的 POST 请求，并接收表单数据：
js
app.post('/login', (req, res) => {
const { username, password } = req.body;
if (username === 'admin' && password === '123456') {
res.send('登录成功！');
} else {
res.send('用户名或密码错误！');
}
});4. 渲染响应页面
当表单数据提交后，Express 会处理表单并返回响应结果。如果用户名和密码正确，返回成功信息，否则返回错误信息。
5. 启动服务器
js
app.listen(3000, () => {
console.log('服务器启动在 http://localhost:3000');
});示例：用户注册表单
假设我们要实现一个用户注册功能，用户提交注册信息（如用户名、邮箱、密码等），服务器接收并进行处理。
6. 创建用户注册表单
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<form action="/register" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required />
<br />
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required />
<br />
<label for="password">密码：</label>
<input type="password" id="password" name="password" required />
<br />
<button type="submit">注册</button>
</form>
</body>
</html>7. 处理注册请求
js
app.post('/register', (req, res) => {
const { username, email, password } = req.body;
// 假设进行基本的验证
if (username && email && password) {
res.send(`注册成功！用户名：${username}，邮箱：${email}`);
} else {
res.send('请输入完整的注册信息');
}
});8. 启动服务器
js
app.listen(3000, () => {
console.log('服务器启动在 http://localhost:3000');
});文件上传
有时表单需要上传文件，Express 提供了文件上传中间件（如 multer）来处理文件上传操作。
9. 安装 multer 中间件
bash
npm install multer10. 配置 multer 处理文件上传
js
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), (req, res) => {
res.send(`文件上传成功！文件名：${req.file.filename}`);
});在表单中添加文件输入项：
html
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">选择文件：</label>
<input type="file" id="file" name="file" required />
<br />
<button type="submit">上传</button>
</form>总结
表单提交是 Web 开发中常见的操作，Express 提供了简单的方式来接收并处理表单数据。通过 express.urlencoded() 中间件，可以轻松解析表单数据；同时，借助 multer 中间件，还能处理文件上传。在本章节中，我们介绍了如何创建和处理常见的表单提交，包括文本输入、注册表单和文件上传。