SpringBoot2+Vue3疫情物资管理系统开发实践-代码聚汇网

SpringBoot2+Vue3疫情物资管理系统开发实践

VanessaDu

1. 项目概述与技术栈选型

疫情物资管理系统是一个典型的Web应用，旨在实现物资入库、分配、调拨、统计等全流程管理。这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0的技术方案，是目前企业级应用开发的主流选择。

技术栈选型背后的考量：

SpringBoot2：相比传统SSM框架，提供了更快的启动速度、更简洁的配置方式。2.x版本在性能优化（如Servlet 4.0支持）和监控（Actuator增强）方面有明显提升
Vue3：采用Composition API大幅提升代码组织性，配合Vite构建工具可实现秒级热更新。实测中，相同功能代码量比Vue2减少约30%
MyBatis-Plus：内置通用CRUD操作，单表查询无需手写SQL。其分页插件（PaginationInterceptor）完美解决了物资列表的分页需求
MySQL8.0：选择8.0而非5.7，主要看中其窗口函数（用于复杂统计）、JSON支持（存储动态字段）和性能提升（读速度提升2倍）

提示：实际开发中发现，MySQL8.0默认的身份验证插件（caching_sha2_password）可能导致旧版JDBC驱动连接失败，需在my.ini中添加default_authentication_plugin=mysql_native_password

2. 系统架构设计与模块划分

2.1 前后端分离架构

采用经典的前后端分离模式：

code复制├── frontend (Vue3)
│   ├── public          # 静态资源
│   ├── src
│   │   ├── api         # Axios封装
│   │   ├── assets      # 图片/字体
│   │   ├── components  # 公共组件
│   │   ├── router      # Vue Router4
│   │   ├── store       # Pinia状态管理
│   │   └── views       # 页面组件
└── backend (SpringBoot)
    ├── src/main/java
    │   ├── config      # 配置类
    │   ├── controller  # 控制层
    │   ├── entity      # 实体类
    │   ├── mapper      # MyBatis接口
    │   ├── service     # 业务逻辑
    │   └── util        # 工具类

2.2 核心功能模块

物资管理模块
- 采用树形分类（如：医疗设备→呼吸机→型号XXX）
- 支持Excel批量导入（Apache POI实现）
- 库存预警（通过Spring Schedule定时检查）
审批流模块
- 基于状态模式设计审批流程
- 使用Activiti引擎实现多级审批
- 集成WebSocket实时通知
统计报表模块
- 使用ECharts可视化
- 实现按时间/部门/物资类型多维分析
- 支持PDF导出（iText7库）

3. 关键技术实现细节

3.1 Vue3组合式API实践

物资列表页的典型实现：

javascript复制// src/views/supplies/List.vue
import { ref, onMounted } from 'vue'
import { useSuppliesStore } from '@/stores/supplies'

const store = useSuppliesStore()
const tableData = ref([])

onMounted(async () => {
  await store.fetchSupplies()
  tableData.value = store.supplies
})

性能优化点：

使用<script setup>语法糖减少样板代码
通过v-memo缓存静态列表提升渲染性能
采用Teleport实现全局弹窗组件

3.2 MyBatis-Plus高级应用

动态SQL构建示例：

java复制// 多条件物资查询
LambdaQueryWrapper<Supplies> wrapper = new LambdaQueryWrapper<>();
wrapper.eq(StringUtils.isNotBlank(type), Supplies::getType, type)
       .ge(Supplies::getStock, minStock)
       .orderByDesc(Supplies::getCreateTime);

Page<Supplies> page = new Page<>(current, size);
suppliesMapper.selectPage(page, wrapper);

踩坑记录：

当使用@TableLogic软删除时，需在application.yml中添加：

yaml复制mybatis-plus:
  global-config:
    db-config:
      logic-not-delete-value: 0
      logic-delete-value: 1

分页插件必须配置：

java复制@Bean
public MybatisPlusInterceptor paginationInterceptor() {
    MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
    return interceptor;
}

4. 部署与性能调优

4.1 生产环境部署方案

前端部署：

bash复制# 使用Nginx部署编译产物
docker run -d -p 80:80 \
  -v /path/to/dist:/usr/share/nginx/html \
  nginx:alpine

后端优化：

JVM参数调整（JDK17示例）：

bash复制java -jar -Xms512m -Xmx1024m \
  -XX:+UseG1GC \
  -XX:MaxGCPauseMillis=200 \
  your-app.jar

启用SpringBoot Actuator监控：

yaml复制management:
  endpoints:
    web:
      exposure:
        include: "*"

4.2 数据库优化实践

为高频查询字段建立索引：

sql复制ALTER TABLE supplies 
  ADD INDEX idx_type_status (type, status),
  ADD INDEX idx_create_time (create_time);

使用Explain分析慢查询：

sql复制EXPLAIN SELECT * FROM supplies 
WHERE stock < warning_level 
ORDER BY create_time DESC;

5. 扩展功能与二次开发建议

多租户支持：通过MyBatis-Plus的TenantLineInnerInterceptor实现数据隔离
移动端适配：使用Vant4组件库快速构建管理APP
智能预警：集成Python机器学习模型预测物资需求
区块链存证：利用Hyperledger Fabric记录关键操作日志

实际开发中遇到的一个典型问题：Vue3路由缓存失效。解决方案是在router-view上添加唯一的key：

html复制<router-view v-slot="{ Component }">
  <component :is="Component" :key="$route.fullPath" />
</router-view>

对于物资导入功能的性能优化，我们最终采用了分段读取+批量插入的方案：

java复制// 使用MyBatis-Plus的saveBatch方法
List<Supplies> batchList = new ArrayList<>(BATCH_SIZE);
for (Row row : sheet) {
    Supplies item = parseRow(row);
    batchList.add(item);
    if (batchList.size() >= BATCH_SIZE) {
        suppliesService.saveBatch(batchList);
        batchList.clear();
    }
}
if (!batchList.isEmpty()) {
    suppliesService.saveBatch(batchList);
}