SpringBoot+Vue3构建学校防疫物资管理系统实践-育师

1. 项目概述：学校防疫物资管理平台的技术架构与价值

这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0的学校防疫物资管理系统，是当前校园疫情防控场景下的典型解决方案。我在实际开发中发现，这类系统需要同时满足三个核心需求：物资库存的精准管控、多角色协同操作的高效性、以及突发情况下的快速响应能力。

技术栈选择上，后端采用SpringBoot2框架搭建RESTful API服务，前端使用Vue3构建响应式管理界面，通过MyBatis-Plus简化数据库操作，MySQL8.0则提供了可靠的数据存储支持。这套组合既能保证系统性能，又能降低后期维护成本，特别适合学校这类技术资源相对有限的场景。

2. 核心功能模块解析

2.1 物资库存管理模块

这是系统的核心模块，需要实现以下关键功能：

物资分类管理（口罩、消毒液等）
库存实时监控与预警
入库/出库记录追踪
效期管理（特别重要）

在数据库设计上，我建议采用以下表结构：

CREATE TABLE `material` ( `id` bigint NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL COMMENT '物资名称', `category` varchar(50) NOT NULL COMMENT '分类', `specification` varchar(100) DEFAULT NULL COMMENT '规格', `stock` int NOT NULL DEFAULT '0' COMMENT '当前库存', `threshold` int DEFAULT NULL COMMENT '库存阈值', `unit` varchar(20) DEFAULT NULL COMMENT '单位', `expiry_date` date DEFAULT NULL COMMENT '有效期', `storage_location` varchar(100) DEFAULT NULL COMMENT '存放位置', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.2 用户权限管理模块

学校场景通常涉及多种角色：

系统管理员
物资管理员
部门负责人
普通教师

我采用RBAC（基于角色的访问控制）模型实现权限管理，核心表包括：

用户表(sys_user)
角色表(sys_role)
菜单表(sys_menu)
用户角色关联表(sys_user_role)
角色菜单关联表(sys_role_menu)

注意：权限设计要遵循最小权限原则，特别是涉及物资出入库的操作权限要严格控制。

3. 关键技术实现细节

3.1 SpringBoot2后端实现

3.1.1 物资接口开发示例

@RestController @RequestMapping("/api/material") public class MaterialController { @Autowired private MaterialService materialService; @GetMapping("/list") public Result list(MaterialQuery query) { Page<Material> page = materialService.page(new Page<>(query.getPageNum(), query.getPageSize()), new LambdaQueryWrapper<Material>() .like(StringUtils.isNotBlank(query.getName()), Material::getName, query.getName()) .eq(StringUtils.isNotBlank(query.getCategory()), Material::getCategory, query.getCategory()) .le(query.getExpiryDate() != null, Material::getExpiryDate, query.getExpiryDate()) ); return Result.success(page); } @PostMapping("/save") public Result save(@Valid @RequestBody Material material) { return materialService.save(material) ? Result.success() : Result.fail("保存失败"); } }

3.1.2 MyBatis-Plus的灵活应用

MyBatis-Plus的Lambda表达式让查询构建更加直观：

// 查询即将过期的物资 List<Material> expiringMaterials = materialService.list( new LambdaQueryWrapper<Material>() .le(Material::getExpiryDate, LocalDate.now().plusMonths(1)) .orderByAsc(Material::getExpiryDate) );

3.2 Vue3前端实现技巧

3.2.1 物资表格组件

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="物资名称" width="180" /> <el-table-column prop="category" label="分类" width="100" /> <el-table-column prop="stock" label="库存" width="80"> <template #default="{row}"> <span :class="{'warning-text': row.stock < row.threshold}"> {{row.stock}} {{row.unit}} </span> </template> </el-table-column> <el-table-column prop="expiryDate" label="有效期" width="120"> <template #default="{row}"> <span :class="{'expired-text': isExpired(row.expiryDate)}"> {{formatDate(row.expiryDate)}} </span> </template> </el-table-column> </el-table> </template> <script setup> import { ref } from 'vue' import { formatDate } from '@/utils/date' const props = defineProps({ tableData: Array }) const isExpired = (date) => { return new Date(date) < new Date() } </script>

3.2.2 使用Composition API优化代码

<script setup> import { reactive, computed } from 'vue' import { getMaterialList } from '@/api/material' const state = reactive({ queryParams: { name: '', category: '', pageNum: 1, pageSize: 10 }, tableData: [], total: 0 }) const fetchData = async () => { const res = await getMaterialList(state.queryParams) state.tableData = res.data.list state.total = res.data.total } // 计算属性示例 const lowStockMaterials = computed(() => { return state.tableData.filter(item => item.stock < item.threshold) }) </script>

4. 系统部署与性能优化

4.1 MySQL8.0配置建议

[mysqld] # 使用新的caching_sha2_password认证插件 default_authentication_plugin=mysql_native_password # 优化InnoDB性能 innodb_buffer_pool_size = 1G innodb_log_file_size = 256M innodb_flush_log_at_trx_commit = 2 innodb_read_io_threads = 8 innodb_write_io_threads = 8 # 启用JSON支持 secure_file_priv=

4.2 前端性能优化实践

路由懒加载：

const routes = [ { path: '/material', component: () => import('@/views/material/index.vue') } ]

按需引入Element Plus组件：

import { createApp } from 'vue' import { ElButton, ElTable } from 'element-plus' const app = createApp(App) app.use(ElButton) app.use(ElTable)

5. 常见问题与解决方案

5.1 MyBatis-Plus更新问题

问题现象：使用updateBatchById时，即使没有数据被修改也返回成功

解决方案：

// 配置全局设置 mybatis-plus: global-config: db-config: logic-not-update-value: 0 # 未更新时返回0

5.2 Vue3路由缓存失效

问题场景：三级嵌套路由下页面缓存失效

解决方案：

// 路由配置中添加name属性 { path: 'detail/:id', name: 'MaterialDetail', component: () => import('@/views/material/detail.vue'), meta: { keepAlive: true } } // 父组件中使用keep-alive <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" v-if="$route.meta.keepAlive" /> </keep-alive> <component :is="Component" v-if="!$route.meta.keepAlive" /> </router-view>

5.3 跨域问题处理

后端解决方案：

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

前端解决方案：

// vite.config.js export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } } })

6. 项目文档编写要点

完整的项目文档应包含：

系统架构说明：技术栈介绍、模块划分
部署指南：
- 环境要求（JDK、Node.js、MySQL版本）
- 数据库初始化脚本
- 前后端启动命令
接口文档：
- Swagger集成配置
- 核心接口示例
使用手册：
- 各角色操作流程
- 常见问题解答

文档编写建议：使用Markdown格式，配合Swagger UI自动生成API文档，保持文档与代码同步更新。

在实际开发中，我发现定期进行数据库备份特别重要，特别是物资出入库记录。可以设置一个定时任务：

@Scheduled(cron = "0 0 2 * * ?") // 每天凌晨2点执行 public void backupDatabase() { // 调用mysqldump命令备份数据库 String command = "mysqldump -uusername -ppassword school_material > backup.sql"; Runtime.getRuntime().exec(command); }

这个项目最关键的收获是：在技术选型时，不仅要考虑开发效率，更要考虑后期维护成本。学校场景下的系统，稳定性往往比炫酷的功能更重要。我在第一个版本中尝试了太多前沿技术，结果部署时遇到了各种兼容性问题。后来改用相对成熟的技术组合，虽然看起来"不够新潮"，但实际运行稳定性和维护便利性都大幅提升。