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){
}
})
}
//請求加載相關(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ā)起請求。也就是說需要向后臺(tái)發(fā)起兩次請求，第一次請求是加載相應(yīng)的功能模塊頁面，第二次請求是向后臺(tái)請求數(shù)據(jù)，然后填充到第一次請求的頁面中，并展示出來。
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)營名稱不一致</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;
}
}
}
})
}
//請求加載相關(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)前端頁面功能模塊化拆分的方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(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)文章
這篇文章主要介紹了java之項(xiàng)目運(yùn)維手冊，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
優(yōu)化SpringBoot程序啟動(dòng)速度的實(shí)現(xiàn)
本文主要介紹了優(yōu)化SpringBoot程序啟動(dòng)速度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
找出鏈表倒數(shù)第n個(gè)節(jié)點(diǎn)元素的二個(gè)方法
本文提供了找出鏈表倒數(shù)第n個(gè)節(jié)點(diǎn)元素的二個(gè)方法，其中一個(gè)方法是JAVA代碼實(shí)現(xiàn)2013-11-11
Class對象是反射的核心,通過他可以調(diào)用類的任意方法,下面這篇文章主要給大家介紹了關(guān)于Java中獲取Class對象的3種方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Mybatis?selectKey 如何返回新增用戶的id值
這篇文章主要介紹了Mybatis?selectKey 如何返回新增用戶的id值，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
spring?bean標(biāo)簽中的init-method和destroy-method詳解
這篇文章主要介紹了spring?bean標(biāo)簽中的init-method和destroy-method,在很多項(xiàng)目中，經(jīng)常在xml配置文件中看到init-method 或者 destroy-method ，因此整理收集下，方便以后參考和學(xué)習(xí)，需要的朋友可以參考下2023-04-04
Java根據(jù)控制臺(tái)實(shí)現(xiàn)定位異常
這篇文章主要介紹了Java根據(jù)控制臺(tái)定位異常,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
工廠類的目的是將對象的創(chuàng)建邏輯封裝在一個(gè)類中,以便客戶端代碼無需了解具體的實(shí)現(xiàn)細(xì)節(jié),本文主要介紹了MyBatis工廠類封裝與簡化實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
下面小編就為大家?guī)硪黄猨ava處理按鈕點(diǎn)擊事件的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
詳解Springboot-MyBatis配置-配置端口號與服務(wù)路徑(idea社區(qū)版2023.1.4+apache-mav
這篇文章主要介紹了Springboot-MyBatis配置-配置端口號與服務(wù)路徑(idea社區(qū)版2023.1.4+apache-maven-3.9.3-bin),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07