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

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

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

前端頁面功能模塊化拆分

當一個系統(tǒng)的功能很多時，不可能所有功能模塊的頁面都寫在一個頁面里面，這時就需要將不同功能模塊的頁面拆分出去，就像模板一樣，需要哪塊的功能就調用哪塊的頁面，然后加載相應數據并展示到相應的頁面。

本應用的使用spring+struts+mybatis+jsp的方式，用兩種方案來完成前端頁面功能的拆分。

方案一：

在JSP頁面中，利用EL表達式或者Java代碼的方式，在后臺完成頁面數據的填充。然后在js中來完成頁面的切換。

jsp代碼：

業(yè)務詳情模塊頁面：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文件代碼：

倫理片 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);--調用service中的方法查詢數據 
    }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; 
      //聲明詳情查詢方法 
      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頁面中，只是靜態(tài)代碼，需要在js中進行數據的填充，但是因為相應的jsp功能模塊頁面還沒有加載(盡管可以在功能模塊jsp頁面引入相應的js，或者利用sea.js來加載js文件，但是本質是html或者jsp頁面加載時才會加載相應的js文件)，所以不能在js中領用jQuery來獲取頁面的dom元素。這時，就需要先加載jsp頁面，例如可以在struts處進行一個頁面的跳轉，而不需要向后臺發(fā)起請求。也就是說需要向后臺發(fā)起兩次請求，第一次請求是加載相應的功能模塊頁面，第二次請求是向后臺請求數據，然后填充到第一次請求的頁面中，并展示出來。

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>經營名稱不一致</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("查看相關組成員信息出現(xiàn)異常！-----relatedItem()"); 
    throw new RuntimeException("查看相關組成員信息出現(xiàn)異常！"); 
  } 
} 
/** 
 * 跳轉到相關成員組頁面 
 * @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; 
      //查詢相關成員組信息，并循環(huán)判斷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實現(xiàn)前端頁面功能模塊化拆分的方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

SpringBoot實現(xiàn)發(fā)送郵件任務
這篇文章主要為大家詳細介紹了SpringBoot實現(xiàn)發(fā)送郵件任務，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
基于String變量的兩種創(chuàng)建方式(詳解)
下面小編就為大家?guī)硪黄赟tring變量的兩種創(chuàng)建方式(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Spring boot 跳轉到jsp頁面的實現(xiàn)方法
本篇文章主要介紹了Spring boot 跳轉到jsp頁面的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
java web實現(xiàn)簡易收費站
這篇文章主要為大家詳細介紹了java web實現(xiàn)簡易收費站，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一
2020-11-11
springcloud如何使用Feign后臺內部傳遞MultipartFile
這篇文章主要介紹了springcloud如何使用Feign后臺內部傳遞MultipartFile，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
解決jpa查詢語句自動變成了update的問題
這篇文章主要介紹了解決jpa查詢語句自動變成了update的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-08-08
Springboot使用maven打包指定mainClass問題
這篇文章主要介紹了Springboot使用maven打包指定mainClass問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
利用MyBatis進行不同條件的like模糊查詢的方法
這篇文章主要介紹了利用MyBatis進行不同條件的like模糊查詢,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
舉例講解Java的內部類與類的加載器
這篇文章主要介紹了Java的內部類與類的加載器,是Java入門學習中的基礎知識,需要的朋友可以參考下
2016-03-03
Java中BigDecimal的舍入模式解析(RoundingMode)
這篇文章主要介紹了Java中BigDecimal的舍入模式解析(RoundingMode)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06