(五)关于页面的说明

2021年11月26日 阅读数:3
这篇文章主要向大家介绍(五)关于页面的说明,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

这个项目一直说有easyui,其实核心在后台的部分,前台的管理页面只是简单的一个系统管理:用户管理,角色管理,菜单管理。权限管理全靠角色和菜单组合管理。javascript

这里的权限管理是很简单的,就是控制菜单,有权限访问的页面,就把菜单勾选,没有太多细节的控制。因为本人不是很擅长前端的布局,不少页面的风格、样式都是前人留的,看着代码很古老,好比table布局,加入收藏, 设为首页等功能。前端

因为平时在开发调试的时候,页面缓存问题很烦人,老是要清理浏览器缓存,有时候忽然想到以前找到的资料,还有可能从浏览器历史记录看到,因此加了这么一块防缓存的,参考这里。虽然比较土,仍是能够用的。java

其次,关于超时问题,在SessionInterceptor里面,有这么段代码是判断是否须要登陆的。ajax

    	if(needLogin) {
    		Object userName = request.getSession().getAttribute("LOGIN_USER");
    		if(userName == null) {
    			response.setHeader("sessionstatus", "timeout");
    			System.out.println("会话超时");
    			return false;
    		}
    	}

就是在http响应里 设置了一个header,sessionstatus。在common.js里有这么一段代码浏览器

//全局的ajax访问,处理ajax清求时sesion超时
$.ajaxSetup({ 
    contentType:'application/x-www-form-urlencoded;charset=utf-8',
    complete:function(XMLHttpRequest,textStatus){
    	var sessionstatus = XMLHttpRequest.getResponseHeader('sessionstatus');//经过XMLHttpRequest取得响应头,sessionstatus,
        if(sessionstatus == 'timeout'){
        	//若是超时就处理 ,指定要跳转的页面
        	top.location = getContextPath();
        }
    }
});

由于几乎全部的页面都会引入common.js,全部的http post就会通过这么一层的控制,超时就跳转到首页。缓存

还有这段代码是实现easyui的前端分页:session

//前端分页过滤器,easyui 1.3.1可用
function pagerFilter(data){
	if(data.total == undefined){
		data.total = data.rows.length;
	}
	if(data.backuprows == undefined){
		data.backuprows = data.rows;
	}
	var dg = $(this);
	var opts = dg.datagrid('options');
    var pager = dg.datagrid('getPager');
    pager.pagination({
        onSelectPage:function(pageNum, pageSize){
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',{
                pageNumber:pageNum,
                pageSize:pageSize
            });
            dg.datagrid('loadData', data);
        }
    });
    var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
    var end = start + parseInt(opts.pageSize);
    data.rows = data.backuprows.slice(start, end);
    return data;
}

使用的时候,只要这么用就能够了。app

$('#datagrid').datagrid({
    idField:'pid',
    border:false,
    rownumbers:true,
    pageSize: 20,
    singleSelect: true,
    loadFilter:pagerFilter,  //关键就是这里
    url:'url.do'
});

在菜单信息设置这个页面,其实就是设置各个页面对应的页面地址,页面中间是表格,能够作添加修改删除,右侧有棵树,这是一颗菜单树,能够用右键实现菜单节点的添加修改删除,也能够移动菜单节点的顺序,操做完成点个保存就把数据同步到后台了。这个只是一时兴起作的简易添加,限制为二级菜单,须要更多级的结构能够再改造。布局

角色的管理主要仍是菜单树的管理,没啥特殊的。post

大概就是这样,完。