Node.js中Pug表单提交无响应且未跳转至首页问题求助

核心问题1：Pug表单结构错误，控件未包含在表单内 #

你的add-product.pug中，form标签后的.form-group没有缩进，导致所有输入框和提交按钮不属于表单的子元素。点击提交按钮时，浏览器无法识别这是表单的提交操作，因此没有任何响应。

修复后的add-product.pug代码： #

form(action='/admin/add-product', method='POST')
  .form-group.row.my-3
    label.col-sm-2.col-form-label(for='name') Product Name
    .col-sm-10
      input.form-control#name(type='text', name='name')
  // 补充缺失的产品字段输入框
  .form-group.row.my-3
    label.col-sm-2.col-form-label(for='price') Product Price
    .col-sm-10
      input.form-control#price(type='number', name='price')
  .form-group.row.my-3
    label.col-sm-2.col-form-label(for='image') Image Path
    .col-sm-10
      input.form-control#image(type='text', name='image')
  .form-group.row.my-3
    label.col-sm-2.col-form-label(for='description') Description
    .col-sm-10
      textarea.form-control#description(name='description')
  .form-group.row
    .col-sm-10.offset-sm-2.my-3
      input(type="submit" value="Submit").btn.btn-primary

注意：所有表单控件必须缩进在form标签下方，才能被识别为表单的一部分。

核心问题2：表单缺失必要字段，导致产品数据不完整 #

你的admin.js接口中尝试获取price、image、description字段，但原表单仅提供了name输入框。即使修复了表单结构，这些字段会被设为undefined，可能导致后续首页展示异常，因此需要补充对应输入控件。

可选优化：增加字段验证与数据类型处理 #

为避免因字段缺失或格式错误导致服务器异常，可以在admin.js的POST接口中添加简单校验：

router.post('/add-product', (req, res, next) => {
  // 校验必填字段
  if (!req.body.name || !req.body.price) {
    return res.redirect('/admin/add-product');
  }
  products.push({
    name: req.body.name,
    price: Number(req.body.price), // 转换为数字类型
    image: req.body.image || 'default-image.jpeg', // 设置默认图片
    description: req.body.description || ''
  });
  console.log(req.body);
  res.redirect('/');
});

验证修复效果 #

1. 重启Node.js服务器
2. 访问/admin/add-product填写完整表单
3. 点击提交按钮，即可触发数据提交并自动跳转至首页，新增产品会以卡片形式展示在列表中

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