SpringBoot+Vue仓库进销存系统实战经验分享-代码聚汇网

SpringBoot+Vue仓库进销存系统实战经验分享

聂世歆

1. 项目概述

这个基于SpringBoot+Vue的仓库进销存采购管理系统，是我在2022年为一家中型制造企业开发的数字化仓储解决方案。系统上线后，成功将企业的库存周转率提升了37%，采购审批周期从平均3天缩短至4小时以内。下面我将从架构设计到落地实现的完整过程进行详细拆解，重点分享那些在常规文档中不会提及的实战经验。

2. 技术架构深度解析

2.1 为什么选择SpringBoot+Vue组合

在技术选型阶段，我们对比了三种主流方案：

传统SSM+JSP：开发效率低，前后端耦合严重
SpringCloud+React：复杂度高，适合超大型系统
SpringBoot+Vue：轻量级，学习曲线平缓

最终选择SpringBoot+Vue主要基于：

开发效率：SpringBoot的自动配置+Vue的组件化开发，使迭代速度提升40%
人才储备：团队已有Java和前端基础，Vue比React更容易上手
生态支持：Element UI完美匹配业务系统的表单密集型需求

踩坑提醒：初期曾尝试用Thymeleaf做服务端渲染，但在复杂交互场景下维护成本激增，最终果断改用前后端分离架构。

2.2 数据库设计的三个关键决策

2.2.1 库存记录的冗余设计

在库存表(stock)中，我们除了保存product_id和warehouse_id外，还冗余存储了商品名称和规格：

sql复制CREATE TABLE stock (
  id BIGINT PRIMARY KEY,
  product_id BIGINT NOT NULL,
  product_name VARCHAR(100) COMMENT '冗余字段',
  product_spec VARCHAR(50) COMMENT '冗余字段',
  warehouse_id BIGINT NOT NULL,
  quantity DECIMAL(12,3) NOT NULL,
  ...
);

这种反范式设计虽然增加了存储空间，但在高频查询场景下：

减少90%的联表查询
列表展示性能提升5倍
历史记录可追溯性更强

2.2.2 采购单的状态机设计

采购单状态流转采用状态模式实现：

java复制public enum PurchaseOrderStatus {
    DRAFT(1){
        @Override
        public boolean canChangeTo(PurchaseOrderStatus target) {
            return target == SUBMITTED || target == CANCELLED;
        }
    },
    SUBMITTED(2){
        @Override
        public boolean canChangeTo(PurchaseOrderStatus target) {
            return target == APPROVED || target == REJECTED;
        }
    },
    // 其他状态...
}

配合Spring StateMachine实现，避免出现"已审核的作废单"这类非法状态。

2.2.3 库存变更的流水记录

所有库存变动必须通过流水表记录：

sql复制CREATE TABLE inventory_transaction (
  id BIGINT PRIMARY KEY,
  biz_type TINYINT COMMENT '1-采购入库 2-销售出库...',
  product_id BIGINT,
  before_quantity DECIMAL(12,3),
  change_quantity DECIMAL(12,3),
  operator_id BIGINT,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

这是后续库存对账和审计的关键依据。

3. 核心模块实现细节

3.1 采购入库的分布式事务处理

采购单审核通过后，需要同时：

更新采购单状态
增加库存数量
生成财务应付账款

我们采用Seata的AT模式解决分布式事务问题：

java复制@GlobalTransactional
public void confirmPurchase(Long orderId) {
    // 1. 更新订单状态
    purchaseOrderService.updateStatus(orderId, CONFIRMED);
    
    // 2. 增加库存
    inventoryService.increaseStock(orderId);
    
    // 3. 生成应付单
    accountingService.createPayable(orderId);
}

实际落地时发现三个关键问题：

MySQL隔离级别必须设为READ_COMMITTED
undo_log表需要预先创建
超时时间要根据业务场景调整（默认60秒太短）

3.2 库存预警的实时计算

库存预警规则配置表：

sql复制CREATE TABLE inventory_alert_rule (
  product_category_id BIGINT,
  min_stock DECIMAL(12,3),
  max_stock DECIMAL(12,3),
  check_frequency INT COMMENT '分钟数'
);

采用Redis+定时任务方案：

使用Redis的SortedSet存储商品库存量
每5分钟执行一次扫描：

java复制public void checkStockAlert() {
    Set<String> lowStockProducts = redisTemplate.opsForZSet()
        .rangeByScore("product:stock", 0, rule.getMinStock());
    
    lowStockProducts.forEach(productId -> {
        alertService.sendAlert(productId, "LOW_STOCK");
    });
}

为避免频繁通知，采用状态标记法：

首次预警后标记为"已通知"
库存恢复正常后清除标记

3.3 前端性能优化实践

3.3.1 采购单列表的虚拟滚动

当采购单超过500条时，改用虚拟滚动：

vue复制<template>
  <el-table
    :data="visibleData"
    height="600px"
    @scroll="handleScroll">
    <!-- 列定义 -->
  </el-table>
</template>

<script>
export default {
  computed: {
    visibleData() {
      return this.allData.slice(this.startIndex, this.endIndex);
    }
  },
  methods: {
    handleScroll({ scrollTop }) {
      this.startIndex = Math.floor(scrollTop / this.rowHeight);
      this.endIndex = this.startIndex + this.visibleCount;
    }
  }
}
</script>

内存占用从1.2GB降至200MB左右。

3.3.2 表单的按需加载

商品选择器采用懒加载：

vue复制<el-select
  v-model="selectedProduct"
  filterable
  remote
  :remote-method="loadProducts"
  :loading="loading">
  <el-option
    v-for="item in productOptions"
    :key="item.id"
    :label="item.name"
    :value="item.id">
  </el-option>
</el-select>

搜索接口添加防抖：

javascript复制loadProducts: _.debounce(function(query) {
  if(query.length < 2) return;
  this.loading = true;
  api.searchProducts(query).then(res => {
    this.productOptions = res.data;
  }).finally(() => {
    this.loading = false;
  });
}, 500)

4. 安全防护体系

4.1 接口安全的四层防护

传输层：强制HTTPS + HSTS头
认证层：JWT+双Token机制（access_token 30分钟过期，refresh_token 7天有效）
权限层：RBAC模型+数据权限过滤

java复制@PreAuthorize("hasRole('PURCHASE_MANAGER')")
@PostMapping("/purchase/orders")
public ResponseEntity createOrder(@RequestBody PurchaseOrderDTO dto) {
    // 自动注入数据权限
    dto.setDepartmentId(SecurityUtils.getCurrentDeptId());
    // ...
}

审计层：所有敏感操作记录操作日志

4.2 前端安全实践

敏感数据脱敏处理：

vue复制<template>
  <span>{{ bankCard | cardFilter }}</span>
</template>

<script>
filters: {
  cardFilter(value) {
    return value.replace(/^(\d{4})\d+(\d{4})$/, '$1****$2');
  }
}
</script>

路由守卫实现权限控制：

javascript复制router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
    next('/login?redirect=' + encodeURIComponent(to.fullPath));
  } else {
    next();
  }
});

5. 部署架构与性能调优

5.1 生产环境部署方案

![部署架构图]

前端：Nginx静态部署 + CDN加速
后端：Docker Swarm集群（3节点）
数据库：MySQL主从复制 + Atlas读写分离
缓存：Redis哨兵模式

关键配置项：

yaml复制# SpringBoot应用配置
server:
  tomcat:
    max-threads: 200
    min-spare-threads: 20
  compression:
    enabled: true
    mime-types: application/json,text/html

5.2 性能瓶颈突破

问题：采购单导出Excel时内存溢出
解决方案：

采用POI的SXSSFWorkbook流式导出

java复制public void exportOrders(HttpServletResponse response) {
    SXSSFWorkbook workbook = new SXSSFWorkbook(100); // 保留100行在内存
    // ...
    workbook.write(response.getOutputStream());
    workbook.dispose(); // 清理临时文件
}

添加异步导出功能：

前端触发导出请求
后端生成任务ID并立即返回
服务端异步生成文件
前端轮询下载链接

效果：

内存占用从2GB降至200MB
10万行数据导出时间从3分钟降至45秒

6. 典型问题排查实录

6.1 库存超卖问题

现象：促销期间出现库存负数
根因分析：

先查询后更新的非原子操作
乐观锁重试次数不足

解决方案：

java复制@Transactional
public boolean reduceStock(Long productId, int quantity) {
    int retry = 0;
    while(retry < 3) {
        Product product = productDao.selectForUpdate(productId);
        if(product.getStock() < quantity) {
            return false;
        }
        int rows = productDao.updateStock(
            productId, 
            product.getStock() - quantity,
            product.getVersion());
        if(rows > 0) {
            return true;
        }
        retry++;
    }
    throw new ConcurrentUpdateException();
}

6.2 JWT失效异常

现象：移动端频繁提示登录过期
排查过程：

发现客户端时间比服务端快5分钟
JWT的exp校验严格依赖系统时间