只想静静地老湿敷Spring Boot 2.x + Vue 3 实战：从零搭建一个带支付宝沙箱支付的咖啡商城
在当今数字化浪潮中，电商系统已成为开发者必须掌握的核心技能之一。本文将带你从零开始，使用Spring Boot 2.x和Vue 3构建一个完整的咖啡商城系统，并集成支付宝沙箱支付功能。不同于简单的CRUD教程，我们将深入前后端分离架构的设计细节，解决实际开发中的各种挑战。
1. 项目架构设计与技术选型
1.1 整体架构设计
我们采用经典的前后端分离架构，后端提供RESTful API，前端通过axios消费这些API。系统主要分为三个层次：
- 表现层：Vue 3 + Element Plus构建的用户界面
- 业务逻辑层：Spring Boot处理核心业务逻辑
- 数据持久层：MyBatis-Plus操作MySQL数据库
技术栈对比表：
| 技术领域 | 选型方案 | 优势分析 |
|---|---|---|
| 前端框架 | Vue 3 + Composition API | 更好的TypeScript支持，性能提升40% |
| UI组件库 | Element Plus | 专为Vue 3优化，丰富的电商组件 |
| 后端框架 | Spring Boot 2.6.x | 稳定的企业级Java框架 |
| ORM工具 | MyBatis-Plus 3.5.x | 简化CRUD操作，内置分页插件 |
| 支付集成 | 支付宝沙箱环境 | 安全测试，免真实资金流动 |
1.2 开发环境准备
确保你的开发环境包含以下组件：
bash复制# JDK安装验证
java -version
# 应输出类似：openjdk version "1.8.0_302"
# Node.js版本检查
node -v
# 推荐v16.x以上
# Maven版本验证
mvn -v
# 推荐3.6.x以上
数据库配置示例（application.yml）：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/coffee_shop?useSSL=false&serverTimezone=UTC
username: root
password: yourpassword
driver-class-name: com.mysql.cj.jdbc.Driver
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 后端核心模块实现
2.1 商品模块设计与实现
商品模块采用领域驱动设计(DDD)思想，核心实体关系如下：
java复制// 商品实体类示例
@Data
@TableName("product")
public class Product {
@TableId(type = IdType.AUTO)
private Long id;
private String name;
private BigDecimal price;
private Integer stock;
private String description;
private String imageUrl;
@TableField(fill = FieldFill.INSERT)
private LocalDateTime createTime;
}
商品分页查询接口实现：
java复制@GetMapping("/products")
public R listProducts(
@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer size,
@RequestParam(required = false) String keyword) {
Page<Product> pageInfo = new Page<>(page, size);
LambdaQueryWrapper<Product> queryWrapper = new LambdaQueryWrapper<>();
if (StringUtils.isNotBlank(keyword)) {
queryWrapper.like(Product::getName, keyword);
}
return R.ok().put("data", productService.page(pageInfo, queryWrapper));
}
2.2 订单系统关键实现
订单状态机设计：
mermaid复制stateDiagram
[*] --> PENDING
PENDIN