一、选题背景与研究意义

1.1 行业背景

随着新零售模式的兴起，生鲜电商市场规模持续扩大。据统计，2023年中国生鲜电商交易规模突破5000亿元，其中水果品类占比超35%。传统线下销售存在库存积压、损耗率高、覆盖范围有限等问题，而线上商城可通过数据驱动实现精准营销与供应链优化。

1.2 技术价值

采用Vue+SpringBoot的组合具有显著优势：

• 前端层面：Vue的组件化开发模式可提升代码复用率，结合Vue Router实现单页应用（SPA）的流畅体验，通过Axios实现与后端的高效数据交互。
• 后端层面：SpringBoot基于Java的强类型特性保障系统稳定性，其自动配置机制简化开发流程，集成Spring Security实现权限控制，通过MyBatis-Plus优化数据库操作效率。
• 全栈协同：前后端分离架构降低耦合度，支持独立开发与部署，提升团队协作效率。

二、系统架构设计

2.1 技术栈选型

2.2 架构图设计

┌───────────────┐    ┌───────────────┐    ┌───────────────┐
│  用户浏览器   │ →  │   Nginx负载   │ →  │  SpringBoot  │
│ (Vue SPA)     │    │   均衡器      │    │  应用服务器   │
└───────────────┘    └───────────────┘    └───────────────┘
                                         ↓
                                ┌─────────────────────┐
                                │  MySQL主从集群      │
                                │  Redis缓存集群      │
                                └─────────────────────┘

• 负载均衡：Nginx配置upstream模块实现请求分发，配置健康检查机制保障服务可用性。
• 数据持久化：MySQL采用主从复制架构，通过分库分表策略处理订单高并发场景。
• 缓存策略：Redis设置TTL过期时间，采用LRU算法淘汰冷数据，使用Pipeline批量操作提升性能。

三、核心功能模块实现

3.1 商品管理模块

• 分类树形展示：前端使用递归组件渲染分类层级，后端通过@TableField(typeHandler = JacksonTypeHandler.class)注解实现JSON字段存储。

  // 商品分类实体类示例
  @Data
  @TableName("fruit_category")
  public class FruitCategory {
    @TableId
    private Long id;
    private String name;
    @TableField(typeHandler = JacksonTypeHandler.class)
    private List<FruitCategory> children;
  }

• 图片上传：集成阿里云OSS SDK，前端通过FormData上传文件，后端使用MultipartFile接收并生成访问URL。

3.2 订单处理模块

• 事务管理：采用@Transactional(rollbackFor = Exception.class)注解保障支付与库存扣减的原子性。

  @Service
  public class OrderServiceImpl implements OrderService {
    @Override
    @Transactional
    public Result createOrder(OrderDTO orderDTO) {
        // 1. 扣减库存
        fruitStockMapper.reduceStock(orderDTO.getFruitIds(), orderDTO.getQuantities());
        // 2. 生成订单
        Order order = new Order();
        orderMapper.insert(order);
        return Result.success();
    }
  }

• 状态机设计：使用枚举类定义订单状态流转（待支付→已支付→已发货→已完成），通过策略模式处理不同状态下的业务逻辑。

3.3 支付集成模块

• 沙箱环境测试：对接支付宝/微信支付沙箱环境，生成RSA2签名验证回调通知。
• 异步通知处理：后端提供/api/payment/notify接口，通过验证签名后更新订单状态，返回SUCCESS响应避免重复通知。

四、开发难点与解决方案

4.1 跨域问题处理

• 前端配置：Vue项目vue.config.js中设置代理：

  module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
  }

• 后端配置：SpringBoot添加@CrossOrigin注解或全局配置CORS：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
  }

4.2 性能优化策略

• 前端优化：
  • 使用Vue的v-once指令静态渲染不变内容
  • 通过Webpack的SplitChunksPlugin拆分公共代码
• 后端优化：
  • 数据库添加索引：ALTER TABLE fruit ADD INDEX idx_name (name)
  • 使用MyBatis的@SelectProvider动态生成SQL

五、实施计划与预期成果

5.1 开发阶段划分

5.2 预期成果

• 构建支持日均10万订单处理的电商系统
• 实现PC/H5/小程序三端适配
• 达到99.9%的系统可用性标准

六、创新点总结

1. 智能推荐算法：基于用户浏览历史实现协同过滤推荐
2. 冷链物流追踪：集成GPS设备实时监控配送温度
3. AR试吃体验：通过WebGL实现3D水果模型展示

本开题报告从技术选型到实施路径提供了完整方案，开发者可依据实际需求调整模块优先级，建议优先实现核心交易流程，再逐步扩展营销功能。在开发过程中需特别注意支付安全与数据一致性，建议每周进行代码审查与技术债务清理。