Extjs4 权限系统(包括页面按钮权限) 设计思路+数据库表设计

时间:2022-04-14 15:19:32
前几天,有论坛水友问 Extjs 4的权限系统,本人学 extjs4 也有段时间了,写了个权限系统,供大家参考,写的不好,请大家修改,指证后台是用ssh写的,(集成多项目的平台,贴出代码对大家也没有多少用),具体的实现过程就不贴了,只贴主要的部分,有看不明白了,留言
(注:本权限系统是为集成平台一库多项目设计,其中数据表前辍来区分,我尽量写一项目用的)

1. 数据库表

    (1),M_Menu_Info(图)  ( 注:其中menutype为菜单类型(菜单or按钮),superid为上级菜单,iconcls可设置这个菜单(or按钮)的图片)
(2),M_User_Info(图) 简单的用户表,如果一个用户只有一个角色,就在表中写入一个角色表Id(roleId),如果一个人多个角色,请配置多对多的表
    (3),HX_Authority_RoleInfo(图)  简单的角色表
    (4),HX_Authority_RoleMenu角色权限表,HX_Authority_UserMenu用户独立权限表(图)
2. 前台
   (1),先做个菜单管理的treegrid,方便管理系统中的菜单,代码就不共享了,不会的同学,请去学习一下treegrid,付图
   (2),做 用户管理的增删改查,角色的增删查,(对数据的维护)
   (3),做权限管理的菜单 , tabpanel 中分又装个一个tabpanel,写两个tab,角色权限和用户独立权限,
      实现过大概如下,通过上面combo中的数据,加载出HX_Authority_RoleMenu(or HX_Authority_UserMenu) 相应的权限,显示到treegrid 中,用户可以通过treegrid方便分个角色的权,如果是用第二个tab,用户独立权限,他的权限,包含相应的角色权限,显示grid,
保存数据就可以了,数据格式如 权限表图
   (4),动态显示菜单和页中的按钮     在用户登录成功后,先动态加载treepanel(accordion布局,一级菜单),然后在各自的treepanel中加载它下面的权限菜单,显示出来就行了, 付图
   (5),页面权限按钮的显示     写段脚本吧,
   SetToolButtons = function(tbr) {
                Ext.Ajax.request({
                        url : '/movie/bookDeclareKey.do?action=gridButton',//请求按钮的权限地址
                        callback : function(options,success,response){//回调函数
                                var btnJSONArr= Ext.JSON.decode(response.responseText);
                                for (var i = 0; i < btnJSONArr.length; i++) {
                                        if(btnJSONArr .handler!=''){                                                
                                                btnJSONArr =Ext.create('Ext.button.Button',{ 
                                text: btnJSONArr.text, 
                                iconCls: btnJSONArr.iconCls,
                                handler : eval('('+btnJSONArr.handler+')')
                                });
                                        }else{
                                                btnJSONArr =Ext.create('Ext.button.Button',{ 
                                text: btnJSONArr.text, 
                                iconCls: btnJSONArr.iconCls});
                                        }
                        tbr.add(btnJSONArr);
                          }
                        }                
                });
        }        
        var gridbar = Ext.create('Ext.container.ButtonGroup',{
                width : 700,
                height : 28
        });
        SetToolButtons(gridbar);




以上基本写的差不多了吧,
大家尽量写写,如果有完成不了,交流一下!
上次论坛有个水友,共享个登录的页面,(写的真是丑),我也共享个我想的吧,,(只共享js了)付图
login.js
function reloadcode() {// 刷新验证码函数
        var verify = document.getElementById('safecode');
        verify.setAttribute('src', "/theaters/code/CheckCode?now=" + new Date());
}
Ext.onReady(function() {
        var select_status = new Ext.data.JsonStore({
                url : "/theaters/code/CheckCode?now=" + new Date(),
                fields : ['name', 'value'],
                totalProperty : "total",
                root : "result",
                id : "name"
        });        
        var textfield = 
        Ext.QuickTips.init();        
        var login = new Ext.FormPanel({
                id : 'login',
                name : 'login',        
                //layout:'form',
                baseCls : 'x-plain',
                bodyStyle : 'padding:5 5 0 0',
                width : 350,
                border : false,        
                defaults : {
                        autoFitErrors : false,
                        labelSeparator : ':',
                        labelWidth : 50,
                        labelAlign : 'left',
                        width : 230,        
                        allowBlank : false,
                        msgTarget : 'side'
                },
                defaultType : 'textfield',// 默认字段类型
                items : [{                        
                        fieldLabel : "用户名",
                        fieldCls : 'loginKeyCss',
                        disabled : this.mydisabled,
                        name : "userName",
                        id:"unameid",
                        blankText : "请输入用户名"                                        
                }, {
                        fieldLabel : "密&nbsp;&nbsp;&nbsp;码",                
                        fieldCls : 'verifyKeyCss',
                        disabled : this.mydisabled,
                        name : "userPsw",
                        id:"upassid",
                        blankText : "请输入密码",
                        inputType : "password"                        
                }, {
                        cls : 'key',
                        fieldCls : 'checkCodeCss',
                        name : 'checkCode',
                        id : 'randCode',
                        fieldLabel : '验证码',
                        emptyText : "请输入验证码",
                        maxLength : 4,        
                        blankText : '验证码不能为空!'
                }],
                buttons : [{                        
                        text : '登录',
                        handler : submit_login
                }, {
                        text : '取消',
                        handler : function() {
                                login.form.reset();
                        }// 重置表单
                }],
                bbar : [{
                        html : '<font size=1 color=gray>版权所有(C) 2011-2012 上海海锐信息技术有限公司 v11.1</font>'
                }]
        });        
        var win = new Ext.Window({
                id : 'win',
                title : '<div align="center"><font size=2>电影数据综合业务处理系统--用户登录</font></div>',
                layout : 'fit',
                width : 280,
                height : 220,
                bodyStyle : 'padding:5px;',
                maximizable : false,
                closeAction : 'close',
                closable : false,
                resizable:false,
                collapsible : true,
                modal:true,
                //plain : true,
                //buttonAlign : 'center',
                items : login
        });        
        win.show();
        var bd = Ext.getDom('randCode');
        var bd2 = Ext.get(bd.parentNode);
        bd2.createChild([{
                tag : 'span',
                html : ' <a href="javascript:reloadcode();">'
        }, {
                tag : 'img',
                id : 'safecode',
                src : "/theaters/code/CheckCode?now=" + new Date(),
                align : 'absbottom'
        }, {
                tag : 'span',
                html : '</a> <b>点击图片可刷新</b>'
        }]);
        function submit_login() {
                if (win.getComponent('login').form.isValid()) {                          
                        win.getComponent('login').form.submit({
                                url : '/theaters/checklogin.do?action=checklogin',
                                waitTitle : '提示',
                                method : 'POST',                                
                                waitMsg : '正在登录验证,请稍候...',
                                success : function(form, action) {
                                        var loginResult = action.result.success;
                                        if (loginResult == false) {
                                                Ext.MessageBox.alert('提示', action.result.message);
                                                
                                        } else if (loginResult == true) {
                                                Ext.MessageBox.alert('提示', action.result.message);
                                                window.location.href = "/theaters/checklogin.do?action=login";
                                        }
                                },
                                failure : function(form, action) {
                                        Ext.MessageBox.alert('提示', action.result.message);
                                        win.getComponent('login').form.reset();
                                        reloadcode();
                                }
                        });
                }
        }
        var map = new Ext.util.KeyMap('login', {
            key: 13, // or Ext.EventObject.ENTER
            fn: submit_login,
            scope: this
        });        
        Ext.getCmp("unameid").setValue("hxadmin");
        Ext.getCmp("upassid").setValue("1");
});