フロントエンドページ機能のモジュラー分割
システムに多くの機能がある場合、すべての機能モジュールが1つのページに記述されることは不可能です。この時点で、異なる機能モジュールのページをテンプレートのように分割する必要があります。機能が必要なページが呼び出され、対応するデータがロードされ、対応するページに表示されます。
このアプリケーションでは、Spring+Struts+MyBatis+JSPを使用して、2つのソリューションを使用してフロントエンドページ関数の分割を完了します。
プラン1:
JSPページでは、EL式またはJavaコードを使用して、ページデータがバックグラウンドに記入されています。次に、JSでページの切り替えを完了します。
JSPコード:
ビジネスの詳細モジュールページ:riskdetailitem.jspページコードは、EL式を使用してデータ充填を完了します。
<div> <テーブルスタイル= "font-size:14px;"> <tr> <td>カスタマー名</td> <td> $ {loanriskbean.cusname} </td> <td>ローン金額</td> <td> $ {loanriskbean.duebillamount}} yuanストラットのXMLファイルコード:
倫理映画http://www.dotdy.com/
<action name = "riskdetailitem" method = "dationalitem"> <result name = "success">/jsp/riskrecheck/riskdetailitem.jsp </result> </action>
動作中のコード:
プライベートローンリスクビーンローンリスクビーン; public String dationalItem(){try {loanriskbean = riskrecheckserviceimpl.detailitem(riskid); - サービスのメソッドを呼び出してデータを照会} catch(例外e){e.printstacktrace(); loggerutil.info( "例外はviewの詳細で発生しました!------ detailitem()");新しいruntimeexceptionを投げます(「例外は視聴ビューの詳細で発生しました!」); }成功を返す; } public void setloanriskbean(loanriskbean loanriskbean){this.loanriskbean = loanriskbean; } JSのコード:
$(document)。 //詳細Queryメソッドを宣言するvar relatedinfo = function(){$ .ajax({url:url: 'get'、datatype: 'json'、success:function(data){}})} relatedInfo(); //詳細クエリメソッドLESTERTDIALOG = $ダイアログ({ID: 'LESTORDDIALOG'、width:1000、title: "related balue"、cancelValue: 'close'、content:onshow:function(){$( "。arui-dialog")。 $(「Min-Height」、「300px」)。 2番目のソリューション:
対応する機能モジュールのJSPページでは、静的コードのみであり、JSのデータ充填が必要です。ただし、対応するJSP関数モジュールページはまだ読み込まれていないためです(ただし、関数モジュールJSページに対応するJSを導入するか、sea.jsを使用してJSファイルを読み込むことができますが、対応するJSファイルはHTMLまたはJSページがロードされている場合にのみロードされることです)、JSを使用してJSを使用することはできません。この時点で、最初にJSPページをロードする必要があります。たとえば、バックグラウンドにリクエストすることなく、Strutsでページをジャンプできます。つまり、背景に2つのリクエストを開始する必要があります。最初のリクエストは、対応する機能モジュールページをロードすることであり、2番目の要求はバックグラウンドからデータを要求し、最初のリクエストのページに入力して表示することです。
JSPコード:すべての静的コード
<div style = "overflow:auto; width:100%;*+width:1000px;"> <div> <h5>一貫性のないビジネス名</h5> <table> <thead> <tr> <th>顧客名</th> <th> iout通知金額</th> </tr> </thead> </tbody> </div> </div> </div>
ストラットのXMLファイル:
<action name = "RiskReLatedItem" method = "relatedItem"> </action> <! - 関連するグループページにスキップ - > <アクションname = "riskrelatedItemswitch" = "relatedemswitch"> <result name = "success">/jsp/jsp/riskrecheck/riskrecheck/riskreletemitem.jss
または:
<! - 関連するグループページにジャンプします - >アクションで対応するメソッドを書く必要はありません。Strutsがジャンプの責任を負います。 <アクションname = "riskReletiTemswitch"> <sults> /web-inf/jsp/riskrecheck/riskrelateditem.jsp </result> </action>
動作中のコード:
/ *** loanidに基づく関連グループメンバー情報query*/ public void relatedItem(){list <loniskbean> tmprelatedList = null; try {tmprelatedList = riskRecheckserviceImpl.relatedItem(loanid); this.OutputStreamModelandView(tmprelatedList); } catch(Exception e){e.printstacktrace(); loggerutil.info( "関連グループメンバー情報を表示するときに例外が発生しました!------関連項目()");新しいruntimeexceptionを投げます(「関連するグループメンバー情報を表示するときに例外が発生しました!」); }} / ***関連するメンバーグループページにジャンプ* @return* / public string relatedItemswitch(){return success; }JSのコード:
/***ローン後の特別な検査入力情報表示 - 顧客情報[関連]グループディスプレイ*/$(document).on( 'click'、 '。'。関連 '、function(){var loan = $( "loanid"); var urlswitch = "/hbpost/riskrecheck/riskrecheck/riskrecheck/riskrecheck/ var url = var url = var url = "/hbpost/riskrecheck/riskrelateditem.action?time="+new date()+"&loanid = "+loanid; = data.objed、for(var i = tmparray.length-1; i> = 0; i-){tipstr == "同じアドレス"){$( "。 +tmparray [i] .duebillno +"</td> </tr>"); css( "display"、 "block")} relatedinfo(); relatedDialog = $ダイアログ({id: 'relateddialog'、width:1000、title: "related fortation"、cancelvalue: "close '、content:data、onshow:function(){$("。arui-dialog ")。css(" max-height "、" 450px "); $( "。arui-dialog")。 }})})上記は、JSP、Struts、Spring、MyBatisによるフロントエンドページ関数のモジュラー分割を実装するためのソリューションです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!