设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

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

2017-3-7 12:51| 发布者: zhangjf| 查看: 1554| 评论: 0

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

前端页面功能模块化拆分

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

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

方案一：

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

jsp代码：

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

  2. <div class="col-12 b-b">
  3. <table class="table table-form" style="font-size: 14px;">
  4. <tr>
  5. <td class="m_c" width="180px">客户名称 </td><td width="200px">${loanRiskBean.cusName}</td>
  6. <td class="m_l" width="180px">贷款金额 </td><td>${loanRiskBean.dueBillAmount} 元</td>
  7. </tr>
  8. </table>
  9. </div>
复制代码

struts的xml文件代码：

伦理片 http://www.dotdy.com/

  2. <action name="riskDetailItem" class="riskRecheckAction" method="detailItem">
  3. <result name="success">/WEB-INF/jsp/riskrecheck/riskDetailItem.jsp</result>
  4. </action>
复制代码

Action中的代码：

  2. private LoanRiskBean loanRiskBean;
  3. public String detailItem(){
  4. try{
  5. loanRiskBean = riskRecheckServiceImpl.detailItem(riskId);--调用service中的方法查询数据
  6. }catch(Exception e){
  7. e.printStackTrace();
  8. LoggerUtil.info("查看详情出现异常！------detailItem()");
  9. throw new RuntimeException("查看详情出现异常！");
  10. }
  11. return SUCCESS;
  12. }
  14. public void setLoanRiskBean(LoanRiskBean loanRiskBean) {
  15. this.loanRiskBean = loanRiskBean;
  16. }
复制代码

js中的代码：

  2. $(document).on('click','.related',function(){
  3. var loanid = $(this).attr("loanid");
  4. var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action";
  5. var url = "/hbpost/riskRecheck/riskRelatedItem.action?time="+new Date()+"&loanid=" + loanid;
  6. //声明详情查询方法
  7. var relatedInfo = function(){
  8. $.ajax({
  9. url:url,
  10. type:'get',
  11. dataType:'json',
  12. success:function(data){
  13. }
  14. })
  15. }
  16. //请求加载相关组成员信息页面，并展示在dialog中
  17. $.ajax({
  18. url:urlSwitch,
  19. type:"get",
  20. success:function(data){
  21. relatedInfo();//调用详情查询方法
  22. relatedDialog=$dialog({
  23. id:'relatedDialog',
  24. width:1000,
  25. title:"相关信息",
  26. cancelValue:'关闭',
  27. content:data,
  28. onshow:function(){
  29. $(".artui-dialog").css("max-height","450px");
  30. $(".artui-dialog").css("min-height","300px");
  31. $(".artui-popup").css("left","330px");
  32. $(".artui-popup").css("top","130px");
  33. }
  34. }).showModal();
  35. }
  36. })
  37. })
复制代码

第二种方案：

在相应功能模块的JSP页面中，只是静态代码，需要在js中进行数据的填充，但是因为相应的jsp功能模块页面还没有加载(尽管可以在功能模块jsp页面引入相应的js，或者利用sea.js来加载js文件，但是本质是html或者jsp页面加载时才会加载相应的js文件)，所以不能在js中领用jQuery来获取页面的dom元素。这时，就需要先加载jsp页面，例如可以在struts处进行一个页面的跳转，而不需要向后台发起请求。也就是说需要向后台发起两次请求，第一次请求是加载相应的功能模块页面，第二次请求是向后台请求数据，然后填充到第一次请求的页面中，并展示出来。

jsp代码：都是静态代码

  2. <div class="relatedInfo mainBusiness" style="overflow:auto;width:100%;*+width:1000px;">
  3. <div style="width:1300px;padding-left:20px;padding-right:20px;">
  4. <h5>经营名称不一致</h5>
  5. <table class="grid table table-striped addtable">
  6. <thead>
  7. <tr>
  8. <th style="width:35px;">客户名称</th>
  9. <th style="width:40px;">借据金额</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. </tbody>
  14. </table>
  15. </div>
  16. </div>
复制代码

struts中的xml文件：

  2. <action name="riskRelatedItem" class="riskRecheckAction" method="relatedItem">
  3. </action>
  4. <!-- 跳转到相关组页面 -->
  5. <action name="riskRelatedItemSwitch" class="riskRecheckAction" method="relatedItemSwitch">
  6. <result name="success">/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>
  7. </action>
复制代码

或者是：

  2. <!-- 跳转到相关组页面 -->不用再Action处写相应的方法，struts就负责了跳转。
  3. <action name="riskRelatedItemSwitch" class="riskRecheckAction">
  4. <result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>
  5. </action>
复制代码

Action中的代码：

  2. /**
  3. * 根据loanid查询相关组成员信息
  4. */
  5. public void relatedItem(){
  6. List<LoanRiskBean> tmpRelatedList = null;
  7. try {
  8. tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid);
  9. this.outputStreamModelAndView(tmpRelatedList);
  10. } catch (Exception e) {
  11. e.printStackTrace();
  12. LoggerUtil.info("查看相关组成员信息出现异常！-----relatedItem()");
  13. throw new RuntimeException("查看相关组成员信息出现异常！");
  14. }
  15. }
  16. /**
  17. * 跳转到相关成员组页面
  18. * @return
  19. */
  20. public String relatedItemSwitch(){
  21. return SUCCESS;
  22. }
复制代码

js中的代码：

  2. /**
  3. * 贷后专项检查录入信息展示--客户信息【相关】组展示
  4. */
  5. $(document).on('click','.related',function(){
  6. var loanid = $(this).attr("loanid");
  7. var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action";
  8. var url = "/hbpost/riskRecheck/riskRelatedItem.action?time="+new Date()+"&loanid=" + loanid;
  9. //查询相关成员组信息，并循环判断append到页面
  10. var relatedInfo = function(){
  11. $.ajax({
  12. url:url,
  13. type:'get',
  14. dataType:'json',
  15. success:function(data){
  16. var tmpArray = data.object,,tipStr;
  17. for(var i = tmpArray.length-1; i >= 0; i--){
  18. tipStr = tmpArray[i].tipstr;
  19. if(tipStr == "住址相同"){
  20. $(".sameAddress tbody").append("<tr><td>"+tmpArray[i].cusName+"</td><td>"
  21. +tmpArray[i].duebillNo+"</td></tr>");
  22. $(".sameAddress").css("display","block");
  23. continue;
  24. }
  25. }
  26. }
  27. })
  28. }
  29. //请求加载相关组成员信息页面，并展示在dialog中
  30. $.ajax({
  31. url:urlSwitch,
  32. type:"get",
  33. success:function(data){
  34. relatedInfo();
  35. relatedDialog=$dialog({
  36. id:'relatedDialog',
  37. width:1000,
  38. title:"相关信息",
  39. cancelValue:'关闭',
  40. content:data,
  41. onshow:function(){
  42. $(".artui-dialog").css("max-height","450px");
  43. $(".artui-dialog").css("min-height","300px");
  44. $(".artui-popup").css("left","330px");
  45. $(".artui-popup").css("top","130px");
  46. }
  47. }).showModal();
  48. }
  49. })
  50. })
复制代码

以上所述是小编给大家介绍的jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持！

收藏 邀请
上一篇：Spring4.0 MVC请求json数据报406错误的解决方法下一篇：java中实体类转Json的2种方法

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-5-4 02:12

Copyright 2015-2025 djqfx

返回顶部