类别	技术栈
后端	Spring Boot 3.x、MyBatis-Plus、Spring Security、JWT、Redis、RabbitMQ
数据库	MySQL 8.x（主从分离）、Redis（缓存/分布式锁）
前端	Vue 3 + TypeScript、Vue Router、Pinia、Element Plus / Vant
部署	Nginx、Docker、Jenkins（CI/CD）、阿里云/腾讯云
其他	支付宝/微信支付API、OSS文件存储、短信验证码（阿里云）

二、系统架构

前端 (Vue) → HTTP API → 后端 (Spring Boot) → MySQL/Redis
       ↑           ↓
       用户浏览器   第三方服务（支付/短信/OSS）

前后端分离：前端独立部署，通过Axios调用后端RESTful API。
分布式缓存：Redis存储验证码、商品热数据、购物车临时数据。
消息队列：RabbitMQ处理订单超时取消、库存回滚等异步任务。
安全控制：JWT Token鉴权 + Spring Security权限管理。

三、功能模块

1. 用户端功能

用户系统：注册/登录（短信+密码）、第三方登录（微信）、个人信息管理。
商品系统：分类展示、关键词搜索、商品详情（高清图轮播）、库存实时显示。
购物车：商品增减、批量选择、实时计算总价。
订单系统：下单（地址选择）、订单状态跟踪、支付集成（支付宝/微信）、超时自动取消。
促销活动：优惠券、限时折扣、拼团功能（可选）。

2. 管理端功能

商品管理：CRUD、批量导入/导出、库存预警。
订单管理：订单查询、手动退款、物流单号录入。
数据分析：热销商品统计、用户购买行为分析（集成ECharts）。
营销工具：优惠券发放、活动页面配置。

四、核心实现步骤

1. 数据库设计

核心表：user（用户）、product（商品）、product_category（分类）、cart（购物车）、order（订单）、order_item（订单明细）、address（收货地址）。
示例片段（MySQL）：

  CREATE TABLE `product` (
    `id` BIGINT PRIMARY KEY AUTO_INCREMENT,
    `name` VARCHAR(100) NOT NULL COMMENT '商品名称',
    `price` DECIMAL(10,2) NOT NULL COMMENT '售价',
    `stock` INT NOT NULL DEFAULT 0 COMMENT '库存',
    `category_id` BIGINT COMMENT '分类ID',
    `status` TINYINT NOT NULL DEFAULT 1 COMMENT '1-上架 0-下架',
    `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP
  );

2. 后端核心逻辑

商品查询优化：使用Redis缓存热门商品，MySQL查询添加索引。
订单并发控制：

  // 使用Redis分布式锁防止超卖
  public boolean reduceStock(Long productId, Integer quantity) {
      String lockKey = "product_lock:" + productId;
      RLock lock = redissonClient.getLock(lockKey);
      try {
          if (lock.tryLock(5, TimeUnit.SECONDS)) {
              Product product = productMapper.selectById(productId);
              if (product.getStock() >= quantity) {
                  product.setStock(product.getStock() - quantity);
                  productMapper.updateById(product);
                  return true;
              }
              return false;
          }
      } finally {
          lock.unlock();
      }
      return false;
  }

支付回调处理：异步验证支付宝/微信签名，更新订单状态并触发消息通知。

3. 前端关键实现

商品懒加载：Vue中使用Intersection Observer实现滚动加载更多。
购物车实时同步：Pinia管理全局状态，本地存储临时数据。

  // Pinia Store示例
  export const useCartStore = defineStore('cart', {
    state: () => ({ items: [] as CartItem[] }),
    actions: {
      async addItem(product: Product) {
        const res = await api.addToCart({ productId: product.id });
        this.items = res.data;
      }
    }
  });