民科心中的物理1. 项目背景与核心价值
社区防疫物资申报系统是疫情防控常态化背景下诞生的数字化解决方案。去年参与某街道办信息化改造时，我亲眼目睹基层工作人员还在用Excel表格手工统计口罩、消毒液等防疫物资的申领情况，数据混乱、重复申报、物资分配不均等问题频发。这个SpringBoot+Vue的全栈项目正是为解决这类痛点而生。
系统采用前后端分离架构，主要实现三大核心功能：
- 居民端：物资需求在线填报与进度查询
- 社区端：申报审核与库存动态管理
- 街道端：数据可视化分析与统筹调配
相比传统手工管理方式，该系统能带来三个层级的提升：
- 效率提升：申报审批流程从平均3天缩短至2小时内
- 数据准确：通过唯一身份校验避免重复申领
- 决策支持：热力图展示物资需求分布，辅助精准调配
提示：实际部署时需要特别注意居民身份信息的脱敏处理，建议采用SHA-256加密存储身份证号等敏感字段。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构解析
2.1 前端技术栈选型
选择Vue 2.x而非React或Angular的三大理由：
- 渐进式框架更适合高校毕设场景，学生可以按需引入功能模块
- Element UI组件库提供现成的表单、表格等防疫系统常用组件
- 路由懒加载优化首屏加载速度，实测使LCP时间降低40%
关键代码结构：
bash复制src/
├── api/ # Axios请求封装
├── assets/ # 静态资源
├── components/ # 通用组件
│ ├── SupplyForm.vue # 物资申报表单
│ └── StatusTable.vue # 审核状态表格
├── router/ # 路由配置
├── store/ # Vuex状态管理
└── views/ # 页面组件
2.2 后端技术方案
SpringBoot 2.7.x的技术组合：
- 数据层：MyBatis-Plus + PageHelper分页插件
- 安全控制：Spring Security + JWT令牌
- 接口文档：Swagger UI 3.0自动生成
- 文件处理：Apache POI实现Excel导出
典型控制器代码示例：
java复制@RestController
@RequestMapping("/api/supplies")
public class SupplyController {
@Autowired
private SupplyService supplyService;
@PostMapping
public Result submitApplication(@Valid @RequestBody SupplyApplyDTO dto) {
return supplyService.processApplication(dto);
}
@GetMapping("/stats")
@PreAuthorize("hasRole('ADMIN')")
public Result getAreaStats(@RequestParam String district) {
return supplyService.generateStats(district);
}
}
3. 数据库设计与优化
3.1 核心表结构
sql复制CREATE TABLE `supply_application` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`resident_id` varchar(18) NOT NULL COMMENT '身份证号(加密存储)',
`supply_type` enum('MASK','ALCOHOL','THERMOMETER') NOT NULL,
`quantity` int(11) NOT NULL DEFAULT 1,
`status` enum('PENDING','APPROVED','REJECTED') DEFAULT 'PENDING',
`apply_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
`audit_comment` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `idx_resident` (`resident_id`),
KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 性能优化实践
-
索引策略：
- 为高频查询字段建立组合索引：
(district, status, apply_time) - 使用覆盖索引减少回表：
SELECT id, status FROM...
- 为高频查询字段建立组合索引：
-
分库分表：
当日申报量超过1万条时，建议按区域分表：sql复制CREATE TABLE supply_application_01 LIKE supply_application; -
SQL优化案例：
改造前（全表扫描）：sql复制SELECT * FROM supplies WHERE status='PENDING'改造后（索引扫描）：
sql复制SELECT id, resident_id, supply_type FROM supplies WHERE status='PENDING' ORDER BY apply_time LIMIT 100
4. 典型业务场景实现
4.1 物资申报流程
-
前端表单校验：
javascript复制export default { data() { return { rules: { idCard: [ { validator: checkIDCard, trigger: 'blur' } ], quantity: [ { type: 'number', min: 1, max: 5 } ] } } } } -
后端防重复提交：
java复制@Transactional public Result processApplication(SupplyApplyDTO dto) { String lockKey = "apply_lock:" + dto.getResidentId(); if (redisTemplate.opsForValue().setIfAbsent(lockKey, "1", 5, TimeUnit.MINUTES)) { // 业务处理 } else { throw new BusinessException("请勿重复提交申请"); } }
4.2 审核状态推送
采用WebSocket实现实时状态更新：
java复制@ServerEndpoint("/notification/{userId}")
public class NotificationEndpoint {
@OnOpen
public void onOpen(Session session,
@PathParam("userId") String userId) {
// 将session与用户关联
}
@OnMessage
public void onMessage(String message) {
// 处理客户端消息
}
}
前端连接示例：
javascript复制const socket = new WebSocket(`ws://${location.host}/notification/${userId}`);
socket.onmessage = (event) => {
this.$notify({
title: '审核状态更新',
message: `您的申请已${event.data}`
});
};
5. 项目部署与监控
5.1 生产环境配置
Nginx关键配置：
nginx复制server {
listen 80;
server_name supply.yourdomain.com;
location /api {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
}
location / {
root /var/www/supply-frontend;
try_files $uri $uri/ /index.html;
}
}
5.2 监控方案
-
SpringBoot Actuator配置：
yaml复制management: endpoints: web: exposure: include: health,metrics,prometheus -
Grafana监控看板：
- 接口成功率
- 平均响应时间
- JVM内存使用率
- 数据库连接池状态
6. 毕设开发建议
6.1 功能扩展方向
-
智能分配算法：
python复制def allocate_supplies(demands, inventory): return { area: min(demand, inventory.get(item, 0)) for area, demand in demands.items() } -
微信小程序端：
- 使用uni-app跨平台开发
- 集成扫码领取功能
6.2 论文撰写要点
技术对比表示例：
| 方案 | 开发效率 | 性能表现 | 学习成本 |
|---|---|---|---|
| JSP | ★★☆ | ★★★ | ★★☆ |
| Thymeleaf | ★★★ | ★★☆ | ★★★ |
| Vue+SpringBoot | ★★★★ | ★★★★ | ★★☆ |
7. 常见问题解决方案
7.1 跨域问题处理
SpringBoot配置类：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
7.2 文件导出内存溢出
使用SXSSFWorkbook优化Excel导出：
java复制public void exportApplications(HttpServletResponse response) {
SXSSFWorkbook workbook = new SXSSFWorkbook(100); // 保留100行在内存
// 写入数据...
workbook.write(response.getOutputStream());
workbook.dispose(); // 清理临时文件
}
8. 项目实战经验
8.1 性能压测数据
使用JMeter测试结果：
| 并发用户数 | 平均响应时间 | 错误率 | 吞吐量 |
|---|---|---|---|
| 50 | 238ms | 0% | 210/s |
| 100 | 417ms | 0.2% | 189/s |
| 200 | 1.2s | 5% | 163/s |
优化建议：
- 添加二级缓存
- 启用Gzip压缩
- 数据库连接池调优
8.2 真实踩坑记录
日期格式问题：
- 现象：Vue前端传的日期字符串在后端解析失败
- 原因：前端默认使用ISO格式，Jackson反序列化需要明确指定
- 修复方案：
java复制@JsonFormat(pattern = "yyyy-MM-dd") private Date applyDate;
Element UI表单重置陷阱：
javascript复制// 错误做法：直接赋空对象
this.form = {}
// 正确做法：使用resetFields
this.$refs.form.resetFields()
这个项目我在实际部署时发现，当申报高峰期并发量突增时，数据库连接池容易成为瓶颈。后来通过以下配置优化：
yaml复制spring:
datasource:
hikari:
maximum-pool-size: 20
connection-timeout: 30000
idle-timeout: 600000