如何在Express发票应用中提交多个相同Mongoose字段的表单数据至数据库

你的Mongoose Schema已经定义了item为对象数组类型，天生支持存储多个发票条目，只需按以下步骤调整前后端逻辑即可实现需求：

1. 确认Express表单解析配置 #

首先要确保Express开启了嵌套表单参数解析能力，否则无法正确识别数组格式的表单字段：

// 项目入口文件（如app.js）中添加以下配置
app.use(express.urlencoded({ extended: true }));

// 如果你使用body-parser中间件，配置如下：
// const bodyParser = require('body-parser');
// app.use(bodyParser.urlencoded({ extended: true }));

extended: true参数支持解析item[][itemName]这类嵌套/数组格式的表单参数，是提交多组条目的前提。

2. 前端实现动态添加商品条目 #

修改现有表单，添加新增/删除条目的交互逻辑，多组输入框保持item[][字段名]的命名格式即可：

<!-- 修改表单中的条目部分 -->
<div id="item-container">
  <!-- 初始的一组商品条目 -->
  <div class="item-group">
    <input type="text" name="item[][itemName]" placeholder="商品名称" required>
    <input type="number" name="item[][itemQuantity]" placeholder="数量" min="1" required>
    <input type="number" name="item[][itemPrice]" placeholder="单价" min="0" step="0.01" required>
    <button type="button" class="delete-item">删除</button>
  </div>
</div>
<button type="button" id="add-item">新增商品条目</button>
<button class="button-5" type="submit">提交发票</button>

<!-- 新增条目交互逻辑 -->
<script>
// 新增条目
document.getElementById('add-item').addEventListener('click', () => {
  const container = document.getElementById('item-container');
  const newGroup = document.createElement('div');
  newGroup.className = 'item-group';
  newGroup.innerHTML = `
    <input type="text" name="item[][itemName]" placeholder="商品名称" required>
    <input type="number" name="item[][itemQuantity]" placeholder="数量" min="1" required>
    <input type="number" name="item[][itemPrice]" placeholder="单价" min="0" step="0.01" required>
    <button type="button" class="delete-item">删除</button>
  `;
  container.appendChild(newGroup);
});

// 删除条目
document.addEventListener('click', (e) => {
  if (e.target.classList.contains('delete-item')) {
    e.target.parentElement.remove();
  }
});
</script>

3. 后端优化数据处理逻辑 #

修改控制器代码，过滤无效空条目、自动计算总金额，避免脏数据入库：

exports.createInvoice = async (req, res) =>{
    try{
        // 过滤掉商品名称为空的无效条目
        const validItems = (req.body.item || []).filter(item => item.itemName?.trim());
        // 自动计算总金额：累加所有条目 数量*单价
        const totalPrice = validItems.reduce((sum, item) => {
            return sum + (Number(item.itemQuantity || 0) * Number(item.itemPrice || 0));
        }, 0);
        // 合并处理后的数据
        const invoiceData = {
            ...req.body,
            item: validItems,
            totalPrice: totalPrice
        };
        const newInvoice = await Invoice.create(invoiceData);
        res.status(201).json({
            status: 'success',
            data: {
                Invoice: newInvoice
            }
        });
    } catch(err){
        res.status(400).json({
            status: 'fail',
            message: err
        });
    }
}

调整完成后提交表单，Mongoose会自动将多组商品条目存入item数组字段，无需额外适配。

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