离线下单功能实现
1. 客户端离线处理
- 本地数据库缓存:使用IndexedDB或SQLite存储订单数据
- 订单状态标记:为离线订单添加"待同步"状态标识
- 队列管理:维护一个离线订单队列,按时间排序
2. 离线下单流程
```
用户下单 → 检查网络 →
网络正常 → 直接提交服务器
网络异常 → 存储本地数据库 → 显示"离线订单已保存"
```
万象源码部署后的同步机制
1. 网络恢复检测
- 定时轮询:每30秒检测一次网络状态
- 系统事件监听:监听网络连接状态变化事件
- 手动触发:提供"立即同步"按钮供用户操作
2. 同步策略
- 增量同步:只同步新增和修改的订单
- 冲突解决:
- 服务器时间戳优先
- 用户选择保留本地或服务器版本
- 批量处理:每次同步最多处理50条订单,避免阻塞
3. 同步流程
```
网络恢复 → 查询本地待同步订单 →
按时间排序 → 分批发送 →
服务器响应成功 → 标记为已同步
服务器响应失败 → 重试3次 → 仍失败则标记为"同步失败"
```
技术实现要点
1. 前端实现
```javascript
// 示例:离线订单检测与同步
class OfflineOrderManager {
constructor() {
this.pendingOrders = [];
this.checkNetworkInterval = null;
}
addOrder(order) {
this.pendingOrders.push(order);
this.saveToLocalStorage();
}
startNetworkMonitoring() {
this.checkNetworkInterval = setInterval(() => {
if (navigator.onLine) {
this.syncPendingOrders();
clearInterval(this.checkNetworkInterval);
}
}, 30000);
}
async syncPendingOrders() {
const ordersToSync = [...this.pendingOrders];
this.pendingOrders = [];
try {
const responses = await Promise.all(
ordersToSync.map(order => this.submitOrder(order))
);
// 处理响应...
} catch (error) {
// 错误处理...
}
}
}
```
2. 后端API设计
- `/api/orders/offline-sync` - 接收批量离线订单
- 请求体:`{ orders: [...] }`
- 响应:`{ success: number, failed: number, details: [...] }`
3. 数据库设计
```sql
CREATE TABLE offline_orders (
id VARCHAR(36) PRIMARY KEY,
order_data JSON NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
sync_status ENUM(pending, success, failed) DEFAULT pending,
sync_attempts INT DEFAULT 0,
last_sync_attempt TIMESTAMP NULL
);
```
部署注意事项
1. 源码兼容性:
- 确保前端框架支持离线功能(如PWA)
- 后端API需支持批量操作
2. 数据一致性:
- 库存扣减需在同步成功后执行
- 使用分布式锁防止超卖
3. 用户通知:
- 同步成功/失败需通知用户
- 提供同步历史记录查看
4. 性能优化:
- 压缩同步数据
- 使用WebSocket替代轮询(如需实时性)
测试方案
1. 离线场景测试:
- 手动断开网络下单
- 重启应用后检查订单保存
2. 同步场景测试:
- 网络恢复后自动同步
- 部分同步失败的重试机制
- 并发同步处理
3. 数据一致性测试:
- 验证库存准确性
- 检查订单状态完整性
此方案可确保生鲜App在离线状态下仍能正常下单,并在网络恢复后可靠地同步数据,同时保持与万象源码部署的后端系统兼容。