如何将Nestable生成的树形菜单数据存储到Laravel数据库

使用Nestable库拖拽调整菜单顺序后，后端会收到如下JSON树形结构数据：

[{"id":1},{"id":2,"children":[{"id":3},{"id":4},{"id":5,"children":[{"id":6},{"id":7},{"id":8}]},{"id":9},{"id":10}]},{"id":11},{"id":12}]

数据库表设计 #

菜单表建议包含以下核心字段（可根据业务需求扩展）：

• id：菜单唯一ID，主键自增
• parent_id：父菜单ID，顶级菜单设为0或null
• sort：同层级排序序号，控制菜单显示顺序
• 其他字段：菜单名称、路由地址、图标、权限标识等

核心实现思路：递归更新节点关系与排序 #

通过递归遍历JSON树形结构，为每个菜单节点更新parent_id（归属父节点）和sort（同层级顺序），具体步骤如下：

1. 编写递归处理函数，传入当前节点列表、父节点ID（默认顶级为0）
2. 遍历当前节点列表，为每个节点设置对应的parent_id和递增的sort值，执行数据库更新
3. 若节点包含子菜单，递归调用处理函数，父ID设为当前节点ID，排序重新从1开始计数

示例代码（PHP） #

// 递归更新菜单树的parent_id和sort
function updateMenuTree($nodes, $parentId = 0) {
    $sort = 1;
    foreach ($nodes as $node) {
        // 更新当前菜单的父节点与排序
        DB::table('menus')
            ->where('id', $node['id'])
            ->update([
                'parent_id' => $parentId,
                'sort' => $sort
            ]);
        
        // 递归处理子菜单
        if (!empty($node['children'])) {
            updateMenuTree($node['children'], $node['id']);
        }
        $sort++;
    }
}

// 解析后端接收的JSON数据并执行更新
$menuTree = json_decode($_POST['menu_tree'], true);
updateMenuTree($menuTree);

注意事项 #

• 事务处理：如果菜单数量较多，建议开启数据库事务，避免部分更新失败导致数据混乱
• 查询还原树形：前端渲染或后端返回菜单树时，可通过parent_id分组，结合sort排序快速组装树形结构
• 层级扩展：若业务需要支持极深的菜单层级，可考虑嵌套集（Nested Set）设计，但维护成本高于邻接表方案

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