使用Express.js将表单数据传递至另一路由对应模板的技术问询

嘿，刚接触Express的时候我也卡过类似的问题，其实核心就是搞清楚表单数据从提交到展示的流转路径～结合你的场景，我给你两种最常用的实现方案，都是纯Express+Handlebars的，不用额外折腾第三方工具：

方案一：提交后直接渲染目标模板（最简单） #

这种方式适合提交表单后不需要跳转、直接在新页面展示数据的场景，流程是：表单POST提交到服务器 → 服务器接收数据 → 直接渲染目标Handlebars模板并把数据传进去。

步骤1：基础配置（先确保这些都做好） #

首先要保证你的Express项目已经配置了Handlebars引擎和表单数据解析：

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();

// 配置Handlebars模板引擎
app.engine('handlebars', exphbs.engine());
app.set('view engine', 'handlebars');

// 解析表单提交的urlencoded数据（Express 4.16+内置，不用装body-parser了）
app.use(express.urlencoded({ extended: true }));

步骤2：表单页面的路由（GET请求） #

比如你的表单页面路由是/input，对应的Handlebars模板（views/input.handlebars）里要写对表单的action和method：

// 表单页面路由
app.get('/input', (req, res) => {
  res.render('input');
});

input.handlebars的表单代码：

<form action="/submit-form" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">提交</button>
</form>

⚠️ 注意：表单里的name属性必须和你后续要接收的字段名一致，不然req.body里拿不到数据！

步骤3：处理表单提交并渲染目标模板 #

写一个POST路由接收表单数据，然后直接渲染另一个模板（比如result.handlebars），把数据传进去：

// 处理表单提交的POST路由
app.post('/submit-form', (req, res) => {
  // 从req.body里拿到表单提交的数据
  const formData = {
    username: req.body.username,
    email: req.body.email
  };
  
  // 直接渲染结果页面模板，把数据传进去
  res.render('result', { data: formData });
});

result.handlebars里就可以用Handlebars的语法展示数据了：

<h1>提交成功！</h1>
<p>你的用户名：{{data.username}}</p>
<p>你的邮箱：{{data.email}}</p>

方案二：用Session暂存数据后重定向（更符合RESTful规范） #

如果你的需求是提交表单后要跳转到另一个路由（比如/result），而不是直接渲染，那可以用Express Session把数据暂存起来，跳转后再从Session里取出数据展示。

步骤1：安装并配置Express Session #

先装依赖：

npm install express-session

然后在项目里配置：

const session = require('express-session');

app.use(session({
  secret: 'your-secret-key-here', // 随便写一个字符串，用于加密session
  resave: false,
  saveUninitialized: false,
  cookie: { secure: false } // 开发环境设为false，生产环境如果用HTTPS要设为true
}));

步骤2：修改POST路由，存数据到Session并重定向 #

app.post('/submit-form', (req, res) => {
  // 把表单数据存到session里
  req.session.formData = {
    username: req.body.username,
    email: req.body.email
  };
  
  // 重定向到结果页面的GET路由
  res.redirect('/result');
});

步骤3：结果页面的GET路由，从Session取数据渲染 #

app.get('/result', (req, res) => {
  // 从session里取出数据
  const formData = req.session.formData;
  
  // 可以用完后删掉session里的数据，避免重复展示
  delete req.session.formData;
  
  // 渲染结果模板
  res.render('result', { data: formData });
});

模板result.handlebars和方案一的一样就行。

常见坑点提醒 #

1. 表单的action路径要和POST路由完全匹配：比如你POST路由是/submit-form，表单里的action就不能写错，不然会出现「Cannot POST /xxx」的错误，这也是你之前查的问题里最常见的原因。
2. 必须配置express.urlencoded：如果没加这个中间件，req.body会是undefined，根本拿不到表单数据。
3. Handlebars模板里的变量名要对应：比如你传的是{ data: formData }，模板里就要用{{data.username}}，不能直接写{{username}}（除非你直接把字段拆出来传）。

内容的提问来源于stack exchange，提问作者Sheyna