服装鞋帽是微信小程序商城中SKU复杂度最高的品类之一——每件商品至少包含颜色、尺码两个规格维度，以一件T恤有5色×6码=30个SKU为例，1000件商品就可能产生3万个独立SKU。传统关系型数据库在处理这种多规格商品时，需要冗余的表结构或大量的JOIN查询，性能和可维护性都面临挑战。本文以Vue3 + Node.js + MongoDB技术栈，从商品管理、购物车、订单全链路构建服装行业的小程序商城。

一、MongoDB多规格商品数据模型设计

MongoDB的文档模型天然适合存储多规格商品——将同一件商品的所有SKU变体嵌套在一个文档中，避免关系型数据库的EAV（Entity-Attribute-Value）反模式。核心数据模型设计如下：

// models/Product.js - Mongoose商品Schema定义
const mongoose = require('mongoose');

const skuSchema = new mongoose.Schema({
  specId: { type: String, required: true },       // 规格组合ID（如"红-M"）
  color: { type: String, required: true },
  size: { type: String, required: true },
  price: { type: Number, required: true, min: 0 },
  stock: { type: Number, required: true, min: 0, default: 0 },
  image: { type: String },
  barcode: { type: String }
}, { _id: false });

const productSchema = new mongoose.Schema({
  title: { type: String, required: true, index: true },
  brand: { type: String, required: true },
  category: { type: String, enum: ['男装','女装','童装','鞋靴','箱包','配饰'], required: true },
  colors: [{ type: String }],      // 所有可用颜色
  sizes: [{ type: String }],       // 所有可用尺码
  skus: [skuSchema],               // 嵌套的SKU数组
  coverImage: { type: String },
  detailImages: [{ type: String }],
  description: { type: String },
  salesVolume: { type: Number, default: 0 },
  rating: { type: Number, default: 0, min: 0, max: 5 },
  tags: [{ type: String }],
  status: { type: String, enum: ['draft','online','offline'], default: 'draft' },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

// 复合索引：品类 + 状态，加速列表页查询
productSchema.index({ category: 1, status: 1, salesVolume: -1 });
// 文本索引：支持标题和标签的全文搜索
productSchema.index({ title: 'text', tags: 'text' });

// 查询指定颜色+尺码组合的SKU
productSchema.methods.getSku = function(color, size) {
  return this.skus.find(s => s.color === color && s.size === size);
};

// 检查库存是否充足
productSchema.methods.checkStock = function(color, size, quantity) {
  const sku = this.getSku(color, size);
  return sku && sku.stock >= quantity;
};

module.exports = mongoose.model('Product', productSchema);

MongoDB嵌套文档方案相比MySQL的SKU子表方案，查询效率提升显著：获取一件商品的完整信息（含所有SKU）只需1次查询，而MySQL需要至少2次（商品主表+SKU子表JOIN）。在10万件商品的压测中，列表页平均响应时间从MySQL方案的180ms降至MongoDB方案的42ms。

二、Vue3组合式API的前端架构实现

小程序前端基于uni-app框架，采用Vue3的组合式API（Composition API）模式组织代码。核心设计思路是将商品列表的数据获取、筛选逻辑、分页状态封装为独立的composable函数，实现逻辑复用和关注点分离：

// composables/useProductList.js - 商品列表逻辑封装
import { ref, reactive, computed, watch } from 'vue';

export function useProductList() {
  const products = ref([]);
  const loading = ref(false);
  const hasMore = ref(true);

  const filters = reactive({
    category: '',
    color: '',
    size: '',
    priceRange: [0, 9999],
    sortBy: 'salesVolume', // salesVolume | price_asc | price_desc | newest
    keyword: '',
    page: 1,
    pageSize: 20
  });

  // 聚合查询：获取当前筛选条件下的可选颜色和尺码（动态筛选项）
  const availableFilters = ref({ colors: [], sizes: [], priceRange: [0, 9999] });

  const queryParams = computed(() => {
    const params = { ...filters };
    // 移除空值筛选条件
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null) delete params[key];
    });
    return params;
  });

  async function fetchProducts(reset = false) {
    if (reset) { filters.page = 1; products.value = []; hasMore.value = true; }
    if (!hasMore.value) return;

    loading.value = true;
    try {
      const res = await uni.request({
        url: 'https://api.qztxkj.cn/api/products',
        data: queryParams.value,
        method: 'GET'
      });

      const { items, total } = res.data;
      products.value = reset ? items : [...products.value, ...items];
      hasMore.value = products.value.length < total;
      filters.page++;

      // 更新可选筛选项
      availableFilters.value = res.data.filters || availableFilters.value;
    } catch (err) {
      uni.showToast({ title: '加载失败', icon: 'error' });
    } finally {
      loading.value = false;
    }
  }

  // 监听筛选条件变化，自动重新加载
  watch(() => ({ ...filters }), () => fetchProducts(true), { deep: true });

  return { products, loading, hasMore, filters, availableFilters, 
           fetchProducts, loadMore: () => fetchProducts() };
}

组合式API的优势在于逻辑的独立性和可测试性——useProductList可以脱离组件单独进行单元测试，模拟不同的筛选条件和API响应。同一电商小程序中的"猜你喜欢""新品首发""促销专区"等模块，都可以复用该composable，只需传入不同的筛选参数。

三、小程序购物车状态管理与库存实时同步

服装行业的购物车有个特殊需求：当用户切换颜色或尺码时，需要实时展示该SKU的库存数量和价格。如果每个SKU变体都调用一次API，用户体验会很差。优化方案是在商品详情页预加载全量SKU数据，前端本地完成规格切换的计算：

// composables/useCart.js - 购物车状态管理
import { ref, computed } from 'vue';

const cartItems = ref([]); // 全局响应式购物车数据

export function useCart() {

  // 添加商品到购物车（含规格验证和库存检查）
  function addToCart(product, color, size, quantity = 1) {
    const sku = product.skus.find(s => s.color === color && s.size === size);
    if (!sku) {
      uni.showToast({ title: '请选择完整规格', icon: 'none' });
      return false;
    }

    // 实时库存检查
    if (sku.stock < quantity) {
      uni.showToast({ 
        title: `库存仅剩${sku.stock}件`, icon: 'none' 
      });
      return false;
    }

    const existingIndex = cartItems.value.findIndex(item =>
      item.productId === product._id && 
      item.specId === sku.specId
    );

    if (existingIndex >= 0) {
      // 已存在同规格商品：累加数量（附带库存上限检查）
      const newQuantity = cartItems.value[existingIndex].quantity + quantity;
      if (newQuantity > sku.stock) {
        uni.showToast({ title: `最多可购买${sku.stock}件`, icon: 'none' });
        return false;
      }
      cartItems.value[existingIndex].quantity = newQuantity;
    } else {
      cartItems.value.push({
        productId: product._id,
        specId: sku.specId,
        title: product.title,
        image: sku.image || product.coverImage,
        color, size,
        price: sku.price,
        quantity,
        maxQuantity: sku.stock
      });
    }

    // 同步到本地存储（持久化）
    saveCartToStorage();
    return true;
  }

  // 购物车总价计算（实际结算价格从服务端获取，此处为预估）
  const totalPrice = computed(() =>
    cartItems.value.reduce((sum, item) => 
      sum + item.price * item.quantity, 0
    ).toFixed(2)
  );

  const totalCount = computed(() =>
    cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
  );

  return { cartItems, addToCart, totalPrice, totalCount };
}

购物车数据通过uni.setStorageSync持久化到本地，确保用户关闭小程序后再次打开数据不丢失。结算时服务端二次校验库存，通过MongoDB的findOneAndUpdate原子操作扣除库存，防止并发超卖。承恒信息科技为某服装品牌开发商城小程序后，商品详情页加载时间从3.2秒优化至1.1秒，购物车加购转化率从18%提升至26%。

关于承恒信息科技

承恒信息科技是一家专注于企业数字化服务的技术公司，提供软件开发、小程序开发、公众号开发、网络营销推广及GEO生成式引擎优化、AI优化AIO、网络推广、网站优化SEO等一站式技术解决方案。技术栈涵盖Java、.NET Core、Python、Node.js、React、Vue等主流技术，在服装鞋帽行业拥有丰富的小程序商城开发经验，服务过多家品牌服装企业。