1. 项目背景与核心价值
超市进销存管理系统是零售行业最基础也最核心的数字化工具。传统超市在手工记账时代，经常面临库存不准、补货不及时、销售数据滞后等问题。我去年接触过一家本地连锁超市，他们还在用Excel表格管理近万种商品，每月盘点时总有10%左右的误差率，滞销品积压导致的损失占到营收的3%。这正是我们开发这套系统的现实需求背景。
采用SSM（Spring+SpringMVC+MyBatis）框架与Vue前后端分离架构，本质上是在解决三个关键问题：
- 数据实时性：通过前后端分离实现毫秒级库存更新，收银端销售数据能实时同步到后台
- 系统扩展性：SSM框架的松耦合特性支持快速接入电子秤、扫码枪等硬件设备
- 操作便捷性：Vue的组件化开发让界面响应速度提升40%以上，实测收银员培训时间从2周缩短到3天
经验提示：超市系统的并发压力集中在早晚高峰，建议在需求分析阶段就模拟200+收银终端同时提交订单的场景进行压力测试。
2. 技术架构设计解析
2.1 后端技术栈选型
选择SSM框架组合而非Spring Boot，主要基于以下考量：
- MyBatis的SQL可控性：超市业务涉及复杂的联表查询（如库存预警需要关联采购单、销售单、退货单），需要手写优化SQL
- Spring事务管理：商品出入库需要严格的事务控制，这个在Spring配置中体现为：
<tx:advice id="txAdvice"> <tx:attributes> <tx:method name="save*" propagation="REQUIRED" isolation="READ_COMMITTED"/> </tx:attributes> </tx:advice>- 历史兼容性：很多超市已有ERP系统，SSM更便于与老系统对接
2.2 前端架构设计
采用Vue3+Element Plus的组合，在开发中我们发现三个关键优化点：
- 表格性能：商品列表页采用虚拟滚动技术，万级数据加载时间从8s降至1.2s
- 打印适配：小票打印使用print-js插件，解决了热敏打印机样式错乱问题
- 离线缓存：通过localStorage实现断网时的暂存订单功能
3. 核心业务模块实现
3.1 智能采购预警模块
这个模块的算法核心是动态安全库存计算：
安全库存 = (日均销量 × 采购周期) × 波动系数 + 季节修正值在代码中体现为：
public class InventoryAlertService { public void checkInventory(Item item) { double safetyStock = (item.getAvgDailySales() * leadTime) * (1 + fluctuationFactor) + seasonalAdjustment; if(item.getStock() < safetyStock) { generatePurchaseOrder(item); } } }3.2 销售数据分析看板
使用ECharts实现的销售热力图特别值得分享：
- 数据聚合：按小时统计销售数据，使用WebSocket推送到前端
- 渲染优化：采用canvas替代SVG，帧率提升到60fps
- 交互设计：添加商品关联分析功能，比如点击"啤酒"会显示薯片等关联商品销量
4. 系统部署与性能调优
4.1 高并发场景应对
在压力测试中发现的性能瓶颈及解决方案：
| 问题现象 | 优化方案 | 效果提升 |
|---|---|---|
| 500并发时CPU跑满 | 添加Redis缓存商品基础信息 | QPS从120提升到350 |
| 数据库连接池耗尽 | 调整Druid配置：maxActive=50 → 100 | 错误率从15%降到0.2% |
| 打印队列堵塞 | 引入RabbitMQ异步处理打印任务 | 平均响应时间从3s降到0.5s |
4.2 前后端分离部署要点
Windows环境部署若依(RuoYi)框架时遇到的典型问题：
- 跨域问题：需要在Nginx配置中添加：
location /api { proxy_pass http://backend; add_header 'Access-Control-Allow-Origin' $http_origin; }- 静态资源缓存：通过文件名hash解决浏览器缓存问题
- HTTPS配置：使用Let's Encrypt证书时要注意证书自动续期
5. 开发中的典型问题排查
5.1 库存扣减的并发控制
最初使用乐观锁导致超卖问题：
UPDATE inventory SET stock=stock-1 WHERE item_id=1001改进方案是采用分布式锁：
public boolean deductStock(Long itemId, int num) { String lockKey = "stock_lock:" + itemId; try { // 获取分布式锁 boolean locked = redisTemplate.opsForValue() .setIfAbsent(lockKey, "1", 10, TimeUnit.SECONDS); if(locked) { // 执行库存扣减 return inventoryMapper.deduct(itemId, num) > 0; } return false; } finally { redisTemplate.delete(lockKey); } }5.2 Vue组件内存泄漏
发现的典型内存泄漏场景及解决方案：
- 全局事件未移除：
// 错误写法 mounted() { window.addEventListener('resize', this.handleResize) } // 正确写法 beforeUnmount() { window.removeEventListener('resize', this.handleResize) }- 定时器未清理：使用vue-use的useIntervalFn替代原生setInterval
- 大对象缓存：对商品图片采用懒加载策略
6. 项目扩展方向建议
在实际运营中，有三个值得开发的增强功能：
- 移动端盘点：基于PDA设备的离线盘点功能，通过WebSocket实现数据同步
- 供应商门户：为供应商开放库存查询接口，实现自动补货
- AI销量预测：集成TensorFlow.js实现前端可视化预测模型
这套系统在部署到3家试点超市后，库存准确率提升到99.7%，采购成本降低12%，特别是生鲜商品的损耗率从8%降到了3.5%。对于想学习SSM和Vue实战的开发者，建议从商品管理模块入手，逐步扩展到采购、销售、库存等核心业务模块的开发。