admin后台菜单栏的实现

菜单管理树形结构

整个树结构最好不要超过三层

权限表pid用来标识一个父子模块的关系

目标：将上述树形节点显示到页面上

1 参考侧边栏功能写数据库 =>

2 java中映射成实体类 =>

java表示树结构，为了配合zTree插件，我们应该使用以下属性：

Integer id：菜单项组件
Integer pid：表示父节点；
String name：节点名；
Stringicon：节点图标；
String url:节点跳转路径；
Boolean open：是否开启节点控制
List<Menu> children Menu 在上述基础上使用属性存储当前节点的子节点。
如此，最后整个树结构都压缩到了Menu类型的root根节点中

3 handler处理器用于将数据库中菜单数据整成规范的树形数据用于前后展示 =>

@RestController
public class MenuHandler {

    @Autowired
    private MenuService menuService;

    @RequestMapping("/menu/get/whole/tree.json")
    public ResultEntity<Menu> getWholeTreeNew() {
        // 1.查询全部的 Menu 对象
        List<Menu> menuListAll = menuService.getAll();
        //2 pid为null的menu节点对象是root节点
        Menu root = null;
        // 3.创建 Map 对象用来存储 id 和 Menu 对象的对应关系以便于查找父节点
        Map<Integer, Menu> menuMap = new HashMap<>();
        // 4.遍历 menuList 填充 menuMap
        for (Menu menu : menuListAll) {
            menuMap.put(menu.getId(),menu);
        }
        // 5.再次遍历 menuList 查找根节点、组装父子节点 => root
        for (Menu menu : menuListAll) {
            if(menu.getPid() == null){
                //6 如果 pid 为 null，判定为根节点,跳过下面操作继续下一次循环
                root = menu;
                continue;
            }
            //7 当前菜单节点或获取它的父元素
            Menu menuParent = menuMap.get(menu.getPid());
            //8 然后将其纳入父元素的旗下
            menuParent.getChildren().add(menu);
        }
        //9.经过上面的运算，根节点包含了整个树形结构，返回根节点就是返回整个树
        return ResultEntity.successWithData(root);
    }

}

4 前端引入ztree的js和css文件，通过ajax请求获取树形json数据，然后用zTree技术展示在前端界面上，前端代码大体分三步

var setting = {} //初始化数据setting
$.ajax({....}) //发送ajax请获取setting
//ajax请求响应成功后
$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化树形结构	

新增权限

过程

• 由于添加按钮是动态生成的，所以需要给添加子结点按钮绑定单击响应函数，弹出添加的模态框
• 用户输入数据，通过jquery获取用户所填信息，通过ajax请求发给后端
• 后端handler => service => mapper => 数据库 => 回显ResultEntity数据到前端

修改权限

• 管理员点击修改按钮 => 触发按钮点击事件 => 弹出模块框，通过jquery技术读取表格中的数据进行数据回显，避免了和数据库直接交互 => 用户点击确定 => 发送ajax请求到后端处理器 => 后端handler（service，mapper）处理 => 前端回显提示信息,展示修改后的数据

删除权限：