ki-pi1. 项目背景与核心需求
外卖行业在过去五年经历了爆发式增长，2022年中国在线外卖市场规模已突破1万亿元。对于中小型餐饮商家而言，自主开发的外卖小程序已成为降低平台抽成、建立私域流量的重要工具。我们团队最近为连锁奶茶品牌"茶言观色"开发的SSM+Vue外卖小程序，上线三个月后订单量提升37%，客单价提高22%，验证了这种技术方案的商业价值。
这个项目的核心需求可以归纳为三个层面：
- 用户侧：需要流畅的点餐流程、实时订单跟踪和多样化的支付方式
- 商家侧：需要高效的订单管理、库存预警和数据分析功能
- 技术侧：要求系统能承受早晚高峰的流量波动，保证300ms内的接口响应
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术选型与架构设计
2.1 为什么选择SSM+Vue组合
在技术选型阶段，我们对比了三种主流方案：
- Spring Boot + Thymeleaf：开发速度快但前后端耦合度高
- Node.js + React：适合大型应用但学习成本较高
- SSM + Vue：折中的选择，特别适合中小型外卖系统
最终选择SSM+Vue主要基于：
- 开发效率：Vue的组件化开发与SSM的注解配置相得益彰
- 性能表现：SSM的MyBatis缓存机制配合Vue的虚拟DOM
- 人才储备：Java和Vue开发者更容易招聘
- 扩展性：支持后续引入Redis、RabbitMQ等中间件
2.2 系统架构详解
整个系统采用经典的三层架构：
code复制表现层：Vue 2.6 + Element UI + Vue Router
业务层：Spring 5.3 + Spring MVC 5.3
数据层：MyBatis 3.5 + MySQL 8.0
特别设计了三个关键机制：
- 订单状态机：使用State Pattern实现订单状态流转
- 分布式锁：基于Redis实现库存扣减的原子操作
- 消息队列：用RabbitMQ处理高峰期订单积压
3. 核心功能实现细节
3.1 用户端关键功能
3.1.1 智能推荐系统
java复制// 基于用户历史订单的推荐算法
public List<Food> recommendFoods(Long userId) {
// 1. 获取用户最近3次订单
List<Order> recentOrders = orderMapper.selectRecentOrders(userId, 3);
// 2. 提取菜品特征标签
Set<String> tags = extractFoodTags(recentOrders);
// 3. 混合推荐：60%相似菜品 + 30%热销 + 10%新品
return foodMapper.selectRecommendations(tags, 0.6, 0.3, 0.1);
}
3.1.2 购物车优化
我们实现了：
- 本地存储与服务端同步的双写机制
- 智能凑单提示（如"再加15元免配送费"）
- 菜品规格的级联选择（温度、甜度等）
3.2 商家端核心模块
3.2.1 实时订单看板
vue复制<template>
<el-table :data="orders" @row-click="handleRowClick">
<el-table-column prop="orderNo" label="订单号"></el-table-column>
<el-table-column label="状态">
<template #default="{row}">
<el-tag :type="statusColor[row.status]">
{{ statusText[row.status] }}
</el-tag>
</template>
</el-table-column>
</el-table>
</template>
3.2.2 智能打印系统
- 采用WebSocket实现打印指令实时推送
- 支持自动分单（堂食/外卖）
- 小票模板可视化配置
4. 性能优化实战
4.1 数据库优化
针对外卖系统典型的读写比例（7:3），我们做了：
- 读写分离：主库写，从库读
- 热点数据缓存：菜品信息用Redis缓存
- 索引优化：为order表的user_id和shop_id建立联合索引
4.2 前端性能提升
通过以下手段将首屏加载时间从2.1s降至0.8s：
- 路由懒加载
- 图片转WebP格式
- 关键CSS内联
- 第三方库按需引入
4.3 高并发处理
在压力测试中，我们模拟了500并发下的表现：
code复制原始QPS：120
优化后QPS：320
手段：
1. 使用Guava RateLimiter做API限流
2. 订单创建接口添加@Transactional注解
3. 采用HikariCP连接池替代DBCP
5. 典型问题与解决方案
5.1 微信支付回调丢失
现象：约3%的支付成功订单未正确更新状态
排查过程：
- 检查Nginx日志发现部分POST请求返回414
- 发现是微信回调URL过长（包含大量参数）
- 改用短链接接收支付通知
解决方案：
java复制@PostMapping("/pay/notify/{shortKey}")
public String handleNotify(@PathVariable String shortKey,
HttpServletRequest request) {
// 从Redis获取原始回调参数
String fullParams = redisTemplate.opsForValue().get(shortKey);
// 处理支付逻辑...
}
5.2 Vue组件内存泄漏
现象：商家端长时间使用后浏览器卡顿
定位步骤：
- 使用Chrome Memory面板创建堆快照
- 发现未销毁的ECharts实例
- 找到未清理的WebSocket监听
修复方案：
vue复制<script>
export default {
mounted() {
this.socket = new WebSocket(url);
this.chart = echarts.init(this.$refs.chart);
},
beforeUnmount() { // Vue 3用onBeforeUnmount
this.socket.close();
this.chart.dispose();
}
}
</script>
6. 部署与运维实践
6.1 自动化部署流程
我们搭建了完整的CI/CD管道：
- 前端：GitLab Runner执行npm build后rsync到Nginx
- 后端：Jenkins打包Docker镜像推送到Harbor
- 数据库：Flyway管理迁移脚本
6.2 监控方案
采用Prometheus+Grafana监控：
- 应用指标：JVM内存、GC次数
- 业务指标：订单创建成功率、平均响应时间
- 自定义指标：优惠券使用率、爆品库存量
告警规则示例：
code复制- alert: HighErrorRate
expr: rate(http_server_requests_errors_total[1m]) > 0.05
for: 5m
labels:
severity: critical
7. 安全防护措施
7.1 常见攻击防护
-
XSS防护：
- 前端用vue-dompurify-html处理富文本
- 后端统一过滤特殊字符
-
CSRF防护：
- 使用Spring Security的csrf()配置
- 关键操作添加二次验证
-
SQL注入：
- 坚持使用MyBatis参数绑定
- 禁止拼接SQL语句
7.2 数据安全
-
敏感数据加密：
- 用户手机号AES加密存储
- 数据库连接信息使用Vault管理
-
日志脱敏：
java复制@Bean
public PatternLayoutEncoder encoder() {
PatternLayoutEncoder encoder = new PatternLayoutEncoder();
encoder.setPattern("%msg%replace(%msg){'\\d{11}','***'}");
return encoder;
}
8. 项目扩展方向
在实际运营中，我们发现三个有价值的扩展点：
- 智能调度系统：基于GIS的骑手路径规划
- 用户画像系统：RFM模型分析客户价值
- 供应链协同：对接供应商库存系统
以骑手调度为例，可以这样实现：
python复制# 伪代码
def dispatch(order):
riders = get_available_riders()
distances = [calculate_distance(r, order) for r in riders]
best_ride = riders[argmin(distances)]
assign_order(best_ride, order)
9. 开发经验总结
经过这个项目，我们总结了五点关键经验：
-
组件设计原则：
- 业务组件不超过300行代码
- 通用组件要有Storybook文档
- 遵循单一职责原则
-
接口规范：
- 响应统一使用Result包装
- 错误码分级管理
- 版本号放在URL路径中
-
测试策略：
- 单元测试覆盖核心算法
- API测试用Postman集合
- UI测试用Cypress
-
协作流程：
- 采用Git Flow分支策略
- Commit message遵循Angular规范
- Code Review必须两人通过
-
性能守则：
- 数据库查询禁止N+1
- 列表接口必须分页
- 批量操作走异步任务