【尚筹网】IDEA版实现（五）菜单维护

最新推荐文章于 2022-12-29 17:00:23 发布

菜比丶

最新推荐文章于 2022-12-29 17:00:23 发布

阅读量625

点赞数

分类专栏：尚筹网文章标签： java idea maven spring tomcat

本文链接：https://blog.csdn.net/m0_56018220/article/details/123308131

版权

尚筹网专栏收录该内容

14 篇文章 8 订阅

订阅专栏

由于尚硅谷的视频是通过Eclipse软件来做的，其中有些操作与IDEA上有所区别，所以我在这里将IDEA区别于Eclipse的操作、操作过程中涉及的源码（与视频的源码略有出入）以及大家可能遇到的种种问题分享给大家，这些源码在我这里均是通过测试的，仅供参考！

1 创建数据库表

在SQLyog中配置t_menu数据库表：

create table t_menu ( 
    id int(11) not null auto_increment, 
    pid int(11), 
    name varchar(200), 
    url varchar(200), 
    icon varchar(200), 
    primary key (id) 
);

insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('1',NULL,'系统权限菜单','glyphicon glyphicon-th-list',NULL); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('2','1','控制面板 ','glyphicon glyphicon-dashboard','main.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('3','1','权限管理','glyphicon glyphicon glyphicon-tasks',NULL); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('4','3','用户维护 ','glyphicon glyphicon-user','user/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('5','3','角色维护 ','glyphicon glyphicon-king','role/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('6','3','菜单维护 ','glyphicon glyphicon-lock','permission/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('7','1','业务审核 ','glyphicon glyphicon-ok',NULL); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('8','7','实名认证审核 ','glyphicon glyphicon-check','auth_cert/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('9','7','广告审核 ','glyphicon glyphicon-check','auth_adv/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('10','7','项目审核 ','glyphicon glyphicon-check','auth_project/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('11','1','业务管理 ','glyphicon glyphicon-th-large',NULL); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('12','11','资质维护 ','glyphicon glyphicon-picture','cert/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('13','11','分类管理 ','glyphicon glyphicon-equalizer','certtype/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('14','11','流程管理 ','glyphicon glyphicon-random','process/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('15','11','广告管理 ','glyphicon glyphicon-hdd','advert/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('16','11','消息模板 ','glyphicon glyphicon-comment','message/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('17','11','项目分类 ','glyphicon glyphicon-list','projectType/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('18','11','项目标签 ','glyphicon glyphicon-tags','tag/index.htm'); 
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('19','1','参数管理 ','glyphicon glyphicon-list-alt','param/index.htm');

2 mybatis逆向工程

修改reverse\src\main\resources\generatorConfig.xml：

<!--  数据库表名字和我们的 entity 类对应的映射指定 -->
<table tableName="t_menu" domainObjectName="Menu" />

在IDEA右侧的maven project找到mybatis-generator:generate并点击运行，生成文件（与前文操作相同）

修改reverse\src\main\java\com\atguigu\crowd\entity\Menu.java

// 存储子节点的集合，初始化以避免空指针异常
private List<Menu> children;

// 控制节点是否默认展开，设置为true表示默认打开
private Boolean open = true;

public List<Menu> getChildren() {
    return children;
}

public void setChildren(List<Menu> children) {
    this.children = children;
}

public Boolean getOpen() {
    return open;
}

public void setOpen(Boolean open) {
    this.open = open;
}

public Menu(Integer id, Integer pid, String name, String url, String icon, List<Menu> children, Boolean open) {
    this.id = id;
    this.pid = pid;
    this.name = name;
    this.url = url;
    this.icon = icon;
    this.children = children;
    this.open = open;
}

@Override
public String toString() {
    return "Menu{" +
        "id=" + id +
        ", pid=" + pid +
        ", name='" + name + '\'' +
        ", url='" + url + '\'' +
        ", icon='" + icon + '\'' +
        ", children=" + children +
        ", open=" + open +
        '}';
}

将Menu.java与MenuExample.java放入entity\src\main\java\com\atguigu\crowd\entity中

将MenuMapper.java放入component\src\main\java\com\atguigu\crowd\mapper中

将MenuMapper.xml放入webui\src\main\resources\mybatis\mapper中

3 树型结构显示

3.1 后端部分

3.1.1 新建后端文件

新建component\src\main\java\com\atguigu\crowd\service\api\MenuService.java

新建component\src\main\java\com\atguigu\crowd\service\impl\MenuServiceImpl.java

package com.atguigu.crowd.service.impl;

import com.atguigu.crowd.mapper.MenuMapper;
import com.atguigu.crowd.service.api.MenuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class MenuServiceImpl implements MenuService {

    @Autowired
    private MenuMapper menuMapper;
}

新建component\src\main\java\com\atguigu\crowd\mvc\handler\MenuHandler.java

package com.atguigu.crowd.mvc.handler;

import com.atguigu.crowd.service.api.MenuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

@Controller
public class MenuHandler {

    @Autowired
    private MenuService menuService;

}

3.1.2 MenuHandler

修改component\src\main\java\com\atguigu\crowd\mvc\handler\MenuHandler.java

@Controller
public class MenuHandler {

    @Autowired
    private MenuService menuService;


    @ResponseBody
    @RequestMapping("/menu/get/whole/tree.json")
    public ResultEntity<Menu> getWholeTreeNew() {

        // 1.查询全部的Menu对象
        List<Menu> menuList = menuService.getAll();

        // 2.声明一个变量来存储找到的根节点
        Menu root = null;

        // 3.创建 Map 对象用来存储 id 和 Menu 对象的对应关系便于查找父节点
        Map<Integer,Menu> menuMap = new HashMap<>();

        // 4.遍历 menuList 填充 menuMap
        for (Menu menu: menuList) {

            Integer id = menu.getId();

            menuMap.put(id, menu);
        }

        // 5.再次遍历 menuList 查找根节点、组装父子节点
        for (Menu menu: menuList) {

            // 6.获取当前 menu 对象的 pid 属性值
            Integer pid = menu.getPid();

            // 7.如果 pid 为 null，判定为根节点
            if (pid == null) {
                root = menu;

                // 8.如果当前节点是根节点，那么肯定没有父节点，不必继续执行
                continue;
            }
            // 9.如果 pid 不为 null，说明当前节点有父节点，那么可以根据 pid 到 menuMap 中 查找对应的 Menu 对象
            Menu father = menuMap.get(pid);

            // 10.将当前节点存入父节点的 children 集合
            father.getChildren().add(menu);
        }

        // 11.经过上面的运算，根节点包含了整个树形结构，返回根节点就是返回整个树
        return ResultEntity.successWithData(root);
    }
}

并新增getAll()方法及实现类：

修改component\src\main\java\com\atguigu\crowd\service\impl\MenuServiceImpl.java

@Override
public List<Menu> getAll() {
    List<Menu> menuList = menuMapper.selectByExample(new MenuExample());
    return menuList;
}

3.2 前端部分

修改webui\src\main\resources\spring-web-mvc.xml

<mvc:view-controller path="/menu/to/page.html" view-name="menu-page"/>

在webui\src\main\webapp\WEB-INF新建menu-page.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="include-head.jsp" %>
<link rel="stylesheet" href="ztree/zTreeStyle.css"/>
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js">
    </script>
<script type="text/javascript" src="crowd/my-menu.js"></script>    
<script type="text/javascript">
    $(function (){
        // 调用专门封装好的函数初始化树形结构
        generateTree();
    })
</script>

<body>
<%@include file="include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表 <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-question-sign"></i></div></div>
                <div class="panel-body">
                    <!-- zTree动态生成的标签所依附的静态节点 -->
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

修改菜单维护图标：webui\src\main\webapp\WEB-INF\include-sidebar.jsp

<a href="menu/to/page.do"><i class="glyphicon glyphicon-lock"></i> 菜单维护</a>

新建webui\src\main\webapp\crowd\my-menu.js

// 修改默认的图标
function myAddDiyDom(treeId, treeNode) {

    // treeId是整个树形结构附着的ul标签的id
    console.log("treeId="+treeId);

    // 当前树形节点的全部数据、
    console.log(treeNode);

   // zTree 生成 id 的规则
   //例子： treeDemo_7_ico
   //解析： ul 标签的 id_当前节点的序号_功能
   //提示： “ul 标签的 id_当前节点的序号” 部分可以通过访问 treeNode 的 tId 属性得到
   //根据 id 的生成规则拼接出来 span 标签的 id

    var spanId = treeNode.tId + "_ico";

    // 根据控制图标的span标签的id找到这个span标签
    // 删除旧的class
    // 添加新的class
    $("#"+spanId).removeClass().addClass(treeNode.icon);
}

// 鼠标移入节点范围时添加按钮组
function myAddHoverDom(treeId, treeNode) {

    // 按钮组的标签结构： <span><a><i></i></a><a><i></i></a></span>
    // 按钮组出现的位置： 节点中 treeDemo_n_a 超链接的后面

    // 为了在需要移除按钮组的时候能够精确定位到按钮组所在 span， 需要给 span 设置有规律的 id
    var btnGroupId = treeNode.tId + "_btnGrp";
    // 判断一下以前是否已经添加了按钮组
    if($("#"+btnGroupId).length > 0) {
        return ;
    }
    var addBtn = "<a id='"+treeNode.id+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title='添加子节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg '></i></a>";
    var removeBtn = "<a id='"+treeNode.id+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title=' 删 除 节 点 '>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg '></i></a>";
    var editBtn = "<a id='"+treeNode.id+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title=' 修 改 节 点 '>&nbsp;&nbsp;<i class='fa fa-fw fa-edit rbg '></i></a>";

    // 获取当前节点的级别数据
    var level = treeNode.level;
    // 声明变量存储拼装好的按钮代码
    var btnHTML = "";
    // 判断当前节点的级别
    if(level === 0) {
        // 级别为 0 时是根节点， 只能添加子节点
        btnHTML = addBtn;
    }
    if (level === 1) {
        // 级别为 1 时是分支节点， 可以添加子节点、 修改
        btnHTML = addBtn + " " + editBtn;
        // 获取当前节点的子节点数量
        var length = treeNode.children.length;
        // 如果没有子节点， 可以删除
        if(length === 0) {
            btnHTML = btnHTML + " " + removeBtn;
        }
    }
    if (level === 2) {
        // 级别为 2 时是叶子节点， 可以修改、 删除
        btnHTML = editBtn + " " + removeBtn;
    }
    // 找到附着按钮组的超链接
    var anchorId = treeNode.tId + "_a";
    // 执行在超链接后面附加 span 元素的操作
    $("#"+anchorId).after("<span id='"+btnGroupId+"'>"+btnHTML+"</span>");
}

// 鼠标离开节点范围时删除按钮组
function myRemoveHoverDom(treeId, treeNode) {

    // 拼接按钮组的 id
    var btnGroupId = treeNode.tId + "_btnGrp";
    // 移除对应的元素
    $("#"+btnGroupId).remove();
}

// 生成树形结构的函数
function generateTree() {
    // 1.准备生成树形结构的JSON数据，数据来源是发送Ajax请求得到
    $.ajax({
        url: "menu/get/whole/tree.json",
        type: "post",
        dataType: "json",
        success: function (response) {
            var result = response.result;
            if (result === "SUCCESS") {

                // 2.创建json对象用于存储对zTree所做的设置
                var setting = {
                    view: {
                        addDiyDom: myAddDiyDom,
                        addHoverDom: myAddHoverDom,
                        removeHoverDom: myRemoveHoverDom
                    },
                    data: {
                        key:{
                            url: "nothing", // url值改为不存在的属性名，则点击页面响应菜单时不会跳转
                        }
                    }
                };

                // 3.从响应体中获取用来生成树形结构的JSON数据
                var zNodes = response.data;

                // 4.初始化树形结构
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }
            if (result === "FAILED") {
                layer.msg(response.message);
            }
        },
    });
}

测试：

在这里插入图片描述

4 子节点添加

4.1 前端部分

图标功能赋予：修改webui\src\main\webapp\crowd\my-menu.js

var addBtn = "<a id='"+treeNode.id+"' class='addBtn btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title='添加子节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg '></i></a>";
var removeBtn = "<a id='"+treeNode.id+"' class='removeBtn btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title=' 删 除 节 点 '>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg '></i></a>";
var editBtn = "<a id='"+treeNode.id+"' class='editBtn btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title=' 修 改 节 点 '>&nbsp;&nbsp;<i class='fafa-fw fa-edit rbg '></i></a>";

修改webui\src\main\webapp\WEB-INF\menu-page.jsp

<script type="text/javascript">
    $(function (){

        // 调用专门封装好的函数初始化树形结构
        generateTree();

        // 给添加子节点按钮绑定单击响应函数
        $("#treeDemo").on("click",".addBtn",function(){

            // 将当前节点的id，作为新节点的pid保存到全局变量
            window.pid = this.id;

            // 打开模态框
            $("#menuAddModal").modal("show");

            return false;
        });

        // 给添加子节点的模态框中的保存按钮绑定单击响应函数
        $("#menuSaveBtn").click(function(){

            // 收集表单项中用户输入的数据
            var name = $.trim($("#menuAddModal [name=name]").val());
            var url = $.trim($("#menuAddModal [name=url]").val());

            // 单选按钮要定位到“被选中”的那一个
            var icon = $("#menuAddModal [name=icon]:checked").val();

            // 发送Ajax请求
            $.ajax({
                "url":"menu/save.json",
                "type":"post",
                "data":{
                    "pid": window.pid,
                    "name":name,
                    "url":url,
                    "icon":icon
                },
                "dataType":"json",
                "success":function(response){
                    var result = response.result;

                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");

                        // 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        generateTree();
                    }

                    if(result == "FAILED") {
                        layer.msg("操作失败！"+response.message);
                    }
                },
                "error":function(response){
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuAddModal").modal("hide");

            // 清空表单
            // jQuery对象调用click()函数，里面不传任何参数，相当于用户点击了一下
            $("#menuResetBtn").click();
        });

    })
</script>

添加模态框引入：

<%@include file="/WEB-INF/modal-menu-add.jsp"%>

新建webui\src\main\webapp\WEB-INF\modal-menu-add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="menuAddModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <form>
                <div class="modal-body">
                    请输入节点名称：<input type="text" name="name" /><br />
                    请输入URL地址：<input type="text" name="url" /><br />
                    <i class="glyphicon glyphicon-th-list"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-th-list" />&nbsp;

                    <i class="glyphicon glyphicon-dashboard"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-dashboard" /> &nbsp;

                    <i class="glyphicon glyphicon glyphicon-tasks"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon glyphicon-tasks" /> &nbsp;

                    <i class="glyphicon glyphicon-user"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-user" /> &nbsp;

                    <i class="glyphicon glyphicon-king"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-king" /> &nbsp;

                    <i class="glyphicon glyphicon-lock"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-lock" /> &nbsp;

                    <i class="glyphicon glyphicon-ok"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-ok" /> &nbsp;

                    <i class="glyphicon glyphicon-check"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-check" /> &nbsp;

                    <i class="glyphicon glyphicon-th-large"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-th-large" /> <br />

                    <i class="glyphicon glyphicon-picture"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-picture" /> &nbsp;

                    <i class="glyphicon glyphicon-equalizer"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-equalizer" /> &nbsp;

                    <i class="glyphicon glyphicon-random"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-random" /> &nbsp;

                    <i class="glyphicon glyphicon-hdd"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-hdd" /> &nbsp;

                    <i class="glyphicon glyphicon-comment"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-comment" /> &nbsp;

                    <i class="glyphicon glyphicon-list"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-list" /> &nbsp;

                    <i class="glyphicon glyphicon-tags"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-tags" /> &nbsp;

                    <i class="glyphicon glyphicon-list-alt"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-list-alt" /> &nbsp;
                    <br />

                </div>
                <div class="modal-footer">
                    <button id="menuSaveBtn" type="button" class="btn btn-default"><i class="glyphicon glyphicon-plus"></i> 保存</button>
                    <button id="menuResetBtn" type="reset" class="btn btn-primary"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
                </div>
            </form>
        </div>
    </div>
</div>

4.2 后端部分

修改component\src\main\java\com\atguigu\crowd\mvc\handler\MenuHandler.java

@ResponseBody
@RequestMapping("/menu/save.json")
public ResultEntity<String> saveMenu(Menu menu) {

    menuService.saveMenu(menu);

    return ResultEntity.successWithoutData();
    }

并新增savemenu()方法及实现类：

修改component\src\main\java\com\atguigu\crowd\service\impl\MenuServiceImpl.java

@Override
public void saveMenu(Menu menu) {
    menuMapper.insert(menu);
}

4.3 测试

在这里插入图片描述

5 节点更新

5.1 前端部分

修改webui\src\main\webapp\WEB-INF\menu-page.jsp

// 给编辑按钮绑定单击响应函数
        $("#treeDemo").on("click",".editBtn",function(){

            // 将当前节点的id保存到全局变量
            window.id = this.id;

            // 打开模态框
            $("#menuEditModal").modal("show");

            // 获取zTreeObj对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            // 根据id属性查询节点对象
            // 用来搜索节点的属性名
            var key = "id";

            // 用来搜索节点的属性值
            var value = window.id;

            var currentNode = zTreeObj.getNodeByParam(key, value);

            // 回显表单数据
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);

            // 回显radio可以这样理解：被选中的radio的value属性可以组成一个数组，
            // 然后再用这个数组设置回radio，就能够把对应的值选中
            $("#menuEditModal [name=icon]").val([currentNode.icon]);

            return false;
        });

        // 给更新模态框中的更新按钮绑定单击响应函数
        $("#menuEditBtn").click(function(){

            // 收集表单数据
            var name = $("#menuEditModal [name=name]").val();
            var url = $("#menuEditModal [name=url]").val();
            var icon = $("#menuEditModal [name=icon]:checked").val();

            // 发送Ajax请求
            $.ajax({
                "url":"menu/update.json",
                "type":"post",
                "data":{
                    "id": window.id,
                    "name":name,
                    "url":url,
                    "icon":icon
                },
                "dataType":"json",
                "success":function(response){
                    var result = response.result;

                    if(result === "SUCCESS") {
                        layer.msg("操作成功！");

                        // 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        generateTree();
                    }

                    if(result === "FAILED") {
                        layer.msg("操作失败！"+response.message);
                    }
                },
                "error":function(response){
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuEditModal").modal("hide");

        });

添加模态框引入：

<%@include file="/WEB-INF/modal-menu-edit.jsp"%>

新建webui\src\main\webapp\WEB-INF\modal-menu-edit.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="menuEditModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <form>
                <div class="modal-body">
                    请输入节点名称：<input type="text" name="name" /><br />
                    请输入URL地址：<input type="text" name="url" /><br />
                    <i class="glyphicon glyphicon-th-list"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-th-list" />&nbsp;

                    <i class="glyphicon glyphicon-dashboard"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-dashboard" /> &nbsp;

                    <i class="glyphicon glyphicon glyphicon-tasks"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon glyphicon-tasks" /> &nbsp;

                    <i class="glyphicon glyphicon-user"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-user" /> &nbsp;

                    <i class="glyphicon glyphicon-king"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-king" /> &nbsp;

                    <i class="glyphicon glyphicon-lock"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-lock" /> &nbsp;

                    <i class="glyphicon glyphicon-ok"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-ok" /> &nbsp;

                    <i class="glyphicon glyphicon-check"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-check" /> &nbsp;

                    <i class="glyphicon glyphicon-th-large"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-th-large" /> <br />

                    <i class="glyphicon glyphicon-picture"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-picture" /> &nbsp;

                    <i class="glyphicon glyphicon-equalizer"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-equalizer" /> &nbsp;

                    <i class="glyphicon glyphicon-random"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-random" /> &nbsp;

                    <i class="glyphicon glyphicon-hdd"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-hdd" /> &nbsp;

                    <i class="glyphicon glyphicon-comment"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-comment" /> &nbsp;

                    <i class="glyphicon glyphicon-list"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-list" /> &nbsp;

                    <i class="glyphicon glyphicon-tags"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-tags" /> &nbsp;

                    <i class="glyphicon glyphicon-list-alt"></i>
                    <input type="radio" name="icon" value="glyphicon glyphicon-list-alt" /> &nbsp;
                    <br />

                </div>
                <div class="modal-footer">
                    <button id="menuEditBtn" type="button" class="btn btn-default"><i class="glyphicon glyphicon-edit"></i> 更新</button>
                </div>
            </form>
        </div>
    </div>
</div>

5.2 后端部分

修改component\src\main\java\com\atguigu\crowd\mvc\handler\MenuHandler.java

@ResponseBody
@RequestMapping("/menu/update.json")
public ResultEntity<String> updateMenu(Menu menu) {

    menuService.updateMenu(menu);
    return ResultEntity.successWithoutData();
}

并新增updateMenu()方法及实现类：

修改component\src\main\java\com\atguigu\crowd\service\impl\MenuServiceImpl.java

@Override
public void updateMenu(Menu menu) {
    menuMapper.updateByPrimaryKeySelective(menu);
}

5.3 测试

在这里插入图片描述

6 节点删除

6.1 前端部分

修改webui\src\main\webapp\WEB-INF\menu-page.jsp

// 给 "x" 按钮绑定单击响应函数
        $("#treeDemo").on("click",".removeBtn",function(){
            // 将当前节点的 id 保存到全局变量
            window.id = this.id;
            // 打开模态框
            $("#menuConfirmModal").modal("show");
            // 获取 zTreeObj 对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            // 根据 id 属性查询节点对象
            // 用来搜索节点的属性名
            var key = "id";
            // 用来搜索节点的属性值
            var value = window.id;
            var currentNode = zTreeObj.getNodeByParam(key, value);
            $("#removeNodeSpan").html("【<i class='"+currentNode.icon+"'></i>"+currentNode.name+"】");
            return false;
        });

// 给确认模态框中的 OK 按钮绑定单击响应函数
        $("#confirmBtn").click(function(){
            $.ajax({
                "url":"menu/remove.json",
                "type":"post",
                "data":{
                    "id":window.id
                },
                "dataType":"json",
                "success":function(response){
                    var result = response.result;
                    if(result === "SUCCESS") {
                        layer.msg("操作成功！");

                        // 重新加载树形结构， 注意： 要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据， 因为这里是异步的
                        generateTree();
                    } 
                    
                    if (result === "FAILED") {
                        layer.msg("操作失败！ "+response.message);
                    }
                },
                "error":function(response){
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuConfirmModal").modal("hide");
        });

添加模态框引入：

<%@include file="/WEB-INF/modal-menu-confirm.jsp"%>

新建webui\src\main\webapp\WEB-INF\modal-menu-confirm.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="menuConfirmModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <form>
                <div class="modal-body">
                    您真的要删除<span id="removeNodeSpan"></span>这个节点吗？
                </div>
                <div class="modal-footer">
                    <button id="confirmBtn" type="button" class="btn btn-danger"><i class="glyphicon glyphicon-ok"></i> OK</button>
                </div>
            </form>
        </div>
    </div>
</div>

6.2 后端部分

修改component\src\main\java\com\atguigu\crowd\mvc\handler\MenuHandler.java

@ResponseBody
@RequestMapping("/menu/remove.json")
public ResultEntity<String> removeMenu(@RequestParam("id") Integer id) {

    menuService.removeMenu(id);
    return ResultEntity.successWithoutData();
}

并新增updateMenu()方法及实现类：

修改component\src\main\java\com\atguigu\crowd\service\impl\MenuServiceImpl.java

@Override
public void removeMenu(Integer id) {
    menuMapper.deleteByPrimaryKey(id);
}

6.3 测试

在这里插入图片描述

菜比丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【尚筹网】IDEA版实现（五）菜单维护

由于尚硅谷的视频是通过Eclipse软件来做的，其中有些操作与IDEA上有所区别，所以我在这里将IDEA区别于Eclipse的操作、操作过程中涉及的源码（与视频的源码略有出入）以及大家可能遇到的种种问题分享给大家，这些源码在我这里均是通过测试的，仅供参考！1 创建数据库表在SQLyog中配置t_menu数据库表：create table t_menu ( id int(11) not null auto_increment, pid int(11), name varch
复制链接

扫一扫