jsp struts spring mybatis realize the front end page function modular split scheme
- 2020-05-27 05:40:46
- OfStack
Front-end page features modular split
When a system has many functions, it is impossible to write all the pages of function modules in one page. Then, it is necessary to split out the pages of different function modules, just like template 1. The page of which function block is needed will be called, and then the corresponding data will be loaded and displayed to the corresponding page.
This application USES the method of spring+struts+mybatis+jsp to complete the split of front-end page functions with two schemes.
Plan 1:
In the JSP page, the page data is filled in the background by means of EL expression or Java code. Then switch between pages in js.
jsp code:
Business details module page: riskDetailItem.jsp page code USES EL expression to fill in the data.
<div class="col-12 b-b">
<table class="table table-form" style="font-size: 14px;">
<tr>
<td class="m_c" width="180px"> The customer name </td><td width="200px">${loanRiskBean.cusName}</td>
<td class="m_l" width="180px"> The loan amount </td><td>${loanRiskBean.dueBillAmount} yuan </td>
</tr>
</table>
</div> struts xml file code:
Ethical film http: / / www. dotdy. com /
<action name="riskDetailItem" class="riskRecheckAction" method="detailItem">
<result name="success">/WEB-INF/jsp/riskrecheck/riskDetailItem.jsp</result>
</action>
Code in Action:
private LoanRiskBean loanRiskBean;
public String detailItem(){
try{
loanRiskBean = riskRecheckServiceImpl.detailItem(riskId);-- call service The method in query data
}catch(Exception e){
e.printStackTrace();
LoggerUtil.info(" View details abnormal! ------detailItem()");
throw new RuntimeException(" View details abnormal! ");
}
return SUCCESS;
}
public void setLoanRiskBean(LoanRiskBean loanRiskBean) {
this.loanRiskBean = loanRiskBean;
}
Code in 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;
// Declare the details enquiry method
var relatedInfo = function(){
$.ajax({
url:url,
type:'get',
dataType:'json',
success:function(data){
}
})
}
// Request to load the related group member information page and display it in dialog In the
$.ajax({
url:urlSwitch,
type:"get",
success:function(data){
relatedInfo();// The details query method is called
relatedDialog=$dialog({
id:'relatedDialog',
width:1000,
title:" The relevant information ",
cancelValue:' Shut down ',
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();
}
})
})
Option 2:
In the corresponding function module of JSP page, just static code, need to fill in js data, but for the corresponding jsp function module page is not yet load (although it is possible to introduce the function module jsp page corresponding js, or using sea. js to load js file, but the essence is html or jsp when the page loads will load the corresponding js file). So you can't get the dom element of the page from js with jQuery. At this point, you need to load the jsp page first. For example, you can jump one page at struts without making a request to the background. That is to say, we need to make two requests to the background, the first request is to load the corresponding function module page, the second request is to request data from the background, and then fill the page of the first request and display it.
jsp code: it's all static code
<div class="relatedInfo mainBusiness" style="overflow:auto;width:100%;*+width:1000px;">
<div style="width:1300px;padding-left:20px;padding-right:20px;">
<h5> Business name no 1 to </h5>
<table class="grid table table-striped addtable">
<thead>
<tr>
<th style="width:35px;"> The customer name </th>
<th style="width:40px;"> Ious amount </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div> xml file in struts:
<action name="riskRelatedItem" class="riskRecheckAction" method="relatedItem">
</action>
<!-- Jump to the related groups page -->
<action name="riskRelatedItemSwitch" class="riskRecheckAction" method="relatedItemSwitch">
<result name="success">/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>
</action> Or:
<!-- Jump to the related groups page --> Don't have to Action Write down the corresponding method, struts I'm responsible for the jump.
<action name="riskRelatedItemSwitch" class="riskRecheckAction">
<result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>
</action> Code in Action:
/**
* According to the loanid Query related group member information
*/
public void relatedItem(){
List<LoanRiskBean> tmpRelatedList = null;
try {
tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid);
this.outputStreamModelAndView(tmpRelatedList);
} catch (Exception e) {
e.printStackTrace();
LoggerUtil.info(" Check the related group member information abnormal! -----relatedItem()");
throw new RuntimeException(" Check the related group member information abnormal! ");
}
}
/**
* Jump to the relevant member group page
* @return
*/
public String relatedItemSwitch(){
return SUCCESS;
}Code in js:
/**
* Special post-loan inspection and input information display -- Customer information [related] group display
*/
$(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;
// Query related member group information and loop judgment append To the page
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 == " Address is the same "){
$(".sameAddress tbody").append("<tr><td>"+tmpArray[i].cusName+"</td><td>"
+tmpArray[i].duebillNo+"</td></tr>");
$(".sameAddress").css("display","block");
continue;
}
}
}
})
}
// Request to load the related group member information page and display it in dialog In the
$.ajax({
url:urlSwitch,
type:"get",
success:function(data){
relatedInfo();
relatedDialog=$dialog({
id:'relatedDialog',
width:1000,
title:" The relevant information ",
cancelValue:' Shut down ',
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();
}
})
})