用户权限设计

软件工程结课之际,小组需要做一个demo,定题为社区信息管理系统,参考着之前老师的设计,记录下我对该系统的权限设计.
1. 大致需求

三种角色:超级管理员(后文俗称超管),管理员,居民.
每种角色登录进去后有不同的主页并展示不同的左侧导航栏树形列表
系统内置admin超管,不允许删除.超管允许添加三类角色,管理员仅允许添加居民.

2. 大致思路
前端框架选用topjui,设计三张表,一张权限表,一张存放系统资源表,一张居民详情表.用户登录进去后存储部分信息至cookie中如角色类型等必要信息跳转至首页.首页发送异步请求获取左侧导航栏一级菜单信息,用户点击一级菜单在去后台异步获取对应的二级菜单信息.关键在于前台如何渲染json数据生成左侧导航栏.

3. 表结构设计

• 权限表

• 居民详情表

  

• 系统资源路径表

  

  
  4. 后台核心代码

	/*
	 * 获取二级菜单
	 *poolBean为封装的一个操作jdbc增删改查的工具类
	 */
	public String getNavDetail() {
		PoolBean poolbean = new PoolBean();
		ResultSet rs = poolbean.executeQuery("select * from s_modules where PID=" + PID);
		
		JSONArray jsonArray = new JSONArray();
		try {
			while (rs.next()) {
				JSONObject jsonObject = new JSONObject();
				jsonObject.put("id", rs.getString("ID"));
				jsonObject.put("pid", PID);// 级别
				jsonObject.put("text", rs.getString("Text"));// 名称
				jsonObject.put("state", "open");// 状态
				jsonObject.put("iconCls", rs.getString("IconCls"));// 图标
				jsonObject.put("url", rs.getString("Url"));// 资源路径
				jsonObject.put("control", rs.getString("Control"));// 用户类型

				jsonArray.put(jsonObject);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		//释放连接
		poolbean.freeconnection();
		//System.out.println( jsonArray.toString());
		return jsonArray.toString();
	}

5. 前台核心代码
关键在于如何使用js渲染json数据并生成手风琴,我使用的是topjui框架.主要代码如下:

  var url = "./common/_nav.jsp";
        $.get( url, {"PID": "-1"}, // 获取第一层目录
            function (data) {
                var currentRole = $.cookie('_USER_TYPE');
                var isSelected = true;
                $.each(data, function (i, e) {// 循环创建手风琴的项
                	//console.log(e.control)
                	if(e.control.indexOf(currentRole) < 0) return true;
                	//console.log(e.id)
                    var pid = e.pid;
                    menuLoaded.push(false); //初始化加载状态
                    //var isSelected = i == 2 ? true : false; //默认显示
                    $('#RightAccordion').iAccordion('add', {
                        fit: false,
                        title: e.text,
                        content: "<ul id='tree" + e.id + "' ></ul>",
                        border: false,
                        selected: isSelected,
                        iconCls: e.iconCls
                    });
                    isSelected = false;
                    //$.parser.parse();
                    //直接一次性载入二级菜单
                    $.get("./common/_nav.jsp?PID=" + e.id, function (data) {
                    	$.each(data, function(idx, obj){
                    		if(obj.control.indexOf(currentRole) < 0) return true;
                    		itemContent = "<div id='navItem' class='tree-node' onclick='javascript:addTab(" + JSON.stringify(obj) + ")'>";
                    		itemContent += "<span class='tree-indent'></span>";
                    		itemContent += "<span class='tree-icon " + obj.iconCls + " '></span>";
                    		itemContent += "<span class='tree-title'>"+obj.text+"</span></div>";
                    		$("#tree" + e.id).append(itemContent);
                    	});
                    }, 'json');
                });
            }, "json"
        );

6.小结
最后的样式如下:
超级管理员版

居民版:(系统管理中此时没有了用户管理了.)