jsp、struts、spring、mybatis实现前端页面功能模块化拆分
来源:互联网 发布:mac 菜单 快捷键 编辑:程序博客网 时间:2024/04/27 14:40
科技优家 2017-01-03 08:25
前端页面功能模块化拆分
当一个系统的功能很多时,不可能所有功能模块的页面都写在一个页面里面,这时就需要将不同功能模块的页面拆分出去,就像模板一样,需要哪块的功能就调用哪块的页面,然后加载相应数据并展示到相应的页面。
本应用的使用spring+struts+mybatis+jsp的方式,用两种方案来完成前端页面功能的拆分。
方案一:
在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文件代码:
<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元素。这时,就需要先加载jsp页面,例如可以在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; } }) })
本文为头条号作者发布,不代表今日头条立场。
0 0
- jsp、struts、spring、mybatis实现前端页面功能模块化拆分
- jsp、struts、spring、mybatis实现前端页面功能模块化拆分
- JSP页面实现分页功能
- jsp页面实现打印功能
- spring-boot 添加JSP页面功能
- 前端页面实现语音播报功能
- Struts Spring 实现 JSP 读取数据库
- JSP页面实现播放视频功能
- android 实现拨打jsp页面电话功能
- jsp页面实现验证码功能
- Java JSP实现页面打印的功能
- jsp实现分页和页面跳转功能
- jsp页面实现验证码功能
- JSP页面查询及增丶删功能实现
- 在jsp页面使用ognl无法取到值(Struts,Spring,Hibernate)
- spring mvc +mybatis登录首页功能 实现
- SpringMVC Spring Mybatis Maven 实现登录功能
- MyBatis+SpringMVC+Spring 实现分页功能
- Android Studio 生成Release版,报Warning的解决办法
- 【hdu 1517】A Multiplication Game
- python 学习2:生成器,迭代器,装饰器
- NOSQL数据库浅谈(一):MemCache解读
- typedef用法(转载记录)
- jsp、struts、spring、mybatis实现前端页面功能模块化拆分
- Android中ImageLoader的用法
- Protocol buffer数据传递
- 平衡二叉树总结三:treap树(树堆)
- 解决json序列化有多对一和多对多关系的对象时造成死循环的问题
- Android之自定义view星星评价(可滑动)
- javascript中的this与函数讲解
- centos 7快捷方式建立
- 递归算法探索