問題解決のアイデア 1: ext による Connection クラス
のオーバーロードjs とサーバー側の間の対話はすべて json 形式のデータ対話です。ページ ジャンプとプロンプト関数はすべて extjs と extjs。サーバー側のすべての対話メソッドは
Ext.data.Connection から継承されます。このクラスは、サーバー側との対話のすべてのメソッドをインターセプトできます。サーバー側の権限制御は acegi によって行われます。 acegi.Verification が通らない場合、認証がない場合は 403.jsp
に戻りますので、再度ログインする必要がある場合は、login.jsp をリロードします。 Connectionクラスを作成し、handleResponseメソッドを書き換えて、返された結果が403.jsp、login.jspであるかどうかを判定し、返されたデータが正常であれば、下方向に実行し続けます。
私は個人的に 403.jsp と login.jsp を使用しています。 コメント コード
が 1 行追加されています。これは、このキーワードに依存して機能します コードは次のとおりです。
問題解決のアイデア 2: サーバー側はメニューの JSON データを返します。
私のメニューはツリーで作成されています。メインページを初期化するときは、最初にメニューを初期化します。 🎜> コードは次のとおりです:
//此处重载了Cunnection方法,用来拦截client与Server的交 互，
//后台acegi拦截用户请求后,如果无权限，返回403.jsp;如果没登录，返回login.jsp;
//通过Acegi拦截 后,才返回用户想要的Json结果
Ext.override(Ext.data.Connection, {
handleResponse : Ext.data.Connection.prototype.handleResponse.createInterceptor(
function(response) {
var resText=response.responseText;
if (resText.length>10) {
resText=resText.substr(0,9);
}
if (resText=='<!--login'){
window.top.location.href = topURL+"/login.jsp";
} else if (resText=='<!--deny-'){
if (resText=='<!--deny-'){
Ext.Msg.show({
title : '错误提示',
msg : '禁止访问此功能,请和系统管理员联系',
buttons : Ext.Msg.OK,
icon : Ext.Msg.INFO
});
};
} else if (resText=='<!--404--'){
Ext.Msg.show({
title : '错误提示',
msg : '页面未找到',
buttons : Ext.Msg.OK,
icon : Ext.Msg.INFO
});
}
})
});ログイン後にコピー
This'getJsonMenus.do' はメニューの JSON データを返します。
loader : new Ext.tree.TreeLoader({
dataUrl : 'getJsonMenus.do'
}),ログイン後にコピー
menus は次のとおりです。
list
、
JsonMenu の
<action name="getJsonMenus" class="jsonSystemAction" method="getJsonMenus">
<result type="json">
<param name="root">menus</param>
</result>
</action>
ログイン後にコピー
属性
は次のとおりです: private String
text; private boolean Expanded; id; private boolean Leaf;
private List Children; getJsonMenus.do によって返される形式は次のとおりです
このようにして、メニューが取得されます。一部のネチズンは非同期メニュー ソリューションを提案しており、私もそれを含めました。
ソリューション アイデア 3: すべての TAG を同期的にロードし、hidden 属性を使用して、表示を制御する
コンポーネントの非表示属性を制御する前に、すべてのタグを同期的に読み込む必要があります。非同期読み込みは使いにくいです。
同期読み込みの方法は次のとおりです。
Ext.onReady(function() {
setTimeout(function() {
Ext.get('loading').remove();
Ext.getDom('header').style.visibility = 'visible';
var vp = new Ext.Viewport({
layout : 'border',
defaults : {
collapsible : true,
split : true
},
items : [{
xtype : 'box',
region : 'north',
applyTo : 'header',
height : 30,
split : false
}, {
title : currentUser,
id : 'accordion-panel',
layout : 'border',
region : 'west',
margins : '2 0 5 5',
width : 200,
minSize : 200,
maxSize : 250,
bodyStyle : 'background-color:#DFE8F6',
defaults : {
border : false
},
bbar : [{
text : '开始',
iconCls : 'icon-plugin',
menu : new Ext.menu.Menu({
items : [{
text : '关于系统',
iconCls : 'icon-info',
handler : function() {
new Ext.Window({
closeAction : 'close',
resizable : false,
bodyStyle : 'padding: 7',
modal : true,
title : '关于本系统',
html : '本系统采用目前较为流行的技术实现,
前台使用了ExtJs技术,所以实现了跨浏览器
' +
' 本程序在IE6,IE7,FireFox3均测试通过!
主要技术: Struts2 + Spring + iBatis + ExtJs
'
+ '数 据 库: Oracle 9i',
width : 300,
height : 200
}).show();
}
}, {
text : '退出系统',
iconCls : 'icon-delete',
handler : function() {
Ext.Msg.confirm('操作提示', '您确定要退出本系统?', function(btn) {
if ('yes' == btn) {
Ext.Ajax.request({
url : 'logout.do',
success : function() {
location = '/';
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '退出系统失败!',
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});
}
});
}
});
}
}]
})
}],
items : [{
layout : 'accordion',
region : 'center',
items : [{
title : '导航菜单',
iconCls : 'icon-nav',
border : false,
items : [{
xtype : 'treepanel',
border : false,
rootVisible : false,
autoScroll : true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'getJsonMenus.do'
}),
root : new Ext.tree.AsyncTreeNode(),
listeners : {
'click' : function(n) {
try {
var sn = this.selModel.selNode || {};
if (n.leaf && n.id != sn.id) {
Ext.getCmp('content-panel').layout.setActiveItem(n.id.substring(0, n.id
.indexOf('-'))
+ '-panel');
}
} catch (e) {
}
}
}
}]
},{
title : '系统设置',
iconCls : 'icon-nav'
}]
}]
}, {
id : 'content-panel',
region : 'center',
layout : 'card',
margins : '2 5 5 0',
activeItem : 0,
border : false,
items : [start, p_company, p_user, p_dept, p_system, p_subject, p_category, p_resource]
}]
});
}, 250);
});ログイン後にコピー
js での TAG の使用法は次のとおりです。
getJsonTags.do は <🎜 を返します。 >Map
//FUTURE_TAG全局的TAG控制类, 控制的组件的hidden属性,key=TAG的名字,value=true(组件隐藏),false(组件显示)
var FUTURE_TAG={tbar1: false, tbar2: true};
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("GET", 'getJsonTags.do',false);
conn.send(null);
future_tag= eval('(' + conn.responseText + ')');ログイン後にコピー
オブジェクト
、キーはタグ名、値はブール値です
Java は次のように記述されます:
var btn_add_system = new Ext.Button({
text : '添加',
iconCls : 'icon-add',
hidden: FUTURE_TAG.system_add,
handler : function() {
window_add_system.show();
}
});ログイン後にコピー
Strut2 構成は次のとおりです: このようにして、前景コンポーネントを背景に表示するかどうかを制御でき、それによって目的を達成できます。
解決策 4:
ajax を通じてサーバー側の権限値を読み取り、次のようなデータを返します:
tagMap=new HashMap<String,Boolean>();
for (int i=0;i<allTagList.size();i++){
tagMap.put(allTagList.get(i).getResString(), true);
}ログイン後にコピー
{tbar1: false, tbar2: true}
次に extjs で:
var vResult = eval ('(' ajaxText ')'); //Get {tbar1: false, tbar2: true}
このようにして、tbar
<action name="getJsonTags" class="jsonSystemAction" method="getJsonTags">
<result type="json">
<param name="root">tagMap</param>
</result>
</action>
ログイン後にコピー
disabled: vResult.tbar1
disabled に値を直接割り当てることができます。 vResult.tbar2
解決策 5:
モジュールの権限の設定は、ユーザーが操作できる権限を設定するために使用されます。モジュールの動作可否を設定できます。
権限を設定するためのサブフォームがポップアップ表示されます。
権限を設定する前にユーザーを選択する必要があります。
Js コード
ポップアップ フォームの中央に配置されるツリーを作成します。
JS コード
ポップアップサブフォームを作成します。
Js コード
var row = grid_user.getSelectionModel().getSelected();
if(!row){
alert('对不起，您还未选择数据!');
return;
}
var row = grid_user.getSelectionModel().getSelected();
if(!row){
alert('对不起，您还未选择数据!');
return;
}ログイン後にコピー
データの読み込み中にプロンプトを表示します。
Js コード
var root=new Ext.tree.TreeNode({
id:"root",
text:"所有操作",
checked:false,
iconCls:'task-folder'
});
var tree=new Ext.tree.TreePanel({
frame:false,
region:'center',
root:root,
animate:true,
enableDD:false,
border:false,
rootVisible:true,
autoScroll:true
});
var root=new Ext.tree.TreeNode({
id:"root",
text:"所有操作",
checked:false,
iconCls:'task-folder' });
var tree=new Ext.tree.TreePanel({
frame:false,
region:'center',
root:root,
animate:true,
enableDD:false,
border:false,
rootVisible:true,
autoScroll:true
});ログイン後にコピー
ルート ノード、選択したユーザー行、および親ノード フラグをパラメータとしてメソッドを呼び出します。
Js コード
var win = new Ext.Window({
title:'设置模块权限',
closable:true,
width:300,
height:500,
plain:true,
layout:'border',
modal:true,
items:[tree]
});
win.show(this);
var win = new Ext.Window({
title:'设置模块权限',
closable:true,
width:300,
height:500,
plain:true,
layout:'border',
modal:true,
items:[tree]
});
win.show(this);ログイン後にコピー
はバックグラウンドからデータを取得し、クライアント上の
メソッド定義とメソッド内容をツリー形式で表示します。
Ext.MessageBox.show({
title:'请稍候',
msg:'正在加载数据，请耐心等待...',
progress:true
});
Ext.MessageBox.show({
title:'请稍候',
msg:'正在加载数据，请耐心等待...',
progress:true
});ログイン後にコピー
Js コード
JSON データの定義。
getNodes(row,root,'root');
getNodes(row,root,'root');
ログイン後にコピー
JSコード
var record_pri = new Ext.data.Record.create([
{name:'modelId'},
{name:'modelName'},
{name:'sort'},
{name:'canUse'},
{name:'privilegeId'}
]);
var store_pri = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'../'}),
reader: new Ext.data.JsonReader({root:'rows'},record_pri)
});
var record_pri = new Ext.data.Record.create([
{name:'modelId'},
{name:'modelName'},
{name:'sort'},
{name:'canUse'},
{name:'privilegeId'}
]); var store_pri = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'../'}),
reader: new Ext.data.JsonReader({root:'rows'},record_pri)
});ログイン後にコピー
无刷新请求，获取数据并展现出来；并添加事件监听。当点击树某一节点时，判断是否已经从后台取得数据，如果还没有取则从后台获取数据，再根据返回的数据判断是叶子节点还是非叶子节点。然后以不同的方式展现与处理。
叶子节点和非叶子节点展现时，使用的图标不同。叶子节点没有添加单击事件，而非叶子节点添加了单击事件。
Js代码
Ext.Ajax.request({
url:'http://www.cnblogs.com/../privilegeAction.do?method=list',
params:{
userId:row.get('userId'),
parentId:parent
},
success:function(response, request){
Ext.MessageBox.hide();
var res = Ext.util.JSON.decode(response.responseText);
store_pri.loadData(res);
for(var i=0;i<store_pri.getCount();i++){
var rec = store_pri.getAt(i);
var canuse = (rec.get('canUse')=='是'?true:false);
var modid = rec.get('privilegeId') + '-id-' + rec.get('modelId');
var node;
if(rec.get('sort')=='菜单'){
node = new Ext.tree.TreeNode({
text:rec.get('modelName'),
id:modid,
checked:canuse,
iconCls:'task-folder'
});
node.on('click',function(node){
if(node.firstChild==null){
getNodes(row,node,get_mod_id(node.id));
}
});
} else {
node = new Ext.tree.TreeNode({
text:rec.get('modelName'),
id:modid,
checked:canuse,
iconCls:'task'
});
}
node.on('checkchange',function(node,check){
Ext.Ajax.request({
url:'http://www.cnblogs.com/../privilegeAction.do?method=save2',
params:{
privilegeId:get_rec_id(node.id),
canuse:(check?'是':'否')
},
success:function(response, request){
},
failure:function(){
Ext.MessageBox.hide();
alert('sorry!');
}
});
});
root.appendChild(node);
}
root.expand();
},
failure:function(){
Ext.MessageBox.hide();
alert('sorry!');
}
});
Ext.Ajax.request({
url:'http://www.cnblogs.com/../privilegeAction.do?method=list',
params:{
userId:row.get('userId'),
parentId:parent
},
success:function(response, request){
Ext.MessageBox.hide();
var res = Ext.util.JSON.decode(response.responseText);
store_pri.loadData(res);
for(var i=0;i<store_pri.getCount();i++){
var rec = store_pri.getAt(i);
var canuse = (rec.get('canUse')=='是'?true:false);
var modid = rec.get('privilegeId') + '-id-' + rec.get('modelId');
var node;
if(rec.get('sort')=='菜单'){
node = new Ext.tree.TreeNode({
text:rec.get('modelName'),
id:modid,
checked:canuse,
iconCls:'task-folder'
});
node.on('click',function(node){
if(node.firstChild==null){
getNodes(row,node,get_mod_id(node.id));
}
});
} else {
node = new Ext.tree.TreeNode({
text:rec.get('modelName'),
id:modid,
checked:canuse,
iconCls:'task'
});
}
node.on('checkchange',function(node,check){
Ext.Ajax.request({
url:'http://www.jb51.net/../privilegeAction.do?method=save2',
params:{
privilegeId:get_rec_id(node.id),
canuse:(check?'是':'否')
},
success:function(response, request){
},
failure:function(){
Ext.MessageBox.hide();
alert('sorry!');
}
});
});
root.appendChild(node);
}
root.expand();
},
failure:function(){
Ext.MessageBox.hide();
alert('sorry!');
} });ログイン後にコピー
当非叶子节点被点击时，递归地调用方法来获取孩子节点。
获取行的ID和模块的ID。树的节点将行的ID和模块的ID一起取出来了。不然的话，如果只取得模块ID，而不取行ID，那么在修改的时候，则不能进行正确的修改。
Js代码
function get_rec_id(str){
var arr = str.split('-id-');
return arr[0];
}
function get_mod_id(str){
var arr = str.split('-id-');
return arr[1];
}ログイン後にコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
