jsp,struts,spring,mybatis 전단 페이지 기능 모듈화 분할 방안

프런트엔드 페이지 기능 모듈식 분할
하나의 시스템의 기능이 많을 때 모든 기능 모듈의 페이지를 한 페이지에 쓸 수 없다. 이때 서로 다른 기능 모듈의 페이지를 분리해야 한다. 템플릿처럼 어떤 기능이 필요한 페이지를 호출한 다음에 해당하는 데이터를 불러와 해당하는 페이지로 보여야 한다.
이 응용 프로그램은spring+struts+mybatis+jsp를 사용하여 두 가지 방안으로 전단 페이지 기능의 분할을 완성합니다.
시나리오 1:
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 파일 코드:
윤리 영화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(" !------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 요소를 가져올 수 없다.이 때, 예를 들어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가 전단 페이지 기능의 모듈화 분할을 실현하는 방안입니다. 여러분께 도움이 되었으면 합니다. 만약에 궁금한 점이 있으면 저에게 메시지를 남겨 주시면 편집자는 제때에 답장을 드리겠습니다.여기에서도 저희 사이트에 대한 지지에 감사드립니다!

좋은 웹페이지 즐겨찾기