Node.js+MongoDB购物车商品数量增减功能故障排查咨询

前端侧问题修复 #

1. 按钮无法正确获取数量输入框 #

原按钮onclick事件中，this.parentNode.querySelector('.form-control')无法找到目标input元素（input不在按钮的父容器内），导致input参数为null，后续赋值操作直接失败。

修复代码：

• 减号按钮修改input参数为this.parentNode.nextElementSibling
• 加号按钮修改input参数为this.parentNode.previousElementSibling

修改后的按钮代码：

<div class="input-group-btn">
    <button onclick="qty('<%= prdct.item._id %>','<%= prdct.item.saleprice %>',-1,'<%= prdct.item.stock %>', this.parentNode.nextElementSibling, document.querySelector('#subtotal'))" class="btn btn-sm btn-primary btn-minus" >
    <i class="fa fa-minus"></i>
    </button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="<%= prdct.quantity %>">
<div class="input-group-btn">
    <button onclick="qty('<%= prdct.item._id %>','<%= prdct.item.saleprice %>',1,'<%= prdct.item.stock %>', this.parentNode.previousElementSibling, document.querySelector('#subtotal'))" class="btn btn-sm btn-primary btn-plus">
        <i class="fa fa-plus"></i>
    </button>
</div>

2. 数量赋值逻辑重复 #

qty函数中存在重复赋值input.value = newQty; input.value = data.qty;，保留后者并确保数量不小于1即可：

修复后的qty函数片段：

// 替换原重复赋值代码
input.value = Math.max(1, data.qty);
subtotal.innerHTML = data.sub_total;

const totalElement = document.querySelector('#total');
totalElement.innerHTML = data.total;

3. 错误信息调试优化 #

在catch块中添加错误日志，便于排查前端请求问题：

catch (err) {
  console.error('请求失败:', err);
  alert('something went wrong');
}

后端侧问题修复 #

1. 请求参数获取错误 #

前端使用POST请求传递JSON数据，但后端仍通过req.query获取参数，需改为req.body，同时转换参数类型避免字符串运算错误：

修复后的控制器参数获取代码：

const prdctId = req.body.prdctId;
const val = parseInt(req.body.val);
const user_id = req.session.user_id;
const productQty = parseInt(req.body.productQty);
const prodctPrice = parseFloat(req.body.price);

2. 无效变量与错误判断逻辑 #

• 删除未定义的console.log(reach )语句
• 修改val的有效性判断，只允许±1的合法增减操作：

if (isNaN(val) || ![-1, 1].includes(val)) {
  return res.status(400).json({ error: 'Invalid quantity change value' });
}

3. 库存数量判断逻辑恢复 #

取消库存判断的注释，确保修改后的数量不超过商品库存：

if (qty > productQty) {
  return res.status(400).json({ error: 'Quantity exceeds available stock' });
}

4. 修复完整控制器代码 #

const change_qty = async (req, res) => {
  try {
    const prdctId = req.body.prdctId;
    const val = parseInt(req.body.val);
    const user_id = req.session.user_id;
    const productQty = parseInt(req.body.productQty);
    const prodctPrice = parseFloat(req.body.price);

    // Find the cart
    const cartData = await Cart.findOne({ user_id: user_id }).populate('product.item');

    // Check if the product already exists in the cart
    let foundProduct = null;
    for (let prdct of cartData.product) {
      if (prdct.item._id == prdctId) {
        foundProduct = prdct;
        break;
      }
    }
    if (!foundProduct) {
      return res.status(404).json({ error: 'Product not found' });
    }
    if (isNaN(val) || ![-1, 1].includes(val)) {
      return res.status(400).json({ error: 'Invalid quantity change value' });
    }

    let qty = foundProduct.quantity + val;
    qty = Math.max(1, qty); // 确保数量不小于1
    qty = Math.min(qty, productQty); // 确保数量不超过库存
    const sub_total = qty * prodctPrice;

    foundProduct.sub_total = sub_total;
    foundProduct.quantity = qty;

    // Save the updated cart
    await cartData.save();

    // Calculate the total amount
    let total = 0;
    cartData.product.forEach(amnt => {
      total += amnt.sub_total;
    });
    cartData.total_amount = total;

    // Save the cart with updated total amount
    await cartData.save();

    res.json({ qty, sub_total, total });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Internal Server Error' });
  }
};

验证步骤 #

1. 打开浏览器控制台（F12），点击增减按钮，查看是否有console.log(id, q, price)的输出
2. 检查网络请求是否成功发送，后端返回的JSON数据是否正确
3. 验证数量更新后，输入框、小计、总计是否同步更新

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