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

前几天,有论坛水友问Extjs4的权限系统,本人学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 : "密   码",

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");

});