jsp,struts,spring,mybatis 전단 페이지 기능 모듈화 분할 방안
하나의 시스템의 기능이 많을 때 모든 기능 모듈의 페이지를 한 페이지에 쓸 수 없다. 이때 서로 다른 기능 모듈의 페이지를 분리해야 한다. 템플릿처럼 어떤 기능이 필요한 페이지를 호출한 다음에 해당하는 데이터를 불러와 해당하는 페이지로 보여야 한다.
이 응용 프로그램은spring+struts+mybatis+jsp를 사용하여 두 가지 방안으로 전단 페이지 기능의 분할을 완성합니다.
시나리오 1:
JSP 페이지에서 EL 표현식이나 Java 코드를 이용하여 백그라운드에서 페이지 데이터를 채웁니다.그리고 js에서 페이지 전환을 완성합니다.
jsp 코드:
비즈니스 상세 정보 모듈 페이지:riskDetailItem.jsp 페이지 코드는 EL 표현식으로 데이터를 채웁니다.
<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 파일 코드:윤리 영화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 요소를 가져올 수 없다.이 때, 예를 들어struts에서 한 페이지를 돌릴 수 있고, 백엔드에 요청할 필요가 없습니다.즉, 백그라운드에 두 번의 요청을 해야 한다. 첫 번째 요청은 해당하는 기능 모듈 페이지를 불러오는 것이고, 두 번째 요청은 백그라운드에 데이터를 요청한 다음에 첫 번째 요청 페이지에 채워서 보여주는 것이다.
jsp 코드: 모두 정적 코드입니다.
<div class="relatedInfo mainBusiness" style="overflow:auto;width:100%;*+width:1000px;">
<div style="width:1300px;padding-left:20px;padding-right:20px;">
<h5> </h5>
<table class="grid table table-striped addtable">
<thead>
<tr>
<th style="width:35px;"> </th>
<th style="width:40px;"> </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가 전단 페이지 기능의 모듈화 분할을 실현하는 방안입니다. 여러분께 도움이 되었으면 합니다. 만약에 궁금한 점이 있으면 저에게 메시지를 남겨 주시면 편집자는 제때에 답장을 드리겠습니다.여기에서도 저희 사이트에 대한 지지에 감사드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript 모듈화 이해 방법JavaScript 모듈을 사용하는 것은 import와 export에 의존합니다. import와 export의 브라우저 지원 정도는 최신 브라우저 버전이 모두 지원되지만 IE와 이전 버전의 브라우저는 지원되지 않기 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.