使用PUGJS和Javascript实现POST请求提交及数据获取的问题求助

核心问题梳理 #

• 缺少POST方法的/api/bots路由处理逻辑：当前仅配置了GET请求的处理规则，而表单提交使用的是POST方法，请求无法匹配到对应路由，自然无法获取参数。
• Pug模板的input标签缺失name属性，且label关联错误：后端解析表单参数完全依赖input的name字段取值，同时你的label的for属性值为BotID，但input的id为team_name，两者不匹配，点击label也无法聚焦到输入框。
• 未配置Express请求体解析中间件：如果没有配置对应的解析中间件，即使路由规则正确，req.body也会返回undefined，无法读取提交的参数。

具体修改步骤 #

1. 配置请求体解析中间件 #

在Express项目的主入口文件（通常为app.js/index.js）中添加如下配置：

// Express 4.16及以上版本内置了解析中间件，直接使用即可
app.use(express.urlencoded({ extended: true }));
// 如果是更低版本的Express，需要先安装body-parser：npm install body-parser，再引入使用
// const bodyParser = require('body-parser');
// app.use(bodyParser.urlencoded({ extended: true }));

2. 修正routes.js路由配置 #

新增POST方法的/api/bots接口处理逻辑：

// 原有GET接口可根据需求保留，新增以下POST接口
router.post('/api/bots', (req, res) => {
  // 即可通过req.body拿到提交的Bot ID，属性名对应input的name值
  const botId = req.body.botId;
  // 这里可以添加后续业务逻辑，比如参数校验、数据入库等
  res.send({ code: 200, msg: '提交成功', botId: botId });
});

router.get('/newbot', (req, res) => res.render('dashboard/newbot', { icon: process.env.ICON3 }))

3. 修正newbot.pug模板代码 #

修改后代码如下：

h1.display-5 Lenox Bot List - Add Bot
form(action='/api/bots', method='post')
  label(for='botId') Bot ID:
  hr
  input#botId(name='botId' type='text' placeholder='Enter your Bot ID')
  hr
  input.a.button.btn.btn-success(type='submit', value='Submit bot')

修改点说明：

• 统一label的for属性和input的id为botId，保证关联关系正确
• 给input新增name="botId"属性，后端通过这个字段名取值
• 将input的type改为标准的text，不存在String这个合法的input type值
• 删除冗余的空value属性

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