欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-09 08:19:53
前端页面功能模块化拆分 当一个系统的功能很多时,不可能所有功能模块的页面都写在一个页面里面,这时就需要将不同功能模块的页面拆分出去,就像模板一样,需要哪块的功能就调用哪块...

前端页面功能模块化拆分

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

本应用的使用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(); 
        } 
      }) 
   }) 

以上所述是小编给大家介绍的jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案,希望对大家有所帮助