菜鸟教程
教程 express tutorial

表单提交处理

表单提交是 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 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 
<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 中间件，还能处理文件上传。在本章节中，我们介绍了如何创建和处理常见的表单提交，包括文本输入、注册表单和文件上传。

相关内容