SpringBoot+Vue3社区防疫物资申报系统开发实践

1. 项目概述社区防疫物资申报系统这个基于SpringBoot2Vue3MyBatis-PlusMySQL8.0技术栈的社区防疫物资申报系统是专门为疫情期间社区物资管理设计的全栈解决方案。我在实际开发中发现很多社区还在使用Excel表格手工登记物资不仅效率低下而且容易出现数据错误和统计混乱。这个系统就是为了解决这些痛点而设计的。系统采用前后端分离架构后端使用SpringBoot2提供RESTful API前端用Vue3构建响应式界面数据库选用MySQL8.0存储数据ORM层采用MyBatis-Plus简化数据库操作。整套系统从技术选型到功能设计都充分考虑了社区防疫场景的特殊需求。提示系统源码中包含了完整的权限管理模块可以灵活配置不同角色的操作权限比如管理员可以审核申报普通用户只能提交申请。2. 技术栈选型与核心设计思路2.1 后端技术选型解析SpringBoot2作为后端框架有几个明显优势自动配置简化了传统Spring项目的繁琐配置内嵌Tomcat服务器打包后可直接运行丰富的starter依赖可以快速集成常用功能完善的健康检查和监控端点我特别选择了2.7.x版本而不是最新的3.x因为社区很多服务器还在用Java8SpringBoot3需要Java172.7.x有更成熟的生态和更多问题解决方案与MyBatis-Plus的兼容性更好MyBatis-Plus 3.5.17版本的选择考虑dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.17/version /dependency这个版本与SpringBoot2.7.x完美兼容提供了强大的CRUD接口和Wrapper条件构造器大大减少了样板代码。2.2 前端技术选型考量Vue3相比Vue2有几个关键改进特别适合这个项目Composition API让代码组织更灵活更好的TypeScript支持更小的打包体积和更高的性能更灵活的逻辑复用方式项目中使用了这些Vue3特性script setup语法糖简化组件编写组合式函数封装通用业务逻辑Pinia替代Vuex进行状态管理Vite构建工具提升开发体验2.3 数据库设计要点MySQL8.0相比5.7版本有几个重要改进窗口函数支持复杂统计分析公用表表达式(CTE)提高SQL可读性更好的JSON支持性能提升明显物资申报系统的核心表设计CREATE TABLE material_apply ( id bigint NOT NULL AUTO_INCREMENT, community_id bigint NOT NULL COMMENT 社区ID, applicant_id bigint NOT NULL COMMENT 申请人ID, material_type varchar(50) NOT NULL COMMENT 物资类型, amount int NOT NULL COMMENT 申请数量, urgency_level tinyint NOT NULL COMMENT 紧急程度, status tinyint NOT NULL DEFAULT 0 COMMENT 状态:0待审核,1已通过,2已拒绝, apply_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, audit_time datetime DEFAULT NULL, audit_opinion varchar(255) DEFAULT NULL, PRIMARY KEY (id), KEY idx_community (community_id), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci;3. 核心功能实现细节3.1 物资申报流程实现申报流程的状态机设计public enum ApplyStatus { PENDING(0, 待审核), APPROVED(1, 已通过), REJECTED(2, 已拒绝); // 省略构造函数和getter }后端审核接口的关键代码PostMapping(/audit) public Result audit(RequestBody AuditDTO dto) { MaterialApply apply applyService.getById(dto.getApplyId()); if (apply null) { return Result.fail(申请记录不存在); } if (apply.getStatus() ! ApplyStatus.PENDING.getCode()) { return Result.fail(该申请已处理不能重复操作); } apply.setStatus(dto.getApproved() ? ApplyStatus.APPROVED.getCode() : ApplyStatus.REJECTED.getCode()); apply.setAuditOpinion(dto.getOpinion()); apply.setAuditTime(LocalDateTime.now()); boolean updated applyService.updateById(apply); if (updated dto.getApproved()) { // 触发库存更新 inventoryService.updateStock(apply.getMaterialType(), -apply.getAmount()); } return updated ? Result.success() : Result.fail(审核失败); }3.2 前后端数据交互设计API响应统一格式{ code: 200, message: success, data: { // 业务数据 }, timestamp: 1689321600000 }前端使用axios封装请求const service axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer ${token} } return config }) // 响应拦截器 service.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || Error) return Promise.reject(new Error(res.message || Error)) } return res.data }, error { // 错误处理逻辑 } )4. 部署与性能优化4.1 生产环境部署方案推荐使用Docker Compose部署version: 3 services: mysql: image: mysql:8.0 container_name: mysql environment: MYSQL_ROOT_PASSWORD: yourpassword MYSQL_DATABASE: material_db ports: - 3306:3306 volumes: - ./mysql/data:/var/lib/mysql - ./mysql/conf:/etc/mysql/conf.d restart: always backend: build: ./backend container_name: backend ports: - 8080:8080 depends_on: - mysql environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/material_db restart: always frontend: build: ./frontend container_name: frontend ports: - 80:80 restart: always4.2 性能优化实践数据库优化措施为常用查询字段添加索引使用连接池控制连接数对大表进行分表处理使用EXPLAIN分析慢查询前端性能优化路由懒加载组件按需引入使用keep-alive缓存组件图片等静态资源CDN加速5. 常见问题与解决方案5.1 开发环境问题排查问题1MySQL8.0连接失败错误信息Public Key Retrieval is not allowed解决方案 在JDBC连接字符串添加参数jdbc:mysql://localhost:3306/db?allowPublicKeyRetrievaltrueuseSSLfalse问题2Vue3热更新失效现象修改代码后页面不自动刷新解决方法检查vite.config.js配置确保网络代理设置正确尝试清除浏览器缓存5.2 生产环境问题记录问题高并发下库存超卖现象多人同时申请时库存可能出现负数解决方案使用数据库悲观锁Transactional public boolean reduceStock(String materialType, int amount) { Material material materialMapper.selectByIdForUpdate(materialType); if (material.getStock() amount) { material.setStock(material.getStock() - amount); return materialMapper.updateById(material) 0; } return false; }或者使用Redis分布式锁public boolean reduceStockWithLock(String materialType, int amount) { String lockKey lock:stock: materialType; String requestId UUID.randomUUID().toString(); try { // 获取锁 boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, requestId, 30, TimeUnit.SECONDS); if (!locked) { return false; } // 执行业务逻辑 return reduceStock(materialType, amount); } finally { // 释放锁 if (requestId.equals(redisTemplate.opsForValue().get(lockKey))) { redisTemplate.delete(lockKey); } } }6. 扩展功能与二次开发建议6.1 短信通知集成物资审核结果可以通过短信通知申请人public void sendSmsNotify(Long applyId, boolean approved) { MaterialApply apply applyService.getById(applyId); User user userService.getById(apply.getApplicantId()); String template approved ? 您的物资申请已通过请及时领取 : 您的物资申请未通过原因%s; String content String.format(template, apply.getAuditOpinion()); smsService.send(user.getPhone(), content); }6.2 数据可视化大屏使用ECharts实现物资申请数据可视化import * as echarts from echarts; const initChart () { const chart echarts.init(document.getElementById(chart)); const option { title: { text: 物资申请统计 }, tooltip: {}, xAxis: { data: [口罩, 消毒液, 防护服, 体温计] }, yAxis: {}, series: [{ type: bar, data: [120, 80, 60, 40] }] }; chart.setOption(option); // 窗口大小变化时重绘 window.addEventListener(resize, () chart.resize()); }6.3 多社区分级管理系统可以扩展支持多社区分级管理超级管理员管理所有社区社区管理员管理本社区普通用户提交申请实现方式Data public class Community { private Long id; private String name; private String address; private Long parentId; // 上级社区ID private Integer level; // 层级 }在查询时根据用户权限动态添加条件public PageMaterialApply queryApplies(ApplyQuery query, User user) { LambdaQueryWrapperMaterialApply wrapper new LambdaQueryWrapper(); // 普通用户只能查自己的申请 if (user.isNormalUser()) { wrapper.eq(MaterialApply::getApplicantId, user.getId()); } // 社区管理员查本社区的申请 else if (user.isCommunityAdmin()) { wrapper.eq(MaterialApply::getCommunityId, user.getCommunityId()); } // 其他查询条件... return applyMapper.selectPage(query.toPage(), wrapper); }7. 项目文档与使用说明7.1 开发环境搭建后端环境准备JDK 1.8Maven 3.6MySQL 8.0Redis可选用于缓存和分布式锁前端环境准备Node.js 16npm 8 或 yarn初始化步骤创建数据库并导入SQL脚本修改application.yml中的数据库配置启动后端服务前端安装依赖npm install启动前端开发服务器npm run dev7.2 接口文档规范使用Swagger生成API文档Configuration EnableSwagger2 public class SwaggerConfig { Bean public Docket api() { return new Docket(DocumentationType.SWAGGER_2) .select() .apis(RequestHandlerSelectors.basePackage(com.example.controller)) .paths(PathSelectors.any()) .build() .apiInfo(apiInfo()); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title(社区防疫物资申报系统API) .description(前后端接口文档) .version(1.0) .build(); } }访问地址http://localhost:8080/swagger-ui.html7.3 代码规范与检查后端代码规范遵循阿里巴巴Java开发手册使用Checkstyle进行代码风格检查关键业务方法必须写单元测试前端代码规范使用ESLint进行代码检查组件命名采用PascalCase变量命名采用camelCase使用TypeScript增强类型安全8. 安全防护措施8.1 认证与授权使用JWT进行身份认证public class JwtUtil { private static final String SECRET your-secret-key; private static final long EXPIRATION 86400000; // 24小时 public static String generateToken(UserDetails user) { return Jwts.builder() .setSubject(user.getUsername()) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRATION)) .signWith(SignatureAlgorithm.HS512, SECRET) .compact(); } public static String getUsernameFromToken(String token) { return Jwts.parser() .setSigningKey(SECRET) .parseClaimsJws(token) .getBody() .getSubject(); } }8.2 数据安全敏感数据加密存储public class AesUtil { private static final String KEY your-aes-key; private static final String IV your-aes-iv; public static String encrypt(String data) { // AES加密实现 } public static String decrypt(String encrypted) { // AES解密实现 } }8.3 接口防刷使用Redis实现接口限流public boolean tryAcquire(String key, int limit, int timeout) { String redisKey rate_limit: key; Long count redisTemplate.opsForValue().increment(redisKey); if (count ! null count 1) { redisTemplate.expire(redisKey, timeout, TimeUnit.SECONDS); } return count ! null count limit; }9. 测试策略与质量保障9.1 单元测试实践使用JUnit5编写服务层测试SpringBootTest class MaterialServiceTest { Autowired private MaterialService materialService; Test Transactional Rollback void testApplyMaterial() { MaterialApplyDTO dto new MaterialApplyDTO(); dto.setMaterialType(mask); dto.setAmount(10); Result result materialService.apply(dto, 1L); assertEquals(200, result.getCode()); MaterialApply apply materialService.getLatestApply(1L); assertNotNull(apply); assertEquals(mask, apply.getMaterialType()); } }9.2 集成测试方案使用Testcontainers进行数据库集成测试Testcontainers SpringBootTest class MaterialApplyIntegrationTest { Container static MySQLContainer? mysql new MySQLContainer(mysql:8.0); DynamicPropertySource static void configureProperties(DynamicPropertyRegistry registry) { registry.add(spring.datasource.url, mysql::getJdbcUrl); registry.add(spring.datasource.username, mysql::getUsername); registry.add(spring.datasource.password, mysql::getPassword); } Test void testApplyFlow() { // 测试完整的申请-审核流程 } }9.3 前端测试策略使用Vitest进行组件测试import { mount } from vue/test-utils import ApplyForm from ../ApplyForm.vue describe(ApplyForm, () { it(emits submit event with form data, async () { const wrapper mount(ApplyForm) await wrapper.find(input[nameamount]).setValue(10) await wrapper.find(form).trigger(submit) expect(wrapper.emitted(submit)[0][0]).toEqual({ materialType: mask, amount: 10, urgency: 1 }) }) })10. 项目演进与迭代规划10.1 短期优化方向性能优化引入Redis缓存热点数据数据库查询进一步优化前端资源懒加载功能增强物资库存预警功能多级审批流程移动端适配10.2 中长期规划微服务化改造拆分为申报服务、审核服务、库存服务等使用Spring Cloud Alibaba体系引入消息队列解耦智能化扩展基于历史数据的智能分配算法物资需求预测模型自动化审批规则引擎生态集成对接政务平台接入电子发票系统与物流系统集成在实际开发过程中我发现社区防疫系统有几个关键点需要特别注意审核流程要灵活可配置不同物资可能需要不同的审批流程数据统计要实时准确方便管理人员决策界面设计要简洁明了考虑到社区工作人员可能不熟悉复杂系统系统要具备高可用性疫情期间不能出现服务中断