服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Java教程 - jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案

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

2020-07-24 14:05h254532699 Java教程

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

前端页面功能模块化拆分

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

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

方案一:

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

jsp代码:

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

?
1
2
3
4
5
6
7
8
<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文件代码:

?
1
2
3
<action name="riskDetailItem" class="riskRecheckAction" method="detailItem"
  <result name="success">/WEB-INF/jsp/riskrecheck/riskDetailItem.jsp</result>
</action>

 Action中的代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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中的代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(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代码:都是静态代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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文件:

?
1
2
3
4
5
6
<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>

或者是: 

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

  Action中的代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 根据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中的代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/**
   * 贷后专项检查录入信息展示--客户信息【相关】组展示
   */
    $(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();
        }
      })
   })

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

原文链接:http://blog.csdn.net/h254532699/article/details/54312941

延伸 · 阅读

精彩推荐