EasyUI+JavaWeb奖助学金管理系统[16]-权限管理功能的开发

1. 本章任务

之前已经实现了登录、项目管理、机构管理、用户管理，本篇来实现下权限管理的功能。

所谓权限管理，在本系统中还是比较简单的，就是某角色所能访问的菜单列表。注意角色与菜单是多对多的关系，即一个角色可以对应对个菜单，一个菜单也可以对应多个角色。

权限管理的对应关系保存在表rolemenu中。

本篇就来实现权限管理，通过下拉框选择一个角色，然后通过表格显示选中角色拥有的菜单信息，在表格中可以选择多个菜单，然后点击提交按钮可以保存角色-菜单对应。

效果图如下：

2. 页面布局

添加角色下拉框、提交按钮、菜单表格，其中菜单表格负责显示角色下拉框对应的菜单列表。

注意我们并未给数据表格设置url，这是因为需要在下拉框选项变化时，动态的为表格加载数据。另外表格中的复选框是根据返回数据中checked值决定是否选中的(true选中false不选中)。


3. 加载角色对应的菜单
当页面初始化，或者下拉框选择发生变化时，我们将角色id发送给后端，后端根据角色返回相应的菜单列表。
注意角色拥有的那些菜单项，其checked属性值应为true，这样在表格中就会显示选中效果。
首先为Menu类添加一个checked属性。
	
public class Menu {
	private String id;
	private String name;
	private String path;
	
	private boolean checked;
}

在页面初始化，以及下拉框选中变化时，触发加载表格数据方法。
		// 初始化
		$(function() {
			loadTableData();
		});
		// 选中项变化
		function onChangeRole() {
			loadTableData();
		}
		// 加载表格数据
		function loadTableData() {
			var param = {
				role: $("#input-role").combobox("getValue")
			};
			console.log("#param:", param);
			$.ajax({
				url: "CoreServlet?method=getMenusByRole",
				type: "post",
				dataType: "json",
				data: param,
				success: function(res) {
					if (res.code == 0) {
						console.log("## res:", res);
						$("#mainTable").datagrid("loadData", res); //动态取数据
					} else { //提示错误信息
						alert(res.msg);
					}
				},
			});
		}

后端根据角色返回对应数据，修改RoleMenuDao:
	
	public List getMenusByRole(String role) throws Exception {
		// 全部菜单
		MenuDao menuDao = new MenuDao();
		List allMenus = menuDao.getAll();
		// 角色对应的菜单(应选中的)
		Connection conn = ConnectionUtils.getConnection();
		String sql = "select * from menu where id in (select menuId from rolemenu where role=?)";
		QueryRunner runner = new QueryRunner();
		Object[] params = { role };
		List selectedMenus = runner.query(conn, sql, new BeanListHandler(Menu.class), params);
		ConnectionUtils.releaseConnection(conn);
		// 选中
		for (Menu one : allMenus) {
			for (Menu selected : selectedMenus) {
				if (one.getId().equals(selected.getId())) {
					one.setChecked(true);
					break;
				}
			}
		}
		return allMenus;
	}

4. 提交角色菜单信息
当点击提交按钮时，将当前角色信息及选中的菜单列表提交到后端进行更新。
修改js代码：
		// 提交修改
		function btnSubmitClick() {
			if ($("#input-role").combobox("getValue") == "-1") {
				alert("请先选择角色!");
				return;
			}
			// 获取选中项
			var checkedItems = $("#mainTable").datagrid("getChecked");
			// 选中菜单的id数组
			var ids = [];
			$.each(checkedItems, function(i, v) {
				ids.push(v.id);
			});
			var param = {
				role: $("#input-role").combobox("getValue"),
				ids: ids.join(","),
			};
			$.ajax({
				url: "CoreServlet?method=submitMenusByRole",
				type: "post",
				dataType: "json",
				data: param,
				success: function(res) {
					if (res.code == 0) {
						alert("提交成功！");
					} else { //提示错误信息
						alert(res.msg);
					}
				},
			});
		}

后端进行相应处理：
	
	public void submitMenusByRole(String role, String[] menuIds) throws Exception {
		// 先删除角色对应所有菜单
		Connection conn = ConnectionUtils.getConnection();
		String sql = "delete from rolemenu where role =?";
		Object[] params = { role };
		QueryRunner runner = new QueryRunner();
		runner.update(conn, sql, params);
		// 然后逐一新增rolemenu
		for (String menuId : menuIds) {
			RoleMenu one = new RoleMenu();
			one.setMenuId(menuId);
			one.setRole(role);
			this.insert(one);
		}
		ConnectionUtils.releaseConnection(conn);
	}

5. 小结
完整版的代码可以从GitHub上查看，此处就不再逐一粘贴了。

EasyUI+JavaWeb奖助学金管理系统[16]-权限管理功能的开发

Java相关栏目本月热门文章