Front-end page function modular split
When a system has many functions, it is impossible to write the pages of all function modules in one page. At this time, it is necessary to split the pages of different function modules, just like a template, which block is called for the function of which block is needed. , then load the corresponding data and display it to the corresponding page.
This application uses spring+struts+mybatis+jsp to complete the splitting of front-end page functions with two schemes.
Option One:
In the JSP page, the page data is filled in the background by using EL expression or java code. Then in js to complete the page switching.
jsp code:
Business details module page: The riskDetailItem.jsp page code uses EL expressions to complete data filling.
<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>
xml file code of struts:
<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 the method in service to query data
}catch(Exception e){
e.printStackTrace ();
LoggerUtil.info("An exception occurred when viewing details!------detailItem()");
throw new RuntimeException("An exception occurred when viewing details!");
}
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;
//declaration details query method
var relatedInfo = function(){
$.ajax({
url:url,
type:'get',
dataType:'json',
success:function(data){
}
})
}
//Request to load the relevant group member information page and display it in the dialog
$.ajax({
url:urlSwitch,
type:"get",
success:function(data){
relatedInfo();//Call the details query method
relatedDialog=$dialog({
id:'relatedDialog',
width:1000,
title:"Related Information",
cancelValue:'close',
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();
}
})
})
Second option:
In the JSP page of the corresponding function module, it is just static code, and data needs to be filled in js, but because the corresponding jsp function module page has not been loaded (although the corresponding js can be introduced in the function module jsp page, or use sea. js to load the js file, but the essence is that the corresponding js file will be loaded when the html or jsp page is loaded), so you cannot use jquery in js to get the dom element of the page. At this time, you need to load the jsp page first, for example, you can jump to a page at struts without making a request to the background. That is to say, two requests need to be made to the background. The first request is to load the corresponding function module page, and the second request is to request data from the background, and then fill in the page requested for the first time and display it.
jsp code: 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>Inconsistent business names</h5>
<table class="grid table table-striped addtable">
<thead>
<tr>
<th style="width:35px;">Customer name</th>
<th style="width:40px;">IOU Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
xml file in struts:
<action name="riskRelatedItem" class="riskRecheckAction" method="relatedItem">
</action>
<!-- Jump to the relevant group page-->
<action name="riskRelatedItemSwitch" class="riskRecheckAction" method="relatedItemSwitch">
<result name="success">/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>
</action>
or:
<!-- Jump to the relevant group page--> No need to write the corresponding method at the Action, struts is responsible for the jump.
<action name="riskRelatedItemSwitch" class="riskRecheckAction">
<result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>
</action>
Code in Action:
/**
* Query related group member information according to loanid
*/
public void relatedItem(){
List<LoanRiskBean> tmpRelatedList = null;
try {
tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid);
this.outputStreamModelAndView(tmpRelatedList);
} catch (Exception e) {
e.printStackTrace ();
LoggerUtil.info("There is an exception when viewing related group member information!-----relatedItem()");
throw new RuntimeException("An exception occurred when viewing the relevant group member information!");
}
}
/**
* Jump to the relevant member group page
* @return
*/
public String relatedItemSwitch(){
return SUCCESS;
}
code in js:
/**
* Post-loan special inspection 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 to 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 == "same address"){
$(".sameAddress tbody").append("<tr><td>"+tmpArray[i].cusName+"</td><td>"
+tmpArray[i].duebillNo+"</td></tr>");
$(".sameAddress").css("display","block");
continue;
}
}
}
})
}
//Request to load the relevant group member information page and display it in the dialog
$.ajax({
url:urlSwitch,
type:"get",
success:function(data){
relatedInfo();
relatedDialog=$dialog({
id:'relatedDialog',
width:1000,
title:"Related Information",
cancelValue:'close',
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();
}
})
})