基于五张效果图分析,该系统是餐饮行业全流程数字化解决方案,采用SpringBoot+MyBatis Plus+Vue2+ElementUI技术栈,实现用户端订餐与商家端管理的双向闭环。通过RBAC权限控制+订单状态机+实时库存预警三大核心机制,支持日均万级订单处理,覆盖从用户选餐、支付到商家备餐、配送的全链路管理。
技术栈构成:
├── 用户端(微信小程序)
│ ├── Vue2 + Vant组件库
│ └── WebSocket实时通知
└── 管理端(PC后台)
├── SpringBoot(RESTful API)
├── MyBatis-Plus(ORM框架)
├── Redis(库存缓存)
└── RabbitMQ(订单异步处理)
// 订单状态流转控制
public enum OrderStatus {
UNPAID("待支付", Arrays.asList("cancel")),
PAID("已支付", Arrays.asList("refund","confirm")),
DELIVERING("配送中", Arrays.asList("complete")),
COMPLETED("已完成", Collections.emptyList());
// 状态机校验逻辑
public boolean canTransitionTo(String action) {
return allowedActions.contains(action);
}
}
/* 基于Redis的库存扣减方案 */
DECLARE stock_key = "product:stock:" + productId
IF Redis.DECR(stock_key) >= 0
EXEC SQL UPDATE products SET stock=stock-1 WHERE id=?
ELSE
THROW "库存不足异常"
END IF
核心数据结构设计
// 订单详情数据结构
{
"orderId": "202406180001",
"userInfo": {
"name": "张三",
"phone": "13812345678",
"address": "江苏省南京市北京东路"
},
"items": [
{
"productId": 101,
"name": "香辣鸡腿堡",
"price": 25.0,
"quantity": 2
}
],
"totalAmount": 50.0,
"status": "DELIVERING"
}
异常处理机制
graph TD
A[用户提交订单] --> B{库存校验}
B -->|库存充足| C[创建订单]
B -->|库存不足| D[返回错误提示]
C --> E[支付超时检查]
E -->|超时未支付| F[自动取消订单]
E -->|正常支付| G[触发备餐流程]
多维度商品分类
营销标签系统
// 自动打标规则配置
const tagRules = [
{
condition: (product) => product.sales > 1000,
tag: "爆款"
},
{
condition: (product) => Date.now() - product.createTime < 3 * 24 * 3600 * 1000,
tag: "新品"
}
]
/* 权限表设计 */
CREATE TABLE sys_permission (
id INT PRIMARY KEY,
perm_name VARCHAR(50) NOT NULL, -- 权限名称
perm_code VARCHAR(20) UNIQUE, -- 权限编码
menu_route VARCHAR(100) -- 前端路由
);
INSERT INTO sys_permission VALUES
(1, '订单管理', 'order:manage', '/order'),
(2, '商品编辑', 'product:edit', '/product/edit');
// 基于RabbitMQ的订单异步处理
@RabbitListener(queues = "order_queue")
public void processOrder(OrderMessage message) {
// 1. 库存预扣减
stockService.preDeductStock(message);
// 2. 生成订单记录
orderService.createOrder(message);
// 3. 发送支付通知
notifyService.sendPaymentMsg(message.getUserId());
}
// 销售热力图展示
option = {
title: { text: '时段销售热力分布' },
xAxis: { data: ['10:00','12:00','14:00','16:00'] },
yAxis: { data: ['汉堡','饮料','小吃'] },
visualMap: { min: 0, max: 500 },
series: [{
type: 'heatmap',
data: [[0,0,100],[0,1,200],[1,0,350]],
itemStyle: { opacity: 0.8 }
}]
};
// 支付签名验证
public boolean verifySign(PaymentRequest request) {
String signStr = request.getOrderId() + request.getAmount();
String serverSign = HmacSHA256.sign(signStr, secretKey);
return serverSign.equals(request.getSign());
}
/* 管理员操作审计日志 */
CREATE TABLE operation_log (
log_id BIGINT AUTO_INCREMENT,
operator VARCHAR(32) NOT NULL,
operation_type VARCHAR(20) NOT NULL,
target_id VARCHAR(50),
before_state TEXT,
after_state TEXT,
create_time DATETIME DEFAULT CURRENT_TIMESTAMP
);
{{ row.userName }}
{{ row.phone }}
{{ statusMap[row.status] }}
详情
原创声明:本文基于系统效果图进行技术解析,重点阐述在线点餐系统的核心设计。关注作者获取最新技术动态!