jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案

这篇文章主要介绍了 jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案，非常不错，需要的朋友参考下

前端页面功能模块化拆分

当一个系统的功能很多时，不可能所有功能模块的页面都写在一个页面里面，这时就需要将不同功能模块的页面拆分出去，就像模板一样，需要哪块的功能就调用哪块的页面，然后加载相应数据并展示到相应的页面。

本应用的使用spring+struts+mybatis+jsp的方式，用两种方案来完成前端页面功能的拆分。

方案一：

在JSP页面中，利用EL表达式或者Java代码的方式，在后台完成页面数据的填充。然后在js中来完成页面的切换。

jsp代码：

业务详情模块页面：riskDetailItem.jsp页面代码使用EL表达式完成数据填充。

    客户名称 ${loanRiskBean.cusName} 贷款金额 ${loanRiskBean.dueBillAmount} 元

struts的xml文件代码：

伦理片

  /WEB-INF/jsp/riskrecheck/riskDetailItem.jsp

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元素。这时，就需要先加载jsp页面，例如可以在struts处进行一个页面的跳转，而不需要向后台发起请求。也就是说需要向后台发起两次请求，第一次请求是加载相应的功能模块页面，第二次请求是向后台请求数据，然后填充到第一次请求的页面中，并展示出来。

jsp代码：都是静态代码

   经营名称不一致
   客户名称 借据金额

struts中的xml文件：

   /WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp

或者是：

 不用再Action处写相应的方法，struts就负责了跳转。  /WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp

Action中的代码：

 /** * 根据loanid查询相关组成员信息 */ public void relatedItem(){ List 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(""+tmpArray[i].cusName+"" +tmpArray[i].duebillNo+""); $(".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实现前端页面功能模块化拆分的方案的详细内容，更多请关注0133技术站其它相关文章！