jsp、struts、spring、mybatis实现前端页面功能模块化拆分

前端页面功能模块化拆分

当一个系统的功能很多时，不可能所有功能模块的页面都写在一个页面里面，这时就需要将不同功能模块的页面拆分出去，就像模板一样，需要哪块的功能就调用哪块的页面，然后加载相应数据并展示到相应的页面。

本应用的使用spring+struts+mybatis+jsp的方式，用两种方案来完成前端页面功能的拆分。

方案一：

在JSP页面中，利用EL表达式或者java代码的方式，在后台完成页面数据的填充。然后在js中来完成页面的切换。

jsp代码：

业务详情模块页面：riskDetailItem.jsp页面代码使用EL表达式完成数据填充。

 

Html代码  

1. <div class="col-12 b-b">  
2.     <table class="table table-form" style="font-size: 14px;">  
3.        <tr>  
4.             <td class="m_c" width="180px">客户名称 </td><td width="200px">${loanRiskBean.cusName}</td>  
5.             <td class="m_l" width="180px">贷款金额 </td><td>${loanRiskBean.dueBillAmount} 元</td>  
6.         </tr>  
7.      </table>  
8. </div>  

 struts的xml文件代码：

 伦理片 http://www.dotdy.com/  

 

Xml代码  

1. <action name="riskDetailItem" class="riskRecheckAction" method="detailItem">   
2.     <result name="success">/WEB-INF/jsp/riskrecheck/riskDetailItem.jsp</result>  
3. </action>  

 Action中的代码：

 

 

Java代码  

1. private LoanRiskBean loanRiskBean;  
2. public String detailItem(){  
3.         try{  
4.             loanRiskBean = riskRecheckServiceImpl.detailItem(riskId);--调用service中的方法查询数据  
5.         }catch(Exception e){  
6.             e.printStackTrace();  
7.             LoggerUtil.info("查看详情出现异常！------detailItem()");  
8.             throw new RuntimeException("查看详情出现异常！");  
9.         }  
10.         return SUCCESS;  
11.     }  
12.   
13. public void setLoanRiskBean(LoanRiskBean loanRiskBean) {  
14.         this.loanRiskBean = loanRiskBean;  
15.     }  

 js中的代码：

 

 

Js代码  

1. $(document).on('click','.related',function(){  
2.             var loanid = $(this).attr("loanid");  
3.             var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action";  
4.             var url = "/hbpost/riskRecheck/riskRelatedItem.action?time="+new Date()+"&loanid=" + loanid;  
5.             //声明详情查询方法  
6.             var relatedInfo = function(){  
7.                 $.ajax({  
8.                 url:url,  
9.                 type:'get',  
10.                 dataType:'json',  
11.                 success:function(data){  
12.           
13.                 }  
14.             })  
15.         }  
16.             //请求加载相关组成员信息页面，并展示在dialog中  
17.             $.ajax({  
18.                 url:urlSwitch,          
19.                 type:"get",  
20.                 success:function(data){  
21.                     relatedInfo();//调用详情查询方法  
22.                     relatedDialog=$dialog({  
23.                         id:'relatedDialog',  
24.                         width:1000,  
25.                         title:"相关信息",  
26.                         cancelValue:'关闭',  
27.                         content:data,  
28.                         onshow:function(){  
29.                             $(".artui-dialog").css("max-height","450px");  
30.                             $(".artui-dialog").css("min-height","300px");  
31.                             $(".artui-popup").css("left","330px");  
32.                             $(".artui-popup").css("top","130px");  
33.                         }  
34.                     }).showModal();  
35.                 }  
36.             })  
37.       })  

 第二种方案：

 

在相应功能模块的JSP页面中，只是静态代码，需要在js中进行数据的填充，但是因为相应的jsp功能模块页面还没有加载(尽管可以在功能模块jsp页面引入相应的js，或者利用sea.js来加载js文件，但是本质是html或者jsp页面加载时才会加载相应的js文件)，所以不能在js中领用jquery来获取页面的dom元素。这时，就需要先加载jsp页面，例如可以在struts处进行一个页面的跳转，而不需要向后台发起请求。也就是说需要向后台发起两次请求，第一次请求是加载相应的功能模块页面，第二次请求是向后台请求数据，然后填充到第一次请求的页面中，并展示出来。

jsp代码：都是静态代码

 

Html代码  

1. <div class="relatedInfo mainBusiness" style="overflow:auto;width:100%;*+width:1000px;">  
2.     <div style="width:1300px;padding-left:20px;padding-right:20px;">  
3.         <h5>经营名称不一致</h5>  
4.                 <table class="grid table table-striped addtable">  
5.                     <thead>  
6.                         <tr>  
7.                             <th style="width:35px;">客户名称</th>                             
8.                                     <th style="width:40px;">借据金额</th>                            
9.                         </tr>  
10.                     </thead>  
11.                     <tbody>  
12.             </tbody>  
13.               </table>  
14.       </div>  
15. </div>   

struts中的xml文件：

Xml代码  

1. <action name="riskRelatedItem" class="riskRecheckAction" method="relatedItem">  
2.    </action>  
3. <!-- 跳转到相关组页面 -->  
4. <action name="riskRelatedItemSwitch" class="riskRecheckAction" method="relatedItemSwitch">  
5.      <result name="success">/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>  
6. </action>  
7. 或者是：  
8. <!-- 跳转到相关组页面 -->不用再Action处写相应的方法，struts就负责了跳转。  
9. <action name="riskRelatedItemSwitch" class="riskRecheckAction">  
10.      <result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>  
11. </action>  

  Action中的代码：

Java代码  

1. /** 
2.  * 根据loanid查询相关组成员信息 
3.  */  
4. public void relatedItem(){  
5.     List<LoanRiskBean> tmpRelatedList = null;  
6.     try {  
7.         tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid);  
8.         this.outputStreamModelAndView(tmpRelatedList);  
9.     } catch (Exception e) {  
10.         e.printStackTrace();  
11.         LoggerUtil.info("查看相关组成员信息出现异常！-----relatedItem()");  
12.         throw new RuntimeException("查看相关组成员信息出现异常！");  
13.     }  
14. }  
15. /** 
16.  * 跳转到相关成员组页面 
17.  * @return 
18.  */  
19. public String relatedItemSwitch(){  
20.     return SUCCESS;  
21. }  

 js中的代码：

Js代码  

1. /** 
2.      * 贷后专项检查录入信息展示--客户信息【相关】组展示 
3.      */  
4.         $(document).on('click','.related',function(){  
5.             var loanid = $(this).attr("loanid");  
6.             var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action";  
7.             var url = "/hbpost/riskRecheck/riskRelatedItem.action?time="+new Date()+"&loanid=" + loanid;  
8.             //查询相关成员组信息，并循环判断append到页面  
9.             var relatedInfo = function(){  
10.                 $.ajax({  
11.                 url:url,  
12.                 type:'get',  
13.                 dataType:'json',  
14.                 success:function(data){  
15.                     var tmpArray = data.object,,tipStr;  
16.                     for(var i = tmpArray.length-1; i >= 0; i--){  
17.                         tipStr = tmpArray[i].tipstr;                                          
18.                         if(tipStr == "住址相同"){  
19.                             $(".sameAddress tbody").append("<tr><td>"+tmpArray[i].cusName+"</td><td>"  
20.                                     +tmpArray[i].duebillNo+"</td></tr>");  
21.                             $(".sameAddress").css("display","block");  
22.                             continue;  
23.                         }  
24.                     }  
25.                 }  
26.             })  
27.         }  
28.             //请求加载相关组成员信息页面，并展示在dialog中  
29.             $.ajax({  
30.                 url:urlSwitch,          
31.                 type:"get",  
32.                 success:function(data){  
33.                     relatedInfo();  
34.                     relatedDialog=$dialog({  
35.                         id:'relatedDialog',  
36.                         width:1000,  
37.                         title:"相关信息",  
38.                         cancelValue:'关闭',  
39.                         content:data,  
40.                         onshow:function(){  
41.                             $(".artui-dialog").css("max-height","450px");  
42.                             $(".artui-dialog").css("min-height","300px");  
43.                             $(".artui-popup").css("left","330px");  
44.                             $(".artui-popup").css("top","130px");  
45.                         }  
46.                     }).showModal();  
47.                 }  
48.             })  
49.       })