綺懷1. 项目概述
这个网上超市管理系统是我去年为一个本地连锁超市开发的实战项目，核心目标是打造一个支持前后端分离的B2C电商平台。系统采用SpringBoot+Vue的主流技术栈，实现了商品管理、订单处理、会员体系等超市核心业务场景的数字化。特别值得一提的是，我们针对中小型超市的特殊需求，在库存预警和促销管理模块做了深度优化。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 后端技术选型
选择SpringBoot 2.7作为基础框架主要考虑三点：
- 内嵌Tomcat简化部署
- 自动配置减少XML配置
- 丰富的Starter依赖
数据库选用MySQL 8.0，主要看中其：
- 完善的事务支持
- 良好的分区表性能
- JSON数据类型支持
ORM层采用MyBatis-Plus 3.5，相比原生MyBatis：
- 内置通用Mapper减少30%重复SQL
- Lambda表达式写法更安全
- 分页插件开箱即用
2.2 前端技术方案
Vue 3组合式API带来明显优势：
- 逻辑关注点更集中
- 更好的TypeScript支持
- 更小的打包体积
配套选用：
- Element Plus组件库
- Axios处理HTTP请求
- Vue Router管理路由
- Pinia状态管理
3. 核心模块实现
3.1 商品管理模块
数据库设计关键点：
sql复制CREATE TABLE `product` (
`id` BIGINT PRIMARY KEY AUTO_INCREMENT,
`category_id` INT NOT NULL COMMENT '分类ID',
`name` VARCHAR(100) NOT NULL,
`price` DECIMAL(10,2) UNSIGNED NOT NULL,
`stock` INT UNSIGNED DEFAULT 0,
`status` TINYINT DEFAULT 1 COMMENT '1-上架 0-下架',
`specs` JSON COMMENT '商品规格'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
后端接口设计要点：
java复制@RestController
@RequestMapping("/api/product")
public class ProductController {
@GetMapping("/list")
public R<Page<ProductVO>> list(
@RequestParam(required = false) String keyword,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize) {
// 分页查询逻辑
}
@PostMapping("/updateStock")
@Transactional
public R<Void> updateStock(@RequestBody StockUpdateDTO dto) {
// 带事务的库存更新
}
}
3.2 订单处理流程
状态机设计：
java复制public enum OrderStatus {
UNPAID(1, "待支付"),
PAID(2, "已支付"),
SHIPPED(3, "已发货"),
COMPLETED(4, "已完成"),
CANCELLED(5, "已取消");
// 状态流转校验逻辑
public boolean canTransferTo(OrderStatus nextStatus) {
// 具体校验规则...
}
}
分布式事务处理：
- 采用本地消息表+定时任务补偿
- 关键表增加操作日志审计
- 重要操作添加@Retryable注解
4. 特色功能实现
4.1 智能库存预警
实现逻辑：
- 基于历史销售数据计算安全库存
- 定时任务每日凌晨检查库存水平
- 多级预警机制：
- 库存低于安全线：系统通知
- 库存为0：自动下架商品
- 预售商品：特殊标记处理
4.2 促销活动引擎
核心配置表设计：
sql复制CREATE TABLE `promotion_rule` (
`id` INT PRIMARY KEY AUTO_INCREMENT,
`type` ENUM('DISCOUNT','FULL_REDUCTION','GIFT') NOT NULL,
`threshold` DECIMAL(10,2) COMMENT '满减门槛',
`discount` DECIMAL(10,2) COMMENT '折扣力度',
`gift_id` BIGINT COMMENT '赠品ID',
`time_ranges` JSON COMMENT '生效时间段'
);
5. 部署与优化
5.1 生产环境部署
Nginx配置要点：
nginx复制server {
listen 80;
server_name supermarket.example.com;
location /api/ {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
}
location / {
root /var/www/dist;
try_files $uri $uri/ /index.html;
}
}
5.2 性能优化实践
缓存策略：
- 商品详情：Redis缓存 + 本地缓存二级架构
- 热点数据：预先加载机制
- 缓存键设计：业务前缀+版本号
SQL优化案例：
java复制// 反例：N+1查询问题
List<Order> orders = orderMapper.selectList(queryWrapper);
orders.forEach(order -> {
order.setItems(orderItemMapper.selectByOrderId(order.getId()));
});
// 正例：关联查询
@Select("SELECT o.*, oi.* FROM order o LEFT JOIN order_item oi ON o.id = oi.order_id")
List<OrderWithItems> selectOrdersWithItems();
6. 踩坑实录
6.1 跨域问题解决方案
开发环境配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
生产环境注意事项：
- 严格限制allowedOrigins
- 预检请求缓存时间不宜过长
- 敏感接口禁用CORS
6.2 文件上传漏洞防护
安全措施实现：
java复制@RestController
@RequestMapping("/api/upload")
public class UploadController {
private static final Set<String> ALLOWED_TYPES =
Set.of("image/jpeg", "image/png");
@PostMapping
public R<String> upload(@RequestParam MultipartFile file) {
// 1. 校验文件类型
if (!ALLOWED_TYPES.contains(file.getContentType())) {
throw new BusinessException("不支持的文件类型");
}
// 2. 校验文件内容
if (!isImage(file.getBytes())) {
throw new BusinessException("文件内容不合法");
}
// 3. 重命名存储
String newName = UUID.randomUUID() + getFileExtension(file);
file.transferTo(new File("/upload/" + newName));
return R.ok(newName);
}
}
7. 扩展方向建议
-
微信小程序端开发
- 复用现有API接口
- 增加扫码购功能
- 对接微信支付
-
数据可视化大屏
- 使用ECharts展示销售数据
- 实时监控关键指标
- 异常交易预警
-
智能推荐系统
- 基于用户行为的协同过滤
- 热销商品排行榜
- 关联商品推荐
这个项目从技术选型到最终上线历时3个月，最大的体会是合理的分层架构能极大降低后期维护成本。特别是在商品规格设计上，采用JSON字段存储灵活规格的方案，完美应对了超市商品属性多变的需求。如果重新设计，我会考虑引入Elasticsearch来提升商品搜索体验。