프론트 엔드 페이지 기능의 모듈 식 분할
시스템에 많은 기능이 있으면 모든 기능 모듈의 모든 페이지가 한 페이지로 작성되는 것이 불가능합니다. 현재 다른 기능 모듈의 페이지를 템플릿처럼 분리해야합니다. 필요한 기능이 필요한 페이지가 호출되고 해당 데이터가로드되어 해당 페이지에 표시됩니다.
이 응용 프로그램은 Spring+Struts+Mybatis+JSP를 사용하여 두 솔루션을 사용하여 프론트 엔드 페이지 기능의 분할을 완료합니다.
Plan 1:
JSP 페이지에서 페이지 데이터는 EL 표현식 또는 Java 코드를 사용하여 백그라운드에 채워집니다. 그런 다음 JS에서는 페이지 스위치가 완료됩니다.
JSP 코드 :
비즈니스 세부 사항 모듈 페이지 : RiskDetailItem.jsp 페이지 코드는 EL 표현식을 사용하여 데이터 채우기를 완료합니다.
<div> <table style = "font-size : 14px;"> <td> <td> 고객 이름 </td> <td> $ {LoanRiskBean.cusName} </td> <td> 대출 금액 </td> <td> $ {loanriskbean.duebillamount} Yuan </td> </tab> </tab> </tab> </td>스트럿의 XML 파일 코드 :
윤리 영화 http://www.dotdy.com/
<action name = "riskdetailitem"method = "detailitem"> <result name = "success">/web-inf/jsp/riskrecheck/riskdetailitem.jsp </result> </action>
행동중인 코드 :
개인 대출 리스크 비어 대출 riskbean; public string detailitem () {try {loanriskbean = riskrecheckserviceimpl.detailitem (riskId);-데이터를 쿼리하기 위해 서비스의 메소드를 호출} catch (Exception e) {e.printstacktrace (); loggerutil.info ( "예외는 세부 사항보기에서 발생했습니다! ------ 세부 사항 ()"); 새로운 runtimeexception을 던지십시오 ( "예외는 세부 사항에서 발생했습니다!"); } 반환 성공; } public void setloanRiskBean (LoanRiskBean LoanRiskBean) {this.loanRiskBean = LoanRiskBean; } JS의 코드 :
$ (document) .on ( 'click', '. related', function () {var loan = $ (this) .attr ( "loanid"); var urlswitch = "/hbpost/riskRecheck/RiskRelatedItestwitch.Accient"; var url = "/hbpost/RistReCheck/RiskRiskRiskRiskRelatedItem .Action="+new date ()+"& ""wanolid = " // 세부 사항 쿼리 방법 var relateInfo = function () {$ .ajax ({url : url, type : 'get', datatype : 'json', success : function : function (data) {}})} // 관련 그룹 멤버 페이지를로드하고 대화 상자에 표시하도록 요청하고 (url : urlswitch, type : get) get ", function (url : urlswitch). relateInfo (); // 세부 사항 쿼리 메소드 QUERY METHOND areveralDialog = $ 대화 상자 ({id : 'restentDialog', width : 1000, 제목 : "관련 정보", 취소 : 'close', content : data, onshow : function () { ". arui-dialog"). css ( "max-height", "450px"); ". ARUI-DIALOG". CSS ( "300px"); "왼쪽", "330px"; 두 번째 해결책 :
해당 기능 모듈의 JSP 페이지에서는 정적 코드 일 뿐이며 JS에서 데이터를 채우는 것이 필요합니다. 그러나 해당 JSP 함수 모듈 페이지가 아직로드되지 않았기 때문에 (기능 모듈 JS 페이지에 해당 JS를 소개하거나 SEA.JS를 사용하여 JS 파일을로드 할 수는 있지만, 해당 JS 파일이 HTML 또는 JS 페이지가로드 될 때만로드 될 때만 해당 JS 파일을로드 할 수 없다는 것이 eSSENCE입니다. 현재 JSP 페이지를 먼저로드해야합니다. 예를 들어, 배경을 요청하지 않고 Struts에서 페이지를 뛰어 넘을 수 있습니다. 즉, 두 가지 요청이 배경으로 시작되어야합니다. 첫 번째 요청은 해당 기능 모듈 페이지를로드하는 것이며 두 번째 요청은 배경에서 데이터를 요청한 다음 첫 번째 요청의 페이지로 채우고 표시하는 것입니다.
JSP 코드 : 모든 정적 코드
<div style = "오버 플로우 : 자동; 너비 : 100%;*+너비 : 1000px;"> <div> <h5> 일관되지 않은 사업 이름 </h5> <thead> <tr> <th> 고객 이름 </th> <t> iout 통지 금액 </th> </tr> </thead> <tbody> </div> </div> </div> </div> </tbody>
스트럿의 XML 파일 :
<action name = "riskrelatedItem"method = "resittrelatedItem"> </action> <!-관련 그룹 페이지로 건너 뜁니다-> <action name = "riskrelateditemswitch"method = "ranstateitemswitch"> <result name = "success">/web-inf/riskrecheck/riskrececk/risprelateditem.jsp </action>
또는:
<!-관련 그룹 페이지로 이동-> 행동에 해당 메소드를 작성할 필요가 없으며 Struts는 점프를 담당합니다. <action name = "riskrelateditemswitch"> <cults> /web-inf/jsp/riskrecheck/riskrelateditem.jsp </result> </action>
행동중인 코드 :
/ *** LOWERID*/ public void relatitem () {list <LoanRiskBean> tmprelatedList = null; try {tmprelatedList = RiskreCheckServiceImpl.RelatedItem (LoanId); this.outputStreamModelandView (tmprelatedList); } catch (예외 e) {e.printstacktrace (); loggerutil.info ( "관련 그룹 멤버 정보를 볼 때 예외가 발생했습니다! ------ anterform ()"); 새로운 runtimeexception을 던지십시오 ( "관련 그룹 멤버 정보를 볼 때 예외가 발생했습니다!"); }} / *** 관련 멤버 그룹 페이지로 점프* @return* / public string rantice rantipemswitch () {return success; }JS의 코드 :
/*** 옥 후 특별 검사 항목 정보 표시-고객 정보 [관련] 그룹 디스플레이*/$ (문서) .on ( 'click', '. elexect', function () {var loan = $ (this) .attr ( "loaniid"); var urlswitch = "/hbpost/RiskReckeck/RiskRelatedItemswitch.Action"; "/hbpost/riskRecheck/RiskRelatedItem.action?time="+New date ()+"+LoanID = "+LoanID; data.object, tipstr; +tmparray [i] .duebillno +"</td> </tr>"; ". Sameaddress". relatedInfo (); relatedDialog = $ 대화 ({id : 'restentDialog', width : 1000, 제목 : "관련 정보", concevalue : 'close', content : data, onshow : function () {$ ( ". arui-dialog"). css ( "max-height", "450px"); $ ( "Arui-dialog". CSS ( "Min-Height", "300px"); "왼쪽", "330px"; }})})위의 것은 JSP, Struts, Spring 및 Mybatis가 소개하여 프론트 엔드 페이지 기능의 모듈 식 분할을 구현하는 솔루션입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!