Express中表单提交后在Pug页面展示GET请求参数问题

嘿，我碰到过一模一样的问题！核心原因很简单——你没有把URL里的GET查询参数传递给Pug模板，所以模板根本拿不到name和quantity的值。下面一步步帮你搞定：

1. 修正路由代码，传递参数给模板 #

Express不会自动把URL里的参数传给Pug，你需要手动从req.query里取出参数，再通过res.render的第二个参数传递给模板。

假设你原来的路由是这样的：

app.get('/test', (req, res) => {
  res.render('test', { title: 'Test Page' });
});

改成这样：

app.get('/test', (req, res) => {
  // 从URL查询参数中提取name和quantity
  const { name, quantity } = req.query;
  
  // 把参数和title一起传给Pug模板
  res.render('test', {
    title: 'Test Page',
    name: name,
    quantity: quantity
  });

  // 或者更简洁的写法：直接展开req.query
  // res.render('test', { title: 'Test Page', ...req.query });
});

可以先加一行console.log(req.query)测试一下，启动服务后提交表单，看看控制台是不是输出了{ name: 'hello', quantity: 'there' }，确认参数能被正确获取。

2. 更新Pug模板，渲染参数 #

你之前的模板只有p #{title}，现在要添加对应参数的渲染代码，比如：

h1 #{title}
p 提交的名称：#{name}
p 提交的数量：#{quantity}

这样当页面加载时，就能从模板变量里拿到传递过来的name和quantity值了。

额外检查点 #

• 确认表单的method是GET，action是/test，并且input的name属性确实是name和quantity（比如<input type="text" name="name">）
• 确认Pug模板文件放在了Express默认的views目录下，文件名和路由里res.render的第一个参数一致（比如路由里写'test'，模板文件就是test.pug）

这样改完之后，刷新页面应该就能正常显示提交的参数啦！

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