jsp、struts、spring、mybatis實(shí)現(xiàn)前端頁面功能模塊化拆分的方案
更新時(shí)間：2017年01月10日 14:08:16 作者：h254532699
這篇文章主要介紹了 jsp、struts、spring、mybatis實(shí)現(xiàn)前端頁面功能模塊化拆分的方案，非常不錯(cuò)，需要的朋友參考下
前端頁面功能模塊化拆分
當(dāng)一個(gè)系統(tǒng)的功能很多時(shí)，不可能所有功能模塊的頁面都寫在一個(gè)頁面里面，這時(shí)就需要將不同功能模塊的頁面拆分出去，就像模板一樣，需要哪塊的功能就調(diào)用哪塊的頁面，然后加載相應(yīng)數(shù)據(jù)并展示到相應(yīng)的頁面。
本應(yīng)用的使用spring+struts+mybatis+jsp的方式，用兩種方案來完成前端頁面功能的拆分。
方案一：
在JSP頁面中，利用EL表達(dá)式或者Java代碼的方式，在后臺(tái)完成頁面數(shù)據(jù)的填充。然后在js中來完成頁面的切換。
jsp代碼：
業(yè)務(wù)詳情模塊頁面：riskDetailItem.jsp頁面代碼使用EL表達(dá)式完成數(shù)據(jù)填充。
<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文件代碼：
<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);--調(diào)用service中的方法查詢數(shù)據(jù)
}catch(Exception e){
e.printStackTrace();
LoggerUtil.info("查看詳情出現(xiàn)異常！------detailItem()");
throw new RuntimeException("查看詳情出現(xiàn)異常！");
}
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){
}
})
}
//請(qǐng)求加載相關(guān)組成員信息頁面，并展示在dialog中
$.ajax({
url:urlSwitch,
type:"get",
success:function(data){
relatedInfo();//調(diào)用詳情查詢方法
relatedDialog=$dialog({
id:'relatedDialog',
width:1000,
title:"相關(guān)信息",
cancelValue:'關(guān)閉',
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();
}
})
})
第二種方案：
在相應(yīng)功能模塊的JSP頁面中，只是靜態(tài)代碼，需要在js中進(jìn)行數(shù)據(jù)的填充，但是因?yàn)橄鄳?yīng)的jsp功能模塊頁面還沒有加載(盡管可以在功能模塊jsp頁面引入相應(yīng)的js，或者利用sea.js來加載js文件，但是本質(zhì)是html或者jsp頁面加載時(shí)才會(huì)加載相應(yīng)的js文件)，所以不能在js中領(lǐng)用jQuery來獲取頁面的dom元素。這時(shí)，就需要先加載jsp頁面，例如可以在struts處進(jìn)行一個(gè)頁面的跳轉(zhuǎn)，而不需要向后臺(tái)發(fā)起請(qǐng)求。也就是說需要向后臺(tái)發(fā)起兩次請(qǐng)求，第一次請(qǐng)求是加載相應(yīng)的功能模塊頁面，第二次請(qǐng)求是向后臺(tái)請(qǐng)求數(shù)據(jù)，然后填充到第一次請(qǐng)求的頁面中，并展示出來。
jsp代碼：都是靜態(tài)代碼
<div class="relatedInfo mainBusiness" style="overflow:auto;width:100%;*+width:1000px;">
<div style="width:1300px;padding-left:20px;padding-right:20px;">
<h5>經(jīng)營(yíng)名稱不一致</h5>
<table class="grid table table-striped addtable">
<thead>
<tr>
<th style="width:35px;">客戶名稱</th>
<th style="width:40px;">借據(jù)金額</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
struts中的xml文件：
<action name="riskRelatedItem" class="riskRecheckAction" method="relatedItem"> </action> <!-- 跳轉(zhuǎn)到相關(guān)組頁面 --> <action name="riskRelatedItemSwitch" class="riskRecheckAction" method="relatedItemSwitch"> <result name="success">/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> </action>
或者是：
<!-- 跳轉(zhuǎn)到相關(guān)組頁面 -->不用再Action處寫相應(yīng)的方法，struts就負(fù)責(zé)了跳轉(zhuǎn)。 <action name="riskRelatedItemSwitch" class="riskRecheckAction"> <result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> </action>
Action中的代碼：
/**
* 根據(jù)loanid查詢相關(guān)組成員信息
*/
public void relatedItem(){
List<LoanRiskBean> tmpRelatedList = null;
try {
tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid);
this.outputStreamModelAndView(tmpRelatedList);
} catch (Exception e) {
e.printStackTrace();
LoggerUtil.info("查看相關(guān)組成員信息出現(xiàn)異常！-----relatedItem()");
throw new RuntimeException("查看相關(guān)組成員信息出現(xiàn)異常！");
}
}
/**
* 跳轉(zhuǎn)到相關(guān)成員組頁面
* @return
*/
public String relatedItemSwitch(){
return SUCCESS;
}
js中的代碼：
/**
* 貸后專項(xiàng)檢查錄入信息展示--客戶信息【相關(guān)】組展示
*/
$(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;
//查詢相關(guān)成員組信息，并循環(huán)判斷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;
}
}
}
})
}
//請(qǐng)求加載相關(guān)組成員信息頁面，并展示在dialog中
$.ajax({
url:urlSwitch,
type:"get",
success:function(data){
relatedInfo();
relatedDialog=$dialog({
id:'relatedDialog',
width:1000,
title:"相關(guān)信息",
cancelValue:'關(guān)閉',
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實(shí)現(xiàn)前端頁面功能模塊化拆分的方案，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- javascript模塊化是什么及其優(yōu)缺點(diǎn)介紹
- 詳解Js中的模塊化是如何實(shí)現(xiàn)的
- Javascript模塊化編程詳解
- Javascript模塊化編程(三)require.js的用法及功能介紹
- JavaScript的模塊化:封裝(閉包),繼承(原型) 介紹
- Javascript模塊化編程(一)模塊的寫法最佳實(shí)踐
- 詳解JavaScript模塊化開發(fā)
- Javascript模塊化編程(一)AMD規(guī)范(規(guī)范使用模塊)
- JavaScript模塊化之使用requireJS按需加載
- 關(guān)于Javascript模塊化和命名空間管理的問題說明
- JS前端模塊化原理與實(shí)現(xiàn)方法詳解
相關(guān)文章
SpringBoot實(shí)現(xiàn)發(fā)送郵件任務(wù)
這篇文章主要為大家詳細(xì)介紹了SpringBoot實(shí)現(xiàn)發(fā)送郵件任務(wù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
下面小編就為大家?guī)硪黄赟tring變量的兩種創(chuàng)建方式(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Spring boot 跳轉(zhuǎn)到j(luò)sp頁面的實(shí)現(xiàn)方法
本篇文章主要介紹了Spring boot 跳轉(zhuǎn)到j(luò)sp頁面的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
java web實(shí)現(xiàn)簡(jiǎn)易收費(fèi)站
這篇文章主要為大家詳細(xì)介紹了java web實(shí)現(xiàn)簡(jiǎn)易收費(fèi)站，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2020-11-11
springcloud如何使用Feign后臺(tái)內(nèi)部傳遞MultipartFile
這篇文章主要介紹了springcloud如何使用Feign后臺(tái)內(nèi)部傳遞MultipartFile，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了解決jpa查詢語句自動(dòng)變成了update的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-08-08
Springboot使用maven打包指定mainClass問題
這篇文章主要介紹了Springboot使用maven打包指定mainClass問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
利用MyBatis進(jìn)行不同條件的like模糊查詢的方法
這篇文章主要介紹了利用MyBatis進(jìn)行不同條件的like模糊查詢,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Java的內(nèi)部類與類的加載器,是Java入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2016-03-03
Java中BigDecimal的舍入模式解析(RoundingMode)
這篇文章主要介紹了Java中BigDecimal的舍入模式解析(RoundingMode)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06