EasyUI+JavaWeb奖助学金管理系统[8]-加载角色对应菜单功能实现

简介: 本文目录1. 本章任务2. 构造测试数据3. 后端提供查询登录角色对应菜单的接口4. 后台管理页面加载菜单5. 测试验证

1. 本章任务

登录后台管理页面后,首先要做的就是根据当前登录人的角色,加载其拥有的菜单列表。

本章就来实现下这一重要的战略任务,干就完了!

2. 构造测试数据

首先构造一条用户数据,其拥有学校管理员角色(schoolmaster)

INSERT INTO `scholar-system`.`user`(`id`, `userName`, `loginName`, `password`, `role`, `departId`) VALUES (1, '学校管理员', '学校管理员', '123', 'schoolmaster', 1);
1
然后构造一条该用户所属的机构数据,注意学校属于顶级机构,没有上级机构,所以parentId为默认的-1。
INSERT INTO `scholar-system`.`depart`(`id`, `name`, `type`, `parentId`) VALUES (1, '汉东大学', 'school', -1);
1
再然后,构造几个菜单,考虑学校管理员拥有项目管理、机构管理、人员管理、权限管理功能,所以先录入这几个菜单。
INSERT INTO `scholar-system`.`menu`(`id`, `name`, `path`) VALUES (1, '项目管理', 'projectManage.html');
INSERT INTO `scholar-system`.`menu`(`id`, `name`, `path`) VALUES (2, '机构管理', 'departManage.html');
INSERT INTO `scholar-system`.`menu`(`id`, `name`, `path`) VALUES (3, '人员管理', 'userManage.html');
INSERT INTO `scholar-system`.`menu`(`id`, `name`, `path`) VALUES (4, '权限管理', 'powerManage.html');
1
2
3
4
最后,schoolmaster角色需要拥有这几个菜单的权限,所以构造权限数据,即角色-菜单对应关系数据。
INSERT INTO `scholar-system`.`rolemenu`(`id`, `role`, `menuId`) VALUES (1, 'schoolmaster', 1);
INSERT INTO `scholar-system`.`rolemenu`(`id`, `role`, `menuId`) VALUES (2, 'schoolmaster', 2);
INSERT INTO `scholar-system`.`rolemenu`(`id`, `role`, `menuId`) VALUES (3, 'schoolmaster', 3);
INSERT INTO `scholar-system`.`rolemenu`(`id`, `role`, `menuId`) VALUES (4, 'schoolmaster', 4);
1
2
3
4
注意上面的数据表明,schoolmaster拥有menu中id为1/2/3/4的菜单的访问权限。
PS:此处进行下勘误,之前rolemenu表及roleMenu实体类中的roleId应改为role。
3. 后端提供查询登录角色对应菜单的接口
从session中取出登录用户信息,查询其对应的菜单即可。
CoreServlet.handleRequest方法修改如下:
    // 查询登录用户拥有的菜单
    else if (method.equals("getMenusOfUser")) {
      User loginUser = (User) request.getSession().getAttribute("loginUser");
      if (loginUser == null) {
        throw new Exception("未登录!");
      }
      MenuDao menuDao = new MenuDao();
      result.setData(menuDao.getMenusOfUser(loginUser));// 返回数据为对应菜单
      result.setCode(0);
      result.setMsg("操作成功");
    }
meuDao添加方法:
  /**
    * 获取用户拥有的菜单
    */
   public List<Menu> getMenusOfUser(User user) throws SQLException {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "select * from menu where id in (select menuId from rolemenu where role=?)";
    QueryRunner runner = new QueryRunner();
    Object[] params = { user.getRole() };
    List<Menu> menus = runner.query(conn, sql, new BeanListHandler<Menu>(Menu.class), params);
    ConnectionUtils.releaseConnection(conn);
    return menus;
   }
4. 后台管理页面加载菜单
后台管理页面在初始化时,就调用接口加载菜单即可。
<script>
   // 初始化
   $(function () {
    loadMenusOfUser();
   });
   // 加载菜单
   function loadMenusOfUser() {
    $.ajax({
      url: "CoreServlet?method=getMenusOfUser",
      type: "post",
      dataType: "json",
      data: null,//该方法不需要参数
      success: function (res) {
        console.log(res);
        if (res.code == 0) {//将返回的菜单数据设置到菜单栏
          $("#menu-bar").empty();//清空菜单
          $.each(res.data, function (i, v) {//遍历加载子菜单
            console.log(v);
            $("#menu-bar").append('<li><a href="' + v.path + '" target="main-frame">' + v.name + '</a></li>');
          });
        } else {//提示错误信息
          alert(res.msg);
        }
      },
    });
   }
</script>
注意需要为菜单添加一个id标识。
   <ul id="menu-bar">
      <li><a href="http://www.qq.com" target="main-frame">腾讯</a></li>
      <li><a href="http://www.baidu.com" target="main-frame">百度</a></li>
    </ul>
另外为了方便测试,需要添加下projectManage.html等4个网页。

5. 测试验证

重启tomcat后测试验证,非常完美哈。

image.png


相关文章
|
8月前
|
前端开发
10EasyUI 菜单与按钮- 创建链接按钮(Link Button)
10EasyUI 菜单与按钮- 创建链接按钮(Link Button)
62 0
|
8月前
|
JavaScript 前端开发
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
59 0
|
4天前
基于EasyUI的后台管理系统页面原型_示例图_下载地址
基于EasyUI的后台管理系统页面原型_示例图_下载地址
5 0
|
7月前
|
Java
EasyUI的组件加载两次的问题
EasyUI的组件加载两次的问题
|
8月前
|
存储 数据格式
55EasyUI 树形菜单- 树形菜单加载父/子节点
55EasyUI 树形菜单- 树形菜单加载父/子节点
22 0
|
8月前
|
数据库
22EasyUI 数据网格- 添加查询功能
22EasyUI 数据网格- 添加查询功能
23 0
|
8月前
|
JavaScript 前端开发
11EasyUI 菜单与按钮- 创建菜单按钮(Menu Button)
11EasyUI 菜单与按钮- 创建菜单按钮(Menu Button)
28 0
|
8月前
09EasyUI 菜单与按钮- 创建简单的菜单
09EasyUI 菜单与按钮- 创建简单的菜单
17 0
|
安全 数据安全/隐私保护
EasyUI+JavaWeb奖助学金管理系统[20]-项目总结与展望
本文目录 1. 总结 1.1 管理员新增奖助学金项目 1.2 学生发起申请 1.3 班主任审批 1.4 学院管理员审批 1.5 学校管理员审批 1.6 学生查看申请结果 2. 展望
153 0
EasyUI+JavaWeb奖助学金管理系统[20]-项目总结与展望
|
前端开发
EasyUI+JavaWeb奖助学金管理系统[19]-奖助学金审批功能开发
本文目录 1. 本章任务 2. 查看当前待审批的申请 3. 审批功能的开发 4. 总结
180 0

热门文章

最新文章