Spring Boot 3.x 全栈电商实战：Vue 3 + MySQL 8 构建农产品交易平台
在数字化转型浪潮中，农产品电商平台正成为连接农户与消费者的重要桥梁。本文将带您从零开始构建一个基于Spring Boot 3.x的全栈电商系统，整合Vue 3前端框架与MySQL 8数据库，打造高性能、易维护的农产品交易解决方案。
1. 技术栈选型与项目初始化
现代电商平台需要兼顾开发效率与系统性能。我们选择的技术组合具备以下优势：
- Spring Boot 3.x：提供自动配置、嵌入式容器等开箱即用特性，显著降低Java后端开发复杂度
- Vue 3：组合式API和响应式系统大幅提升前端开发体验
- MySQL 8：窗口函数、CTE等高级特性为复杂业务查询提供支持
1.1 项目初始化步骤
使用Spring Initializr创建基础项目结构：
# 通过curl快速生成项目 curl https://start.spring.io/starter.zip \ -d dependencies=web,mysql,data-jpa \ -d javaVersion=17 \ -d packaging=jar \ -d bootVersion=3.2.0 \ -d artifactId=farm-product-platform \ -o farm-product-platform.zip关键依赖说明：
| 依赖项 | 版本 | 作用 |
|---|---|---|
| spring-boot-starter-web | 3.2.0 | Web MVC支持 |
| spring-boot-starter-data-jpa | 3.2.0 | ORM框架集成 |
| mysql-connector-j | 8.0.33 | MySQL驱动 |
| lombok | 1.18.28 | 简化POJO编写 |
提示：建议使用Java 17+以获得完整的Spring Boot 3.x特性支持，包括Record类型和密封类等现代语言特性
2. 领域模型设计与数据库构建
农产品电商的核心实体包括商品、订单、用户三大模块，其ER关系如下图所示：
用户(User) ||--o{ 订单(Order) : "1:N" 订单(Order) ||--|{ 订单项(OrderItem) : "1:N" 商品(Product) ||--o{ 订单项(OrderItem) : "1:N" 商品(Product) }|--|| 商品类别(Category) : "N:1"2.1 JPA实体设计示例
@Entity @Table(name = "products") @Getter @Setter public class Product { @Id @GeneratedValue(strategy = IDENTITY) private Long id; @Column(nullable = false) private String name; @Column(columnDefinition = "TEXT") private String description; @Column(precision = 10, scale = 2) private BigDecimal price; @ManyToOne @JoinColumn(name = "category_id") private Category category; @Column(name = "stock_quantity") private Integer stockQuantity; @Column(name = "image_url") private String imageUrl; @CreationTimestamp private LocalDateTime createdAt; }2.2 数据库优化策略
针对农产品电商特点，我们采用以下MySQL优化方案：
为高频查询字段创建组合索引：
CREATE INDEX idx_product_search ON products(name, category_id, price);使用JSON类型存储商品扩展属性：
ALTER TABLE products ADD COLUMN attributes JSON;配置连接池参数（application.yml）：
spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 1800000
3. 核心业务逻辑实现
3.1 商品服务层设计
商品模块需要支持分页查询、条件筛选等典型电商功能：
@Service @RequiredArgsConstructor public class ProductService { private final ProductRepository productRepo; public Page<Product> searchProducts(ProductSearchCriteria criteria, Pageable pageable) { return productRepo.findAll((root, query, cb) -> { List<Predicate> predicates = new ArrayList<>(); if (StringUtils.hasText(criteria.getKeyword())) { predicates.add(cb.like(root.get("name"), "%" + criteria.getKeyword() + "%")); } if (criteria.getCategoryId() != null) { predicates.add(cb.equal(root.get("category").get("id"), criteria.getCategoryId())); } if (criteria.getMinPrice() != null) { predicates.add(cb.ge(root.get("price"), criteria.getMinPrice())); } return cb.and(predicates.toArray(new Predicate[0])); }, pageable); } @Transactional public void reduceStock(Long productId, int quantity) { Product product = productRepo.findById(productId) .orElseThrow(() -> new EntityNotFoundException("Product not found")); if (product.getStockQuantity() < quantity) { throw new BusinessException("Insufficient stock"); } product.setStockQuantity(product.getStockQuantity() - quantity); } }3.2 订单处理流程
订单创建涉及库存校验、支付预处理等关键步骤：
@Transactional public Order createOrder(OrderRequest request, Long userId) { // 1. 验证用户 User user = userRepo.findById(userId) .orElseThrow(() -> new EntityNotFoundException("User not found")); // 2. 校验并锁定库存 List<OrderItem> items = request.getItems().stream() .map(item -> { Product product = productService.getProduct(item.getProductId()); productService.reduceStock(product.getId(), item.getQuantity()); return OrderItem.builder() .product(product) .quantity(item.getQuantity()) .unitPrice(product.getPrice()) .build(); }).collect(Collectors.toList()); // 3. 计算总价 BigDecimal totalAmount = items.stream() .map(item -> item.getUnitPrice().multiply(BigDecimal.valueOf(item.getQuantity()))) .reduce(BigDecimal.ZERO, BigDecimal::add); // 4. 创建订单 Order order = Order.builder() .user(user) .items(items) .totalAmount(totalAmount) .status(OrderStatus.CREATED) .shippingAddress(request.getShippingAddress()) .build(); return orderRepo.save(order); }4. 前后端协同开发
4.1 Vue 3前端工程配置
使用Vite创建Vue 3项目：
npm create vite@latest farm-product-frontend --template vue-ts关键依赖配置（package.json片段）：
{ "dependencies": { "axios": "^1.3.4", "pinia": "^2.0.33", "vue-router": "^4.2.2", "element-plus": "^2.3.3" } }4.2 API接口设计规范
采用RESTful风格设计前后端交互接口：
| 资源 | 方法 | 路径 | 描述 |
|---|---|---|---|
| 商品 | GET | /api/products | 分页查询商品 |
| 商品 | GET | /api/products/{id} | 获取商品详情 |
| 订单 | POST | /api/orders | 创建订单 |
| 订单 | GET | /api/orders/{id} | 查询订单详情 |
4.3 跨域解决方案
Spring Boot配置CORS支持：
@Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:5173") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowCredentials(true) .maxAge(3600); } }5. 生产环境准备
5.1 性能优化措施
启用JPA二级缓存（application.yml）：
spring: jpa: properties: hibernate: cache: use_second_level_cache: true region.factory_class: org.hibernate.cache.ehcache.EhCacheRegionFactory配置Gzip压缩（application.yml）：
server: compression: enabled: true mime-types: text/html,text/xml,text/plain,application/json,application/javascript min-response-size: 1024
5.2 监控与运维
集成Spring Boot Actuator：
@Configuration @EnableWebSecurity public class ActuatorSecurity extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .requestMatchers(EndpointRequest.to("health")).permitAll() .requestMatchers(EndpointRequest.toAnyEndpoint()).hasRole("ADMIN") .and().httpBasic(); } }关键监控端点：
/actuator/health- 应用健康状态/actuator/metrics- 性能指标/actuator/prometheus- Prometheus格式指标
6. 项目部署实战
6.1 容器化部署方案
Docker Compose编排文件示例：
version: '3.8' services: app: build: . ports: - "8080:8080" environment: - SPRING_PROFILES_ACTIVE=prod - DB_URL=jdbc:mysql://db:3306/farm_shop depends_on: - db db: image: mysql:8.0 environment: - MYSQL_ROOT_PASSWORD=rootpass - MYSQL_DATABASE=farm_shop volumes: - mysql_data:/var/lib/mysql volumes: mysql_data:6.2 CI/CD流水线配置
GitHub Actions示例：
name: Build and Deploy on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up JDK 17 uses: actions/setup-java@v3 with: java-version: '17' distribution: 'temurin' - name: Build with Maven run: mvn -B package --file pom.xml - name: Build Docker image run: docker build -t farm-product-platform:${{ github.sha }} . - name: Log in to Docker Hub uses: docker/login-action@v2 with: username: ${{ secrets.DOCKER_HUB_USERNAME }} password: ${{ secrets.DOCKER_HUB_TOKEN }} - name: Push image run: | docker tag farm-product-platform:${{ github.sha }} username/farm-product-platform:latest docker push username/farm-product-platform:latest7. 进阶功能扩展
7.1 农产品溯源功能
通过区块链技术实现农产品溯源：
public interface BlockchainService { @PostMapping("/blockchain/record") String recordTraceData(@RequestBody TraceData data); } @Data public class TraceData { private String productId; private String batchNumber; private String operation; // planting/harvesting/processing private LocalDateTime operationTime; private String operator; private String location; }7.2 智能推荐系统
基于用户行为的协同过滤推荐：
@Service public class RecommendationService { private final UserBehaviorRepository behaviorRepo; public List<Product> recommendProducts(Long userId) { // 1. 获取相似用户 Set<Long> similarUsers = findSimilarUsers(userId); // 2. 获取热门商品 return behaviorRepo.findPopularProducts(similarUsers, PageRequest.of(0, 10)); } private Set<Long> findSimilarUsers(Long userId) { // 实现相似度计算逻辑 } }在实际项目开发中，我们发现Element Plus的表格组件与后端分页参数需要特殊处理才能完美配合。通过封装统一的PageResponse对象，可以简化前后端分页交互逻辑：
interface PageResponse<T> { content: T[]; totalElements: number; pageNumber: number; pageSize: number; }
