SpringBoot+Vue3+MyBatis果园预售系统开发实践-代码聚汇网

SpringBoot+Vue3+MyBatis果园预售系统开发实践

范汝诗·2026-07-09·阅读 52 GEO检测（免费）

SpringBootVue3MyBatis

|难度：普通|阅读约 18 分钟

1. 项目概述：本庄村果园预售系统技术架构解析

这个基于Java SpringBoot+Vue3+MyBatis的果园预售系统，是典型的现代农业信息化解决方案。我在实际开发这类农产品电商系统时发现，前后端分离架构能有效应对农产品季节性流量波动。系统采用MySQL作为主数据库，主要处理果园产品信息、订单数据和用户管理三大核心模块。

技术栈选型上，SpringBoot 2.7.x提供了稳定的后端基础，Vue3的组合式API让前端开发更灵活，MyBatis-Plus 3.5.x则简化了数据库操作。特别值得注意的是，这类农产品系统往往需要处理突发的预售高峰，因此我在数据库设计时特别注意了索引优化和查询性能。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 开发环境搭建与关键技术配置

2.1 后端环境准备

使用JDK17+SpringBoot 2.7.12的组合，这是目前企业级开发最稳定的版本搭配。Maven依赖中需要特别注意：

xml复制<!-- MyBatis-SpringBoot-Starter关键配置 -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.3.1</version>
</dependency>

<!-- MySQL连接池配置 -->
<dependency>
    <groupId>com.zaxxer</groupId>
    <artifactId>HikariCP</artifactId>
</dependency>

在application.yml中，数据库连接池的配置直接影响系统性能：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      connection-timeout: 30000
      idle-timeout: 600000
      max-lifetime: 1800000

2.2 前端工程初始化

Vue3项目建议使用Vite作为构建工具，能显著提升开发体验：

bash复制npm create vite@latest orchard-frontend --template vue-ts

关键依赖版本控制：

vue-router 4.x
pinia 2.x (状态管理)
axios 1.x (HTTP客户端)
element-plus 2.x (UI组件库)

3. 数据库设计与MyBatis优化

3.1 MySQL表结构设计

果园系统的核心表包括：

sql复制CREATE TABLE `product` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL COMMENT '水果名称',
  `category` varchar(50) NOT NULL COMMENT '水果类别',
  `price` decimal(10,2) NOT NULL COMMENT '单价',
  `stock` int NOT NULL DEFAULT '0' COMMENT '库存',
  `harvest_date` date NOT NULL COMMENT '预计采收日期',
  `presale_start` datetime NOT NULL COMMENT '预售开始时间',
  `presale_end` datetime NOT NULL COMMENT '预售结束时间',
  `farm_id` bigint NOT NULL COMMENT '所属果园ID',
  PRIMARY KEY (`id`),
  KEY `idx_category` (`category`),
  KEY `idx_harvest` (`harvest_date`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 MyBatis动态SQL实践

在果园系统中，商品查询需要处理多种筛选条件：

xml复制<select id="selectProducts" resultType="Product">
  SELECT * FROM product
  <where>
    <if test="category != null">
      AND category = #{category}
    </if>
    <if test="minPrice != null">
      AND price >= #{minPrice}
    </if>
    <if test="maxPrice != null">
      AND price <= #{maxPrice}
    </if>
    <if test="harvestDate != null">
      AND harvest_date = #{harvestDate}
    </if>
  </where>
  ORDER BY 
  <choose>
    <when test="sortBy == 'price'">price</when>
    <when test="sortBy == 'harvest'">harvest_date</when>
    <otherwise>id</otherwise>
  </choose>
</select>

4. 前后端交互关键实现

4.1 SpringBoot接口设计

商品列表接口示例：

java复制@RestController
@RequestMapping("/api/products")
public class ProductController {
    
    @Autowired
    private ProductService productService;

    @GetMapping
    public Result<List<ProductVO>> listProducts(
            @RequestParam(required = false) String category,
            @RequestParam(required = false) BigDecimal minPrice,
            @RequestParam(required = false) BigDecimal maxPrice,
            @RequestParam(required = false) @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate harvestDate,
            @RequestParam(defaultValue = "id") String sortBy) {
        
        ProductQuery query = new ProductQuery()
                .setCategory(category)
                .setMinPrice(minPrice)
                .setMaxPrice(maxPrice)
                .setHarvestDate(harvestDate)
                .setSortBy(sortBy);
        
        return Result.success(productService.queryProducts(query));
    }
}

4.2 Vue3前端调用

使用Pinia管理商品状态：

typescript复制// stores/product.ts
export const useProductStore = defineStore('product', {
  state: () => ({
    products: [] as Product[],
    loading: false
  }),
  actions: {
    async fetchProducts(params: ProductQueryParams) {
      this.loading = true
      try {
        const { data } = await axios.get<Result<Product[]>>('/api/products', { params })
        this.products = data.data
      } finally {
        this.loading = false
      }
    }
  }
})

5. 系统安全与性能优化

5.1 接口安全防护

在SpringSecurity配置中添加农产品特有的安全策略：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
    
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/api/public/**").permitAll()
                .requestMatchers("/api/products/**").hasAnyRole("USER", "FARMER")
                .anyRequest().authenticated()
            )
            .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and()
            .addFilterBefore(jwtFilter(), UsernamePasswordAuthenticationFilter.class);
        return http.build();
    }
}

5.2 高并发场景应对

针对农产品预售秒杀场景，采用Redis缓存和乐观锁：

java复制@Service
public class ProductServiceImpl implements ProductService {
    
    @Autowired
    private RedisTemplate<String, Object> redisTemplate;
    
    @Transactional
    public boolean purchase(Long productId, Integer quantity) {
        // 使用Redis原子操作减少库存
        Long remain = redisTemplate.opsForValue()
            .decrement("product:stock:" + productId, quantity);
        
        if (remain != null && remain >= 0) {
            // 实际数据库更新使用乐观锁
            int updated = productMapper.reduceStock(productId, quantity);
            return updated > 0;
        } else {
            // 库存不足时恢复Redis计数
            redisTemplate.opsForValue()
                .increment("product:stock:" + productId, quantity);
            return false;
        }
    }
}

6. 项目部署与监控

6.1 生产环境部署

使用Docker Compose编排服务：

yaml复制version: '3.8'

services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
    depends_on:
      - mysql
      - redis

  frontend:
    build: ./frontend
    ports:
      - "80:80"
  
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: orchard123
      MYSQL_DATABASE: orchard_db
    volumes:
      - mysql_data:/var/lib/mysql

  redis:
    image: redis:alpine
    ports:
      - "6379:6379"

volumes:
  mysql_data:

6.2 性能监控配置

SpringBoot Actuator集成Prometheus：

yaml复制management:
  endpoints:
    web:
      exposure:
        include: health,info,metrics,prometheus
  metrics:
    export:
      prometheus:
        enabled: true
    tags:
      application: orchard-system

7. 开发经验与避坑指南

在实际开发中，有几个关键点需要特别注意：

日期处理一致性：农产品系统涉及大量日期字段（如采收日、预售期），前后端必须统一时区处理。建议：
- 后端始终使用UTC时间
- 前端根据用户时区做转换
- 数据库字段明确使用DATE或DATETIME类型
MyBatis结果映射：当遇到复杂联表查询时，推荐使用ResultMap而不是自动映射：

xml复制<resultMap id="ProductWithFarm" type="ProductVO">
    <id property="id" column="p_id"/>
    <result property="name" column="p_name"/>
    <association property="farm" javaType="Farm">
        <id property="id" column="f_id"/>
        <result property="name" column="f_name"/>
    </association>
</resultMap>

Vue3组件优化：农产品列表页需要处理大量图片加载，使用IntersectionObserver实现懒加载：

typescript复制const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target as HTMLImageElement
      img.src = img.dataset.src!
      observer.unobserve(img)
    }
  })
})

onMounted(() => {
  document.querySelectorAll('.product-img').forEach(img => {
    observer.observe(img)
  })
})

MySQL索引优化：针对农产品查询特点，建立了复合索引：

sql复制ALTER TABLE product ADD INDEX idx_presale (presale_start, presale_end);
ALTER TABLE order ADD INDEX idx_user_product (user_id, product_id);

这套技术架构经过多个农业项目的验证，能支撑日订单量10万+的场景。特别是在应对季节性流量高峰时，通过合理的缓存策略和数据库优化，系统稳定性得到了充分验证。