JavaScript购物车下单后更新JSON商品countInStock库存方案咨询

首先明确：该功能完全可以实现，但需要前后端配合完成，前端没有权限直接修改服务端存储的静态JSON文件内容。

步骤1：后端新增库存扣减接口 #

你需要在后端新增一个POST类型的库存扣减接口，示例路径为/api/orders/reduce-stock，接口逻辑如下：

• 接收参数：购物车商品列表，每个商品携带productId（商品ID）和qty（购买数量）
• 校验逻辑：遍历所有商品，先查询对应商品的当前库存
  • 若任意商品的countInStock < 购买数量，直接返回库存不足的错误提示
  • 所有商品库存充足时，批量更新商品的countInStock = countInStock - 购买数量，操作完成后返回成功标识
• 注意：后端必须加事务控制，任意商品扣减失败时要回滚所有已执行的库存更新操作，避免数据不一致

步骤2：前端新增接口调用逻辑 #

2.1 在api.js中新增扣减库存的请求方法 #

// 新增到你的api.js文件中
export const reduceStock = async (cartItems) => {
  try {
    const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null;
    const response = await fetch('/api/orders/reduce-stock', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': userInfo ? `Bearer ${userInfo.token}` : ''
      },
      body: JSON.stringify(
        cartItems.map(item => ({
          productId: item.product,
          qty: item.qty
        }))
      )
    });
    return await response.json();
  } catch (err) {
    return { error: '库存扣减失败，请稍后重试' };
  }
};

2.2 修改CartScreen的结账按钮触发逻辑 #

调整after_render中结账按钮的点击事件，先调用库存扣减接口，成功后再执行后续操作：

// 导入新增的reduceStock方法
import { reduceStock } from '../api';

// 原结账按钮点击逻辑替换为以下内容
document.getElementById('checkout-button').addEventListener('click', async () => {
  // 未登录先跳登录页
  if (!localStorage.getItem('userInfo')) {
    document.location.hash = '/signin';
    return;
  }
  const cartItems = getCartItems();
  const res = await reduceStock(cartItems);
  if (res.error) {
    alert(res.error);
    return;
  }
  // 扣减成功后清空购物车，跳转订单页
  setCartItems([]);
  alert('下单成功，库存已更新');
  document.location.hash = '/order-success';
});

注意事项 #

• 所有库存校验和扣减逻辑必须放在后端实现，前端的库存显示和数量限制仅作为交互优化，绝对不能信任前端传递的库存参数，避免出现超卖问题
• 高并发场景下建议搭配数据库乐观锁、分布式锁等方案进一步避免超卖风险

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