Modular splitting of front-end page functions
When a system has many functions, it is impossible for all pages of functional modules to be written in one page. At this time, the pages of different functional modules need to be split out, just like a template. The pages of which function is needed will be called, and then the corresponding data will be loaded and displayed on the corresponding page.
This application uses spring+struts+mybatis+jsp to complete the splitting of front-end page functions using two solutions.
Plan 1:
In JSP pages, the page data is filled in the background using EL expressions or Java code. Then complete the page switching in js.
jsp code:
Business Details Module Page: riskDetailItem.jsp Page Code uses EL expressions to complete data filling.
<div> <table style="font-size: 14px;"> <tr> <td>Customer name</td><td>${loanRiskBean.cusName}</td> <td>Loan Amount</td><td>${loanRiskBean.dueBillAmount} Yuan</td> </tr> </table> </div>The xml file code of struts:
Ethical film http://www.dotdy.com/
<action name="riskDetailItem" 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 the service to query the data}catch(Exception e){ e.printStackTrace(); LoggerUtil.info("Exception occurred in view details!------detailItem()"); throw new RuntimeException("Exception occurred in view details!"); } return SUCCESS; } public void setLoanRiskBean(LoanRiskBean loanRiskBean) { this.loanRiskBean = loanRiskBean; } Code in js:
$(document).on('click','.related',function(){ var loan = $(this).attr("loanid"); var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action"; var url = "/hbpost/riskRecheck/riskRelatedItem.action?time="+new Date()+"&loanid=" + loanid; //Declare the 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(){ $(".arui-dialog").css("max-height","450px"); $(".arui-dialog").css("min-height","300px"); $(".arui-popup").css("left","330px"); $(".arui-popup").css("top","130px"); } }).showModal(); } }) }) The second solution:
In the JSP page of the corresponding functional module, it is only static code and requires data filling in js. However, because the corresponding jsp function module page has not been loaded yet (although you can introduce corresponding js on the functional module js page, or use sea.js to load the js file, but the essence is that the corresponding js file will be loaded only when the html or js page is loaded), you cannot use jQuery in js to obtain the dom element of the page. At this time, you need to load the jsp page first. For example, you can jump a page at struts without making a request to the background. That is to say, two requests need to be initiated to the background. The first request is to load the corresponding functional module page, and the second request is to request data from the background, and then fill it into the page of the first request and display it.
jsp code: all static code
<div style="overflow:auto;width:100%;*+width:1000px;"> <div> <h5>Inconsistent business name</h5> <table> <thead> <tr> <th>Customer name</th> <th>IOUT NOTICE Amount</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div>
The xml file in struts:
<action name="riskRelatedItem" method="relatedItem"> </action> <!-- Skip to the related group page--> <action name="riskRelatedItemSwitch" 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 in the Action, struts is responsible for the jump. <action name="riskRelatedItemSwitch"> <result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> </action>
Code in Action:
/** * Query relevant group member information based on loanid*/ public void relatedItem(){ List<LoanRiskBean> tmpRelatedList = null; try { tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid); this.outputStreamModelAndView(tmpRelatedList); } catch (Exception e) { e.printStackTrace(); LoggerUtil.info("Exception occurred when viewing related group member information! ------relatedItem()"); throw new RuntimeException("Exception occurred when viewing related group member information!"); } } /** * Jump to the relevant member group page* @return */ public String relatedItemSwitch(){ return SUCCESS; }Code in js:
/** * Post-loan special inspection entry information display--Customer information [Related] group display*/ $(document).on('click','.related',function(){ var loan = $(this).attr("loanid"); var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action"; var url = "/hbpost/riskRecheck/riskRelatedItem.action?time="+new Date()+"&loanid=" + loanid; //Query the relevant member group information and loop to judge the 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(){ $(".arui-dialog").css("max-height","450px"); $(".arui-dialog").css("min-height","300px"); $(".arui-popup").css("left","330px"); $(".arui-popup").css("top","130px"); } }).showModal(); } }) })The above is the solution to implement modular splitting of front-end page functions by jsp, struts, spring, and mybatis introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!