Spring Boot+Vue构建海南水产电商平台实战-代码聚汇网

Spring Boot+Vue构建海南水产电商平台实战

酱婆的美学

1. 项目概述

这个海南水产品销售系统是我去年完成的本科毕业设计，采用主流Web技术栈实现了一个完整的B2C电商平台。系统特别针对海南特色水产品（如和乐蟹、东山羊、文昌鸡等）的在线销售需求，解决了传统水产商户线上销售渠道缺失的问题。整套系统包含前台商品展示、购物车、订单管理，以及后台的商品管理、用户管理、数据统计等完整功能模块。

作为计算机专业的毕业设计，这个项目既要体现技术深度，又要保证业务逻辑的完整性。我选择了Spring Boot + Vue.js的主流技术组合，前后端分离架构，数据库使用MySQL 8.0。系统最大的特色是加入了基于LBS的产地溯源功能，消费者可以查看水产品的具体捕捞/养殖位置，这在同类系统中比较少见。

提示：毕业设计类项目需要特别注意文档完整性和代码规范性，本文最后会分享我的毕业答辩准备心得。

2. 系统设计与技术选型

2.1 整体架构设计

系统采用典型的三层架构：

表现层：Vue.js + Element UI
业务逻辑层：Spring Boot + MyBatis Plus
数据层：MySQL + Redis缓存

选择这种架构主要基于三点考虑：

技术成熟度：这些框架都有完善的文档和社区支持
开发效率：MyBatis Plus和Element UI能大幅减少样板代码
扩展性：前后端分离便于后期功能迭代

特别说明数据库设计中的几个关键点：

商品表包含"产地坐标"字段（经纬度）
订单表设计了三张关联表（主订单、子订单、物流信息）
使用Redis缓存热门商品和秒杀活动数据

2.2 核心技术实现

2.2.1 基于高德地图的产地展示

通过高德地图JavaScript API实现：

javascript复制// 在商品详情页初始化地图
initMap() {
  const map = new AMap.Map('map-container', {
    zoom: 13,
    center: [this.product.longitude, this.product.latitude]
  });
  
  new AMap.Marker({
    position: [this.product.longitude, this.product.latitude],
    map: map
  });
}

2.2.2 购物车实现方案

购物车采用混合存储策略：

未登录用户：localStorage存储
已登录用户：服务端Redis存储
关键代码：

java复制// 合并购物车逻辑
public void mergeCart(String tempCartKey, Long userId) {
    // 获取临时购物车
    Map<Object, Object> tempCart = redisTemplate.opsForHash().entries(tempCartKey);
    
    // 合并到用户购物车
    String userCartKey = "cart:" + userId;
    redisTemplate.opsForHash().putAll(userCartKey, tempCart);
    
    // 删除临时购物车
    redisTemplate.delete(tempCartKey);
}

3. 核心功能实现细节

3.1 商品管理系统

后台商品管理包含几个特色功能：

多规格管理（如螃蟹按重量分级）
预售模式设置
冷链物流配置

商品添加的关键参数：

java复制@Data
public class ProductAddDTO {
    @NotBlank
    private String name;
    
    @NotNull
    private BigDecimal price;
    
    // 产地坐标
    @NotNull
    private BigDecimal longitude;
    @NotNull
    private BigDecimal latitude;
    
    // 冷链要求
    private Integer keepTemperature;
    private Integer shelfLife;
}

3.2 订单支付流程

支付流程经过特别优化：

创建订单时预扣库存（防止超卖）
15分钟未支付自动取消
支持微信/支付宝两种支付方式

订单状态机设计：

mermaid复制stateDiagram
    [*] --> 待支付
    待支付 --> 已取消: 超时未支付
    待支付 --> 已支付: 支付成功
    已支付 --> 已发货: 商家发货
    已发货 --> 已完成: 用户确认收货
    已发货 --> 退款中: 用户申请退款

注意：实际开发中要特别注意支付回调的幂等性处理，避免重复通知导致业务异常。

4. 开发中的典型问题与解决方案

4.1 高并发场景下的库存扣减

初期直接使用SQL更新：

sql复制UPDATE product SET stock = stock - 1 WHERE id = ? AND stock > 0

在压力测试时发现存在超卖问题，最终解决方案：

使用Redis分布式锁
采用分段锁优化性能

最终实现：

java复制public boolean reduceStock(Long productId, int num) {
    String lockKey = "product_lock:" + productId;
    try {
        // 获取分布式锁
        Boolean locked = redisTemplate.opsForValue()
            .setIfAbsent(lockKey, "1", 10, TimeUnit.SECONDS);
        
        if(locked != null && locked) {
            // 实际扣减逻辑
            return productMapper.reduceStock(productId, num) > 0;
        }
        return false;
    } finally {
        redisTemplate.delete(lockKey);
    }
}

4.2 文件上传性能优化

水产品需要展示大量高清图片，最初的上传方案存在两个问题：

大文件上传慢
服务器存储压力大

优化方案：

前端采用分片上传
使用七牛云对象存储
图片处理采用WebP格式

关键配置：

properties复制# application.properties
qiniu.access-key=your_ak
qiniu.secret-key=your_sk
qiniu.bucket=your_bucket
qiniu.domain=your_domain

5. 毕业设计答辩准备建议

根据我的答辩经验，分享几个关键点：

演示数据准备

准备3套测试数据：正常流程、异常流程、性能测试
特别准备海南特色水产品的真实数据（如和乐蟹的产地信息）

答辩PPT要点

技术架构图（用Draw.io绘制）
核心算法流程图（如库存扣减逻辑）
性能对比数据（优化前后）

代码规范检查

使用Alibaba Java Coding Guidelines插件扫描
确保有完整的JavaDoc注释
删除所有测试用的print语句

答辩常见问题准备

为什么选择这些技术栈？
系统最大的创新点是什么？
如何保证支付安全性？

这个项目从需求分析到最终上线用了4个月时间，期间最大的收获是对电商系统完整生命周期的实践。特别是对高并发场景的处理，让我对分布式系统有了更深的理解。源码已经整理在GitHub上，包含完整的开发文档和数据库脚本，需要参考的同学可以通过文末链接获取。