# 电商系统

**Repository Path**: javaweb-dev-tech/ecommerce

## Basic Information

- **Project Name**: 电商系统
- **Description**: 基于 SpringBoot + Vue3 开发的小型电商平台，前后端分离架构。支持商品分类 + SKU 多规格管理、购物车、订单、支付宝沙箱支付（可扩展策略模式）、统一用户角色体系。
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: feat/dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-03
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 生活集 · 电商平台

> 《JavaWeb 开发技术》课程实战案例 — 使用 SpringBoot + AI 编程工具从零开发完整电商系统

## 课程简介

本课程以开发一个小型电商平台为实战项目，学习以下技术栈：

- **SpringBoot 3.x** — 后端开发核心框架
- **Trae IDE** — AI 辅助编程工具
- **[superpowers-zh](https://github.com/jnMetaCode/superpowers-zh)** — AI 编程超能力 · 中文增强版；Trae 技能系统（需求分析、代码审查、Git 工作流等）
- **Frontend-Design** — UI 视觉设计与前端页面开发

## 项目概述

基于 SpringBoot + Vue3 的前后端分离电商平台。支持商品分类 + SKU 多规格管理、购物车、订单、支付宝沙箱支付、统一用户角色体系（BUYER / SELLER / ADMIN）。

## 技术栈

### 后端

- Java 17 + SpringBoot 3.5.9
- MyBatis + MySQL
- JWT + HandlerInterceptor 认证鉴权
- Flyway 数据库迁移
- 本地文件上传 + SpringBoot 静态资源映射
- 策略模式实现支付模块

### 前端

- Vue 3 + Composition API
- Vite 构建工具
- Pinia 状态管理
- Vue Router
- Element Plus UI 组件库
- Axios HTTP 请求

## AI 辅助开发流程

本项目使用 Trae IDE 的 Superpowers 技能系统进行开发，完整流程如下：

```
需求分析 (brainstorming)
    ↓
规格设计 (writing-plans)
    ↓
UI 视觉稿 (frontend-design)
    ↓
代码实现 (test-driven-development)
    ↓
代码审查 (chinese-code-review)
    ↓
Git 提交 (chinese-git-workflow)
```

### 核心技能说明

| 技能 | 用途 |
|------|------|
| brainstorming | 需求分析，探索用户意图，确定技术方案 |
| writing-plans | 编写详细的实现计划，拆解任务步骤 |
| frontend-design | 生成 UI 视觉稿，探索页面设计风格 |
| test-driven-development | 先写测试再实现，保证代码质量 |
| chinese-code-review | 代码审查，发现潜在问题 |
| chinese-git-workflow | 规范的 Git 分支管理及提交 |

## 快速开始

### 环境要求

- JDK 17+
- Maven 3.6+
- MySQL 8.0+
- Node.js 18+（前端）

### 后端启动

```bash
# 1. 创建数据库
mysql -u root -p -e "CREATE DATABASE ecommerce DEFAULT CHARACTER SET utf8mb4;"

# 2. 修改配置（如需要）
# 编辑 backend/src/main/resources/application.yml
# 修改数据库连接信息

# 3. 启动后端
cd backend
mvn spring-boot:run
```

启动成功后访问：`http://localhost:8080`

### 前端启动

```bash
cd frontend
npm install
npm run dev
```

启动成功后访问：`http://localhost:5173`

## 项目结构

```
ai_demo/
├── backend/                          # 后端服务
│   ├── src/main/java/
│   │   └── com/demo/ecommerce/
│   │       ├── config/               # 配置类
│   │       ├── controller/           # REST 控制器
│   │       ├── dto/                  # 数据传输对象
│   │       ├── entity/               # 实体类
│   │       ├── enums/                # 枚举
│   │       ├── exception/            # 全局异常处理
│   │       ├── interceptor/          # JWT 拦截器
│   │       ├── repository/           # MyBatis Mapper
│   │       ├── service/              # 业务逻辑
│   │       │   └── payment/          # 支付策略模式
│   │       └── util/                 # 工具类
│   ├── src/main/resources/
│   │   ├── application.yml           # 应用配置
│   │   ├── db/migration/             # Flyway 迁移脚本
│   │   └── mapper/                   # MyBatis XML 映射
│   ├── API.md                        # API 接口文档
│   └── pom.xml
├── frontend/                         # 前端应用
│   └── src/
│       ├── api/                      # API 请求封装
│       ├── components/               # 公共组件
│       ├── layouts/                  # 布局组件
│       ├── pages/                    # 页面组件
│       ├── router/                   # 路由配置
│       └── stores/                   # Pinia 状态管理
├── docs/
│   └── superpowers/
│       ├── specs/                    # 设计规格
│       ├── plans/                    # 实现计划
│       └── ui/                       # UI 视觉稿
└── readme.md
```

## 已实现功能

### 认证模块

- [x] 用户注册（BUYER / SELLER / ADMIN）
- [x] 用户登录（JWT Token）
- [x] 获取当前用户信息

### 分类模块

- [x] 获取分类树
- [x] 分类 CRUD（管理员）

### 商品模块

- [x] 商品列表（分页、分类筛选）
- [x] 商品详情（含 SKU 和规格）
- [x] 商品 CRUD（卖家 / 管理员）
- [x] 商品上架 / 下架
- [x] 规格子资源 API（添加 / 修改 / 删除）
- [x] 规格值子资源 API（添加 / 修改 / 删除）
- [x] SKU 子资源 API（创建 / 批量生成 / 更新 / 删除）
- [x] 笛卡尔积批量生成 SKU
- [x] 图片上传（本地存储，多张上传）

### 购物车模块

- [x] 获取购物车列表
- [x] 加入购物车（自动合并同 SKU）
- [x] 更新购物车条目（数量 / 选中状态）
- [x] 删除购物车条目
- [x] 库存校验

### 订单模块

- [x] 创建订单（扣减库存）
- [x] 我的订单列表
- [x] 订单详情
- [x] 取消订单（恢复库存）
- [x] 确认收货

### 支付模块

- [x] 策略模式支付（PaymentStrategy）
- [x] 支付宝沙箱支付
- [x] 支付回调处理
- [x] 支付状态查询

### 管理后台

- [x] 全平台订单列表
- [x] 订单发货
- [x] 用户列表
- [x] 用户启用 / 禁用

### 前端页面

- [x] 首页
- [x] 商品列表 + 分页
- [x] 商品详情 + 规格选择器
- [x] 购物车
- [x] 确认订单
- [x] 支付页
- [x] 我的订单列表 + 订单详情
- [x] 登录 / 注册
- [x] 个人中心
- [x] 管理后台（数据概览 / 商品管理 / 分类管理 / 订单管理 / 用户管理）
- [x] 图片上传组件
- [x] 规格选择器组件
- [x] 分页组件
- [x] 商品卡片组件

### 角色权限

| 角色 | 说明 |
|------|------|
| BUYER | 浏览商品、购物车、下单、支付 |
| SELLER | 发布商品、查看自己商品的订单 |
| ADMIN | 全平台管理（商品 / 分类 / 订单 / 用户） |

### 数据模型

11 张核心数据表：`user`、`category`、`product`、`product_spec`、`product_spec_option`、`product_sku`、`cart_item`、`order`、`order_item`、`payment_record`

### 测试覆盖

后端共 122 个单元测试全部通过，覆盖以下模块：

- 认证服务（8 个测试）
- 分类服务 + 控制器（15 个测试）
- 商品服务 + 控制器（16 个测试）
- 规格服务 + 控制器（11 个测试）
- SKU 服务 + 控制器（9 个测试）
- 图片上传服务 + 控制器（7 个测试）
- 购物车服务 + 控制器（16 个测试）
- 订单服务 + 控制器（17 个测试）
- 支付策略 + 控制器（7 个测试）
- 管理后台控制器（4 个测试）
- 全局异常处理（4 个测试）
- JWT 工具（7 个测试）

## 设计文档

- [电商系统设计规格](docs/superpowers/specs/2026-05-02-ecommerce-design.md)
- [商品图片上传设计](docs/superpowers/specs/2026-05-03-product-image-upload-design.md)
- [UI 视觉稿](docs/superpowers/ui/ecommerce-ui-complete.html)
- [完整实现计划](docs/superpowers/plans/2026-05-03-ecommerce-complete.md)

## 开发流程

当前使用 `feat/ecommerce-ui-design` 功能分支开发，完成后合并到 `main`。

```bash
# 拉取最新代码
git pull origin main

# 切换到功能分支
git checkout feat/ecommerce-ui-design

# 开发完成后提交 PR
```

## License

MIT