jsp、struts、spring、mybatis完成前端頁面功用模塊化拆分的方案。本站提示廣大學習愛好者：（jsp、struts、spring、mybatis完成前端頁面功用模塊化拆分的方案）文章只能為提供參考，不一定能成為您想要的結果。以下是jsp、struts、spring、mybatis完成前端頁面功用模塊化拆分的方案正文
前端頁面功用模塊化拆分
當一個零碎的功用很多時，不能夠一切功用模塊的頁面都寫在一個頁面外面，這時就需求將不同功用模塊的頁面拆分出去，好像模板一樣，需求哪塊的功用就調用哪塊的頁面，然後加載相應數據並展現到相應的頁面。
本使用的運用spring+struts+mybatis+jsp的方式，用兩種方案來完成前端頁面功用的拆分。
方案一：
在JSP頁面中，應用EL表達式或許Java代碼的方式，在後台完成頁面數據的填充。然後在js中來完成頁面的切換。
jsp代碼：
業務概況模塊頁面：riskDetailItem.jsp頁面代碼運用EL表達式完成數據填充。
<div class="col-12 b-b">
<table class="table table-form" >
<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文件代碼：
倫理片 http://www.dotdy.com/
<action name="riskDetailItem" class="riskRecheckAction" 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 class="relatedInfo mainBusiness" >
<div >
<h5>運營稱號不分歧</h5>
<table class="grid table table-striped addtable">
<thead>
<tr>
<th >客戶稱號</th>
<th >借據金額</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
struts中的xml文件：
<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>
或許是：
<!-- 跳轉到相關組頁面 -->不必再Action處寫相應的辦法，struts就擔任了跳轉。 <action name="riskRelatedItemSwitch" class="riskRecheckAction"> <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完成前端頁面功用模塊化拆分的方案，希望對大家有所協助，假如大家有任何疑問請給我留言，會及時回復大家的。在此也十分感激大家對網站的支持！
