前端页面功能模块化拆分
当一个系统的功能很多时,不可能所有功能模块的页面都写在一个页面里面,这时就需要将不同功能模块的页面拆分出去,就像模板一样,需要哪块的功能就调用哪块的页面,然后加载相应数据并展示到相应的页面。
本应用的使用spring+struts+mybatis+jsp的方式,用两种方案来完成前端页面功能的拆分。
方案一:
在JSP页面中,利用EL表达式或者Java代码的方式,在后台完成页面数据的填充。然后在js中来完成页面的切换。
jsp代码:
业务详情模块页面:riskDetailItem.jsp页面代码使用EL表达式完成数据填充。
1
2
3
4
5
6
7
8
|
<div class = "col-12 b-b" > <table class = "table table-form" style= "font-size: 14px;" > <tr> <td class = "m_c" width= "180px" >客户名称 </td><td width= "200px" >${loanRiskBean.cusName}</td> <td class = "m_l" width= "180px" >贷款金额 </td><td>${loanRiskBean.dueBillAmount} 元</td> </tr> </table> </div> |
struts的xml文件代码:
1
2
3
|
<action name= "riskDetailItem" class = "riskRecheckAction" method= "detailItem" > <result name= "success" >/WEB-INF/jsp/riskrecheck/riskDetailItem.jsp</result> </action> |
Action中的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
private LoanRiskBean loanRiskBean; public String detailItem(){ try { loanRiskBean = riskRecheckServiceImpl.detailItem(riskId);--调用service中的方法查询数据 } catch (Exception e){ e.printStackTrace(); LoggerUtil.info( "查看详情出现异常!------detailItem()" ); throw new RuntimeException( "查看详情出现异常!" ); } return SUCCESS; } public void setLoanRiskBean(LoanRiskBean loanRiskBean) { this .loanRiskBean = loanRiskBean; } |
js中的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
$(document).on( 'click' , '.related' ,function(){ var loanid = $( this ).attr( "loanid" ); var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action" ; var url = "/hbpost/riskRecheck/riskRelatedItem.action?time=" + new Date()+ "&loanid=" + loanid; //声明详情查询方法 var relatedInfo = function(){ $.ajax({ url:url, type: 'get' , dataType: 'json' , success:function(data){ } }) } //请求加载相关组成员信息页面,并展示在dialog中 $.ajax({ url:urlSwitch, type: "get" , success:function(data){ relatedInfo(); //调用详情查询方法 relatedDialog=$dialog({ id: 'relatedDialog' , width: 1000 , title: "相关信息" , cancelValue: '关闭' , content:data, onshow:function(){ $( ".artui-dialog" ).css( "max-height" , "450px" ); $( ".artui-dialog" ).css( "min-height" , "300px" ); $( ".artui-popup" ).css( "left" , "330px" ); $( ".artui-popup" ).css( "top" , "130px" ); } }).showModal(); } }) }) |
第二种方案:
在相应功能模块的JSP页面中,只是静态代码,需要在js中进行数据的填充,但是因为相应的jsp功能模块页面还没有加载(尽管可以在功能模块jsp页面引入相应的js,或者利用sea.js来加载js文件,但是本质是html或者jsp页面加载时才会加载相应的js文件),所以不能在js中领用jQuery来获取页面的dom元素。这时,就需要先加载jsp页面,例如可以在struts处进行一个页面的跳转,而不需要向后台发起请求。也就是说需要向后台发起两次请求,第一次请求是加载相应的功能模块页面,第二次请求是向后台请求数据,然后填充到第一次请求的页面中,并展示出来。
jsp代码:都是静态代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div class = "relatedInfo mainBusiness" style= "overflow:auto;width:100%;*+width:1000px;" > <div style= "width:1300px;padding-left:20px;padding-right:20px;" > <h5>经营名称不一致</h5> <table class = "grid table table-striped addtable" > <thead> <tr> <th style= "width:35px;" >客户名称</th> <th style= "width:40px;" >借据金额</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> |
struts中的xml文件:
1
2
3
4
5
6
|
<action name= "riskRelatedItem" class = "riskRecheckAction" method= "relatedItem" > </action> <!-- 跳转到相关组页面 --> <action name= "riskRelatedItemSwitch" class = "riskRecheckAction" method= "relatedItemSwitch" > <result name= "success" >/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> </action> |
或者是:
1
2
3
4
|
<!-- 跳转到相关组页面 -->不用再Action处写相应的方法,struts就负责了跳转。 <action name= "riskRelatedItemSwitch" class = "riskRecheckAction" > <result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> </action> |
Action中的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/** * 根据loanid查询相关组成员信息 */ public void relatedItem(){ List<LoanRiskBean> tmpRelatedList = null ; try { tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid); this .outputStreamModelAndView(tmpRelatedList); } catch (Exception e) { e.printStackTrace(); LoggerUtil.info( "查看相关组成员信息出现异常!-----relatedItem()" ); throw new RuntimeException( "查看相关组成员信息出现异常!" ); } } /** * 跳转到相关成员组页面 * @return */ public String relatedItemSwitch(){ return SUCCESS; } |
js中的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
/** * 贷后专项检查录入信息展示--客户信息【相关】组展示 */ $(document).on( 'click' , '.related' ,function(){ var loanid = $( this ).attr( "loanid" ); var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action" ; var url = "/hbpost/riskRecheck/riskRelatedItem.action?time=" + new Date()+ "&loanid=" + loanid; //查询相关成员组信息,并循环判断append到页面 var relatedInfo = function(){ $.ajax({ url:url, type: 'get' , dataType: 'json' , success:function(data){ var tmpArray = data.object,,tipStr; for (var i = tmpArray.length- 1 ; i >= 0 ; i--){ tipStr = tmpArray[i].tipstr; if (tipStr == "住址相同" ){ $( ".sameAddress tbody" ).append( "<tr><td>" +tmpArray[i].cusName+ "</td><td>" +tmpArray[i].duebillNo+ "</td></tr>" ); $( ".sameAddress" ).css( "display" , "block" ); continue ; } } } }) } //请求加载相关组成员信息页面,并展示在dialog中 $.ajax({ url:urlSwitch, type: "get" , success:function(data){ relatedInfo(); relatedDialog=$dialog({ id: 'relatedDialog' , width: 1000 , title: "相关信息" , cancelValue: '关闭' , content:data, onshow:function(){ $( ".artui-dialog" ).css( "max-height" , "450px" ); $( ".artui-dialog" ).css( "min-height" , "300px" ); $( ".artui-popup" ).css( "left" , "330px" ); $( ".artui-popup" ).css( "top" , "130px" ); } }).showModal(); } }) }) |
以上所述是小编给大家介绍的jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!
原文链接:http://blog.csdn.net/h254532699/article/details/54312941