本文详解如何通过 pug 模板动态生成表单字段，使 html 表单能将结构化对象数组（如 items[{service, description, amount, price, subtotal}]）正确提交至 express，并被 body-parser 解析为标准 javascript 数组，避免出现嵌套数组乱序问题。
本文详解如何通过 pug 模板动态生成表单字段，使 html 表单能将结构化对象数组（如 items[{service, description, amount, price, subtotal}]）正确提交至 express，并被 body-parser 解析为标准 javascript 数组，避免出现嵌套数组乱序问题。
在 Express 应用中处理动态表单（尤其是多组关联字段）时，一个常见痛点是：HTML 表单无法天然识别“对象数组”的语义。若直接使用 name="items[][field]"，body-parser（启用 extended: true 时）会将同名字段按字段维度聚合，导致 req.body.items 变成一个仅含键值为数组的对象（如 { service: ['id1','id2'], description: ['a','b'] }），而非预期的 [ {service, description, ...}, {service, description, ...} ]。
根本原因在于：[] 语法虽支持数组推导，但未指定索引顺序，解析器会按字段名分组收集，破坏字段间的行级对应关系。
✅ 正确解法是显式绑定每行数据的索引，确保所有同属一行的字段共享同一数组下标。在 Pug 中，需利用 each item, index in list 获取当前迭代索引，并将其注入 name 属性：
each _, index in [1, 2] // 占位数组，仅用于控制行数；实际可替换为 data.rows
.row
.col
select.form-select(name=`items[${index}][service]`)
each service in services
option(value=service._id)= service.name
.col
input.form-control.mb-4(type="text" name=`items[${index}][description]` placeholder="Description")
.col
input.form-control.mb-4(type="text" name=`items[${index}][amount]` placeholder="QTY")
.col
input.form-control.mb-4(type="text" name=`items[${index}][price]` placeholder="Price")
.col
input.form-control.mb-4(type="text" name=`items[${index}][subtotal]` placeholder="Subtotal")? 关键点：name="items[${index}][field]" 中的 ${index} 是 Pug 模板字符串插值（需用反引号包裹），它生成形如 items[0][service]、items[0][description] 的字段名，Express 的 urlencoded 中间件即可据此还原为：
立即学习“前端免费学习笔记（深入）”；
req.body.items // → [ { service: '65abc123', description: 'Design', amount: '2', price: '150', subtotal: '300' }, { service: '65abc456', description: 'Dev', amount: '5', price: '80', subtotal: '400' } ]
? 注意事项与最佳实践：
- ✅ 确保 Express 已正确配置 body-parser：
app.use(express.json()); // 处理 JSON 请求体 app.use(express.urlencoded({ extended: true })); // 必须启用 extended: true 才支持嵌套对象解析 - ⚠️ 避免混用 [] 和 [index]：如 items[][service] 与 items[0][description] 同时存在，会导致解析行为不可预测。
- ? 若需支持前端动态增删行，建议结合 JavaScript 动态生成 name 属性（如 items[${currentCount}][field]），并同步维护索引连续性。
- ? 对于深层嵌套（如 items[0].options[0].name），同样遵循“显式索引”原则：name="items[0][options][0][name]"。
- ? 安全提示：服务端务必对 req.body.items 进行结构校验（如使用 Joi 或 Zod），防止恶意构造的字段绕过前端逻辑。
最终，这种基于索引的命名策略，既保持了 HTML 表单的兼容性，又让 Express 能精准重建原始对象数组结构——是前后端协作中处理动态表单数据的稳健范式。
