# 表单提交处理
URL: https://caijiao.org/express/chapter5/2-form-submit
Source: docs/express/chapter5/2-form-submit.md
Description: 本章节介绍如何在 Express 中处理表单提交，讲解如何通过 POST 请求接收表单数据，进行处理，并反馈响应结果。
表单提交是 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
登录页面
用户登录
```
### 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
用户注册
用户注册
```
### 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 multer
```
### 10. 配置 `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
```
## 总结
表单提交是 Web 开发中常见的操作，Express 提供了简单的方式来接收并处理表单数据。通过 `express.urlencoded()` 中间件，可以轻松解析表单数据；同时，借助 `multer` 中间件，还能处理文件上传。在本章节中，我们介绍了如何创建和处理常见的表单提交，包括文本输入、注册表单和文件上传。