商城系统是企业级应用中最具代表性的项目类型之一。一个完整的商城系统涵盖了用户认证、商品管理、购物车、订单处理、支付集成、库存管理、物流跟踪等丰富的业务场景。通过开发商城系统，可以全面掌握前后端分离架构、数据库设计、接口设计、状态管理等全栈开发的核心技能。
本教程将采用前后端分离的架构：
后端：Java + Spring Boot + MyBatis Plus + MySQL + JWT + Spring Security
前端：Vue 3 + Element Plus + Pinia + Vue Router + Axios
我们将从零开始，搭建一个功能完整的B2C商城系统，实现以下功能：
用户端功能：
用户注册、登录、JWT认证
商品浏览、分类筛选、关键词搜索、商品详情
购物车管理（添加商品、修改数量、删除商品）
订单创建、订单列表、订单详情
收货地址管理
管理端功能：
商品管理（添加、编辑、上下架）
订单管理（发货、订单状态更新）
分类管理（添加、编辑、删除）
第一部分：系统架构与数据库设计
1.1 系统架构图
┌─────────────────────────────────────────────────────────────────┐
│ 前端（Vue 3） │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 商城首页 │ │ 商品列表 │ │ 购物车 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 订单中心 │ │ 个人中心 │ │ 收货地址 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────┬───────────────────────────────────────┘
│ HTTP/HTTPS + JSON
▼
┌─────────────────────────────────────────────────────────────────┐
│ 后端（Spring Boot） │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Controller层 │ │
│ │ AuthController │ ProductController │ OrderController │ │
│ └─────────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Service层 │ │
│ │ 业务逻辑处理、事务管理、权限校验 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Mapper层 │ │
│ │ MyBatis Plus 数据库操作 │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────┬───────────────────────────────────────┘
│ JDBC
▼
┌─────────────────────────────────────────────────────────────────┐
│ MySQL数据库 │
│ user │ product │ category │ cart │ order │ order_item │ address│
└─────────────────────────────────────────────────────────────────┘
1.2 API接口设计
在设计商城系统之前，我们首先梳理所有需要的API接口：
1.3 统一响应格式
/**
* 统一响应结果类
* 所有API接口统一返回此格式，便于前端统一处理
*/
public class Result<T> {
private Integer code; // 状态码：200成功，400参数错误，401未认证，403无权限，404不存在，500服务器错误
private String message; // 提示信息
private T data; // 响应数据
private Long timestamp; // 时间戳，用于日志追踪
// 成功响应（带数据）
public static <T> Result<T> success(T data) {
return new Result<>(200, "success", data);
}
// 成功响应（无数据）
public static <T> Result<T> success() {
return new Result<>(200, "success", null);
}
// 失败响应
public static <T> Result<T> error(String message) {
return new Result<>(500, message, null);
}
// 自定义状态码失败
public static <T> Result<T> error(Integer code, String message) {
return new Result<>(code, message, null);
}
}
1.4 数据库设计
1.4.1 数据库创建
-- 创建商城数据库
CREATE DATABASE IF NOT EXISTS mall_db
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
USE mall_db;
1.4.2 用户表（user）
用户表存储所有注册用户的信息，包括用户名、密码、手机号、邮箱等。密码使用BCrypt加密存储，确保安全性。
CREATE TABLE `user` (
`id` BIGINT NOT NULL AUTO_INCREMENT COMMENT '用户ID',
`username` VARCHAR(50) NOT NULL COMMENT '用户名（唯一）',
`password` VARCHAR(255) NOT NULL COMMENT '密码（BCrypt加密）',
`nickname` VARCHAR(50) COMMENT '昵称',
`real_name` VARCHAR(50) COMMENT '真实姓名',
`phone` VARCHAR(20) COMMENT '手机号',
`email` VARCHAR(100) COMMENT '邮箱',
`avatar` VARCHAR(500) COMMENT '头像URL',
`gender` TINYINT DEFAULT 0 COMMENT '性别：0未知 1男 2女',
`role` VARCHAR(20) NOT NULL DEFAULT 'user' COMMENT '角色：admin管理员 user普通用户',
`status` TINYINT NOT NULL DEFAULT 1 COMMENT '状态：0禁用 1启用',
`last_login_time` DATETIME COMMENT '最后登录时间',
`last_login_ip` VARCHAR(45) COMMENT '最后登录IP',
`create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
`update_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_username` (`username`),
UNIQUE KEY `uk_phone` (`phone`),
UNIQUE KEY `uk_email` (`email`),
KEY `idx_role` (`role`),
KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='用户表';
1.4.3 商品分类表（category）
商品分类表用于存储商品的层级分类，支持无限级分类（一级、二级、三级分类）。
CREATE TABLE `category` (
`id` BIGINT NOT NULL AUTO_INCREMENT COMMENT '分类ID',
`parent_id` BIGINT NOT NULL DEFAULT 0 COMMENT '父分类ID，0表示一级分类',
`name` VARCHAR(50) NOT NULL COMMENT '分类名称',
`level` TINYINT NOT NULL DEFAULT 1 COMMENT '层级：1一级 2二级 3三级',
`sort_order` INT DEFAULT 0 COMMENT '排序序号，越小越靠前',
`icon` VARCHAR(500) COMMENT '分类图标URL',
`status` TINYINT NOT NULL DEFAULT 1 COMMENT '状态：0禁用 1启用',
`create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
`update_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_parent_id` (`parent_id`),
KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品分类表';
1.4.4 商品表（product）
商品表存储所有商品信息，包括名称、价格、库存、图片、描述等。
CREATE TABLE `product` (
`id` BIGINT NOT NULL AUTO_INCREMENT COMMENT '商品ID',
`category_id` BIGINT NOT NULL COMMENT '分类ID',
`name` VARCHAR(200) NOT NULL COMMENT '商品名称',
`subtitle` VARCHAR(500) COMMENT '商品副标题',
`main_image` VARCHAR(500) COMMENT '主图URL',
`images` TEXT COMMENT '商品图片列表，JSON格式存储',
`detail` TEXT COMMENT '商品详情（富文本HTML）',
`price` DECIMAL(10,2) NOT NULL COMMENT '商品价格',
`original_price` DECIMAL(10,2) COMMENT '原价（划线价）',
`stock` INT NOT NULL DEFAULT 0 COMMENT '库存数量',
`sales` INT NOT NULL DEFAULT 0 COMMENT '销量',
`status` TINYINT NOT NULL DEFAULT 1 COMMENT '状态：0下架 1上架',
`sort_order` INT DEFAULT 0 COMMENT '排序序号',
`create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
`update_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_category_id` (`category_id`),
KEY `idx_status` (`status`),
KEY `idx_price` (`price`),
KEY `idx_sales` (`sales`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品表';
1.4.5 购物车表（cart）
购物车表存储用户添加到购物车的商品信息，每个用户每件商品只有一条记录。
CREATE TABLE `cart` (
`id` BIGINT NOT NULL AUTO_INCREMENT,
`user_id` BIGINT NOT NULL COMMENT '用户ID',
`product_id` BIGINT NOT NULL COMMENT '商品ID',
`quantity` INT NOT NULL DEFAULT 1 COMMENT '购买数量',
`checked` TINYINT NOT NULL DEFAULT 1 COMMENT '是否选中：0未选中 1选中',
`create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
`update_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_user_product` (`user_id`, `product_id`),
KEY `idx_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='购物车表';
1.4.6 订单表（order）
订单表存储每个订单的主信息，包括订单号、总金额、收货地址、订单状态等。
CREATE TABLE `order` (
`id` BIGINT NOT NULL AUTO_INCREMENT,
`order_no` VARCHAR(32) NOT NULL COMMENT '订单号（唯一）',
`user_id` BIGINT NOT NULL COMMENT '用户ID',
`total_amount` DECIMAL(10,2) NOT NULL COMMENT '订单总金额',
`pay_amount` DECIMAL(10,2) DEFAULT 0.00 COMMENT '实际支付金额',
`freight_amount` DECIMAL(10,2) DEFAULT 0.00 COMMENT '运费金额',
`order_status` TINYINT NOT NULL DEFAULT 0 COMMENT '订单状态：0待支付 1已支付 2已发货 3已完成 4已取消 5已关闭',
`pay_status` TINYINT DEFAULT 0 COMMENT '支付状态：0未支付 1已支付',
`shipping_status` TINYINT DEFAULT 0 COMMENT '发货状态：0未发货 1已发货 2已收货',
`payment_time` DATETIME COMMENT '支付时间',
`delivery_time` DATETIME COMMENT '发货时间',
`receive_time` DATETIME COMMENT '收货时间',
`close_time` DATETIME COMMENT '关闭时间',
`cancel_time` DATETIME COMMENT '取消时间',
`receiver_name` VARCHAR(50) NOT NULL COMMENT '收货人姓名',
`receiver_phone` VARCHAR(20) NOT NULL COMMENT '收货人电话',
`receiver_province` VARCHAR(50) COMMENT '省份',
`receiver_city` VARCHAR(50) COMMENT '城市',
`receiver_district` VARCHAR(50) COMMENT '区/县',
`receiver_address` VARCHAR(200) COMMENT '详细地址',
`user_note` VARCHAR(500) COMMENT '用户备注',
`create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
`update_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_order_no` (`order_no`),
KEY `idx_user_id` (`user_id`),
KEY `idx_order_status` (`order_status`),
KEY `idx_create_time` (`create_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='订单表';
1.4.7 订单商品表（order_item）
订单商品表存储每个订单中包含的商品明细，冗余存储商品的快照信息（防止商品信息变更影响订单）。
CREATE TABLE `order_item` (
`id` BIGINT NOT NULL AUTO_INCREMENT,
`order_id` BIGINT NOT NULL COMMENT '订单ID',
`order_no` VARCHAR(32) NOT NULL COMMENT '订单号',
`product_id` BIGINT NOT NULL COMMENT '商品ID',
`product_name` VARCHAR(200) NOT NULL COMMENT '商品名称（快照）',
`product_image` VARCHAR(500) COMMENT '商品图片（快照）',
`product_price` DECIMAL(10,2) NOT NULL COMMENT '商品单价（快照）',
`quantity` INT NOT NULL COMMENT '购买数量',
`total_amount` DECIMAL(10,2) NOT NULL COMMENT '小计金额',
`create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_order_id` (`order_id`),
KEY `idx_order_no` (`order_no`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='订单商品表';
1.4.8 收货地址表（address）
收货地址表存储用户的多个收货地址，支持设置默认地址。
CREATE TABLE `address` (
`id` BIGINT NOT NULL AUTO_INCREMENT,
`user_id` BIGINT NOT NULL COMMENT '用户ID',
`receiver_name` VARCHAR(50) NOT NULL COMMENT '收货人姓名',
`receiver_phone` VARCHAR(20) NOT NULL COMMENT '收货人电话',
`province` VARCHAR(50) COMMENT '省份',
`city` VARCHAR(50) COMMENT '城市',
`district` VARCHAR(50) COMMENT '区/县',
`detail_address` VARCHAR(200) COMMENT '详细地址',
`is_default` TINYINT NOT NULL DEFAULT 0 COMMENT '是否默认地址：0否 1是',
`create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
`update_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_user_id` (`user_id`),
KEY `idx_is_default` (`is_default`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='收货地址表';
1.4.9 初始化数据
-- 插入管理员账户（密码：admin123，BCrypt加密后的密文）
INSERT INTO `user` (`username`, `password`, `nickname`, `role`) VALUES
('admin', '$2a$10$N.Zq9qZ1xXkLJX5tRrJj5uQ8l9o0iP7lKjHgFdSaSdFgHjJkKlL;', '系统管理员', 'admin');
-- 插入商品分类数据
INSERT INTO `category` (`parent_id`, `name`, `level`, `sort_order`) VALUES
(0, '手机数码', 1, 1),
(0, '电脑办公', 1, 2),
(0, '家用电器', 1, 3),
(1, '手机通讯', 2, 1),
(1, '数码配件', 2, 2),
(2, '电脑整机', 2, 1),
(2, '电脑配件', 2, 2);
-- 插入商品数据
INSERT INTO `product` (`category_id`, `name`, `price`, `stock`, `main_image`, `detail`) VALUES
(4, 'iPhone 15 Pro 256GB', 8999.00, 100, '/images/iphone15.jpg', 'iPhone 15 Pro 详细描述.....'),
(5, '小米充电宝 20000mAh', 99.00, 500, '/images/powerbank.jpg', '大容量移动电源...'),
(6, 'MacBook Pro 14英寸', 14999.00, 50, '/images/macbook.jpg', '苹果笔记本电脑详细描述...');
