문제 해결 아이디어 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를 사용합니다. 주석코드
가 한 줄 추가되는데, 이 키워드를 사용하여 작동합니다코드는 다음과 같습니다.
문제 해결 아이디어 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
});
}
})
});로그인 후 복사
이 'getJsonMenus.do'는 메뉴 json 데이터를 반환합니다. strut2의 구성은 다음과 같습니다.
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 private String입니다. id;
private boolean leaf; private List children; getJsonMenus.do가 반환하는 형식은 tree의 형식 요구 사항을 충족할 수 있습니다
이런 식으로 메뉴를 얻습니다. 일부 네티즌이 비동기식 메뉴 솔루션을 제안했고 저도 이를 포함했습니다.
해결책 아이디어 3: 모든 태그를 동기식으로 로드하고 숨겨진 속성을 사용합니다. 디스플레이 제어
구성 요소의 숨겨진 속성을 제어하려면 모든 태그를 동기식으로 로드해야 합니다. 비동기식 로드는 사용하기 쉽지 않습니다.
동기 로딩 방법은 다음과 같습니다.
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 + ')');로그인 후 복사
객체
, 키는 TAG 이름, 값은 부울
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:
tagMap=new HashMap<String,Boolean>();
for (int i=0;i<allTagList.size();i++){
tagMap.put(allTagList.get(i).getResString(), true);
}로그인 후 복사
ajax를 통해 서버 측 권한 값을 읽고 다음과 같은 데이터를 반환합니다.
{tbar1: false, tbar2: true}
그런 다음 extjs에서:
var vResult = eval ('(' ajaxText ')'); //Get {tbar1: false, tbar2: true}
<action name="getJsonTags" class="jsonSystemAction" method="getJsonTags">
<result type="json">
<param name="root">tagMap</param>
</result>
</action>
로그인 후 복사
이런 방식으로 tbar에 값을 직접 할당할 수 있습니다
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 코드
getNodes(row,root,'root');
getNodes(row,root,'root');
로그인 후 복사
JSON 데이터의 정의.
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];
}로그인 후 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
