前端頁面功能模塊化拆分
當一個系統的功能很多時，不可能所有功能模塊的頁面都寫在一個頁面裡面，這時就需要將不同功能模塊的頁面拆分出去，就像模板一樣，需要哪塊的功能就調用哪塊的頁面，然後加載相應數據並展示到相應的頁面。
本應用的使用spring+struts+mybatis+jsp的方式，用兩種方案來完成前端頁面功能的拆分。
方案一：
在JSP頁面中，利用EL表達式或者Java代碼的方式，在後台完成頁面數據的填充。然後在js中來完成頁面的切換。
jsp代碼：
業務詳情模塊頁面：riskDetailItem.jsp頁面代碼使用EL表達式完成數據填充。
<div> <table style="font-size: 14px;"> <tr> <td>客戶名稱</td><td>${loanRiskBean.cusName}</td> <td>貸款金額</td><td>${loanRiskBean.dueBillAmount} 元</td> </tr> </table> </div>struts的xml文件代碼：
倫理片http://www.dotdy.com/
<action name="riskDetailItem" method="detailItem"> <result name="success">/WEB-INF/jsp/riskrecheck/riskDetailItem.jsp</result> </action>
Action中的代碼：
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中的代碼：
$(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代碼：都是靜態代碼
<div style="overflow:auto;width:100%;*+width:1000px;"> <div> <h5>經營名稱不一致</h5> <table> <thead> <tr> <th>客戶名稱</th> <th>借據金額</th> </tr> </thead> <tbody> </tbody> </table> </div> </div>
struts中的xml文件：
<action name="riskRelatedItem" method="relatedItem"> </action> <!-- 跳轉到相關組頁面--> <action name="riskRelatedItemSwitch" method="relatedItemSwitch"> <result name="success">/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> </action>
或者是：
<!-- 跳轉到相關組頁面-->不用再Action處寫相應的方法，struts就負責了跳轉。 <action name="riskRelatedItemSwitch"> <result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> </action>
Action中的代碼：
/** * 根據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中的代碼：
/** * 貸後專項檢查錄入信息展示--客戶信息【相關】組展示*/ $(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實現前端頁面功能模塊化拆分的方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！