如何实现可拖拽重排的桌位布局存储及全用户前端同步展示

1. 基础元数据存储 #

先存储布局容器的统一基准参数，避免不同设备渲染出现位置偏移：

• 所属门店唯一ID，作为布局数据的关联主键
• 布局容器的宽高比例（比如16:9、4:3）、基准尺寸参数，确保前端渲染容器的比例和后台编辑时完全一致

2. 单桌位核心存储字段 #

每个桌位需要记录独立的属性信息：

• 桌位唯一ID、关联的门店ID
• 桌位业务属性：桌号、可容纳人数、桌型标记（方桌/圆桌/包间等）、启用状态
• 布局位置属性：相对坐标x/y（推荐用桌位左上角距离容器左上角的距离占容器总宽高的百分比，不要用固定像素，适配多端屏幕）、桌位自身的宽高比例、旋转角度（如果支持旋转调整）

3. 两种存储结构可选 #

根据你的业务场景选对应的存储方式即可：

方案1：关系型数据库结构化存储 #

单独建立store_tables数据表，每条记录对应一个桌位，所有字段拆分为独立的数据库列存储。

适用场景：需要对单个桌位做独立业务操作，比如实时标记桌位是否被占用、单独修改某桌的容纳人数等，查询和修改单个桌位的效率更高。

方案2：整存整取JSON存储 #

在门店主表新增table_layout文本类型字段，将容器基准配置+所有桌位的属性数据整体序列化为JSON字符串存入该字段。

适用场景：没有单独查询/修改单个桌位的需求，读写逻辑最简单，后端不需要处理复杂的批量增删改逻辑，直接接收前端传的完整JSON字符串存库，读取时直接返回给前端解析即可。

4. 读写逻辑 #

• 保存逻辑：前端编辑完成提交时，把完整的容器配置+所有桌位的属性数据统一传给后端，后端根据选的存储方案，要么批量更新store_tables表的对应门店数据，要么直接更新门店表的table_layout字段。
• 读取逻辑：普通用户访问门店页面时，后端根据门店ID查询对应的布局数据，组装为JSON结构返回，前端拿到后直接按坐标渲染桌位即可。

内容的提问来源于stack exchange，提问作者usanzadunje