jsp、struts、spring、mybatis實(shí)現(xiàn)前端頁(yè)面功能模塊化拆分的方案

更新時(shí)間：2017年01月10日 14:08:16 作者：h254532699

這篇文章主要介紹了 jsp、struts、spring、mybatis實(shí)現(xiàn)前端頁(yè)面功能模塊化拆分的方案，非常不錯(cuò)，需要的朋友參考下

前端頁(yè)面功能模塊化拆分

當(dāng)一個(gè)系統(tǒng)的功能很多時(shí)，不可能所有功能模塊的頁(yè)面都寫(xiě)在一個(gè)頁(yè)面里面，這時(shí)就需要將不同功能模塊的頁(yè)面拆分出去，就像模板一樣，需要哪塊的功能就調(diào)用哪塊的頁(yè)面，然后加載相應(yīng)數(shù)據(jù)并展示到相應(yīng)的頁(yè)面。

本應(yīng)用的使用spring+struts+mybatis+jsp的方式，用兩種方案來(lái)完成前端頁(yè)面功能的拆分。

方案一：

在JSP頁(yè)面中，利用EL表達(dá)式或者Java代碼的方式，在后臺(tái)完成頁(yè)面數(shù)據(jù)的填充。然后在js中來(lái)完成頁(yè)面的切換。

jsp代碼：

業(yè)務(wù)詳情模塊頁(yè)面：riskDetailItem.jsp頁(yè)面代碼使用EL表達(dá)式完成數(shù)據(jù)填充。

<div class="col-12 b-b"> 
  <table class="table table-form" style="font-size: 14px;"> 
    <tr> 
      <td class="m_c" width="180px">客戶名稱(chēng) </td><td width="200px">${loanRiskBean.cusName}</td> 
      <td class="m_l" width="180px">貸款金額 </td><td>${loanRiskBean.dueBillAmount} 元</td> 
    </tr> 
   </table> 
</div>

struts的xml文件代碼：

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

<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);--調(diào)用service中的方法查詢(xún)數(shù)據(jù) 
    }catch(Exception e){ 
      e.printStackTrace(); 
      LoggerUtil.info("查看詳情出現(xiàn)異常！------detailItem()"); 
      throw new RuntimeException("查看詳情出現(xiàn)異常！"); 
    } 
    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; 
      //聲明詳情查詢(xún)方法 
      var relatedInfo = function(){ 
        $.ajax({ 
        url:url, 
        type:'get', 
        dataType:'json', 
        success:function(data){ 
        } 
      }) 
    } 
      //請(qǐng)求加載相關(guān)組成員信息頁(yè)面，并展示在dialog中 
      $.ajax({ 
        url:urlSwitch,     
        type:"get", 
        success:function(data){ 
          relatedInfo();//調(diào)用詳情查詢(xún)方法 
          relatedDialog=$dialog({ 
            id:'relatedDialog', 
            width:1000, 
            title:"相關(guān)信息", 
            cancelValue:'關(guān)閉', 
            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(); 
        } 
      }) 
   })

第二種方案：

在相應(yīng)功能模塊的JSP頁(yè)面中，只是靜態(tài)代碼，需要在js中進(jìn)行數(shù)據(jù)的填充，但是因?yàn)橄鄳?yīng)的jsp功能模塊頁(yè)面還沒(méi)有加載(盡管可以在功能模塊jsp頁(yè)面引入相應(yīng)的js，或者利用sea.js來(lái)加載js文件，但是本質(zhì)是html或者jsp頁(yè)面加載時(shí)才會(huì)加載相應(yīng)的js文件)，所以不能在js中領(lǐng)用jQuery來(lái)獲取頁(yè)面的dom元素。這時(shí)，就需要先加載jsp頁(yè)面，例如可以在struts處進(jìn)行一個(gè)頁(yè)面的跳轉(zhuǎn)，而不需要向后臺(tái)發(fā)起請(qǐng)求。也就是說(shuō)需要向后臺(tái)發(fā)起兩次請(qǐng)求，第一次請(qǐng)求是加載相應(yīng)的功能模塊頁(yè)面，第二次請(qǐng)求是向后臺(tái)請(qǐng)求數(shù)據(jù)，然后填充到第一次請(qǐng)求的頁(yè)面中，并展示出來(lái)。

jsp代碼：都是靜態(tài)代碼

<div class="relatedInfo mainBusiness" style="overflow:auto;width:100%;*+width:1000px;"> 
  <div style="width:1300px;padding-left:20px;padding-right:20px;"> 
    <h5>經(jīng)營(yíng)名稱(chēng)不一致</h5> 
        <table class="grid table table-striped addtable"> 
          <thead> 
            <tr> 
              <th style="width:35px;">客戶名稱(chēng)</th>               
                  <th style="width:40px;">借據(jù)金額</th>              
            </tr> 
          </thead> 
          <tbody> 
      </tbody> 
       </table> 
   </div> 
</div>

struts中的xml文件：

<action name="riskRelatedItem" class="riskRecheckAction" method="relatedItem"> 
  </action> 
<!-- 跳轉(zhuǎn)到相關(guān)組頁(yè)面 --> 
<action name="riskRelatedItemSwitch" class="riskRecheckAction" method="relatedItemSwitch"> 
   <result name="success">/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> 
</action>

或者是：

<!-- 跳轉(zhuǎn)到相關(guān)組頁(yè)面 -->不用再Action處寫(xiě)相應(yīng)的方法，struts就負(fù)責(zé)了跳轉(zhuǎn)。 
<action name="riskRelatedItemSwitch" class="riskRecheckAction"> 
   <result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result> 
</action>

Action中的代碼：

/** 
 * 根據(jù)loanid查詢(xún)相關(guān)組成員信息 
 */ 
public void relatedItem(){ 
  List<LoanRiskBean> tmpRelatedList = null; 
  try { 
    tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid); 
    this.outputStreamModelAndView(tmpRelatedList); 
  } catch (Exception e) { 
    e.printStackTrace(); 
    LoggerUtil.info("查看相關(guān)組成員信息出現(xiàn)異常！-----relatedItem()"); 
    throw new RuntimeException("查看相關(guān)組成員信息出現(xiàn)異常！"); 
  } 
} 
/** 
 * 跳轉(zhuǎn)到相關(guān)成員組頁(yè)面 
 * @return 
 */ 
public String relatedItemSwitch(){ 
  return SUCCESS; 
}

js中的代碼：

/** 
   * 貸后專(zhuān)項(xiàng)檢查錄入信息展示--客戶信息【相關(guān)】組展示 
   */ 
    $(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; 
      //查詢(xún)相關(guān)成員組信息，并循環(huán)判斷append到頁(yè)面 
      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; 
            } 
          } 
        } 
      }) 
    } 
      //請(qǐng)求加載相關(guān)組成員信息頁(yè)面，并展示在dialog中 
      $.ajax({ 
        url:urlSwitch,     
        type:"get", 
        success:function(data){ 
          relatedInfo(); 
          relatedDialog=$dialog({ 
            id:'relatedDialog', 
            width:1000, 
            title:"相關(guān)信息", 
            cancelValue:'關(guān)閉', 
            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實(shí)現(xiàn)前端頁(yè)面功能模塊化拆分的方案，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: