最初の2つの記事では、SSHを統合し、サービスパーツとアクションパーツのインターフェイスを抽出しました。基本的な開発環境が構築されたと言えます。このセクションでは、バックエンドページを作成します。構築の2つの方法について説明しましょう。フレームセットベースとEasyUIベースです。最後に、EasyUIを使用して開発します。
1.パブリックJSPページを抽出します
まず、現在のJSPページを見てみましょう。
<％@ページ言語= "java" import = "java.util。*" pageencoding = "utf-8"％> <％@ taglib uri = "http://java.sun.com/jsp/jstl/core"プレフィックス= "c"％> < <html> <head> </head> <body> <！ - omit ... - > </c：foreach> </body> </html> </span>
これらはすべて以前のテストに使用されるため、最初に身体部分の内容を読んではいけません。 JSPページを抽出するということは、いくつかの一般的な部分を新しいJSPページに抽出し、現在のJSPページに含めることを意味します。後のプロジェクトではJS、CSS、その他のファイルが間違いなく導入されるため、各JSPページに書かれている場合、非常に冗長になるため、これらのファイルなどを導入するには一般的なJSPを抽出する必要があります。 Webrootディレクトリに新しいパブリックフォルダーを作成し、新しいhead.jspfを作成します（JSPFは、他のJSPページが含めるJSPフラグメントを表します）。
<％@ page Language = "Java" pageEncoding = "utf-8"％> <％@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c type = "text/javascript" src = ""> </script> <style type = "text/css"> </style> - > </span>
コメント部分には主にJSとCSSが含まれています。なぜなら、それはまだ使用されていないため、フレームワークを構築して使用したときに削除するだけです。 <c：set>タグは$ {pagecontext.request.contextpath}を使用して$ {shop}を置き換えて簡単に書きます。このように、新しいJSPは将来このhead.jspfを含める必要があります。修正されたindex.jspを見てみましょう：
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "Utf-8"％> <！Doctype HTML public " - // w3c // dtd html 4.01 transitional // en" </body> </html> </span>
オブジェクト指向のアイデアはありますか？
2。フレームセットに基づいて背景ページを作成します
2.1問題の発見
テンプレートが抽出されており、バックグラウンドページフレームワークの構築を開始しました。まず、フレームセットを使用してそれを行います。 Web-INFディレクトリにメインの新しいフォルダーを作成し、メインに4つの新しいJSPファイルを作成します：aindex.jsp、top.jsp、left.jspおよびright.jsp。フレームセットはaindex.jspで書かれています。他の3つは、テストのための簡単な文で書かれています。 aindex.jspを見てみましょう：
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "UTF-8"％> <！doctype HTML public " - // w3c // dtd html 4.01 transitional // en" <フレームセットrows = "150、*"> <フレームsrc = "top.jsp"/> <frameset cols = "150、*"> <frame src = "left.jsp"/> <フレームsrc = "right.jsp"/> </frameset> </frameset> </html>
構造は非常に明白で、ページは3つのピースに分割され、ページは左右にあります。各モジュールには対応するJSPページが含まれ、次に<a href = "/wen-inf/main/aindex.jsp"> index.jspの本文で背景</a>にテストを書き込み、Tomcatを起動して、リンクをクリックすることでバックグラウンドにアクセスできないことがわかります。その理由は、Web-INFディレクトリのJSPを直接リダイレクトできず、サーブレットまたはアクションを通じてリダイレクトする必要があるためです。方法はありません。新しいジャンプアクションを書くことしかできません。
2.2ページジャンプアクション
最初に、ページのリダイレクトを完了するためのアクションを書きます。このアクションは、単にページのリダイレクトを実装し、ビジネスロジックを処理しません。
/ ** * @description：todo（このアクションは、Web-INFのJSPおよびJSPリクエスト転送機能を完了するために使用されます。このアクションはロジックを処理しません） }}
送信は、以前に抽出した基本を継承しないが、単にアクションサポートを継承することができることがわかります。次に、struts.xmlファイルで構成します。
<？xml version = "1.0" encoding = "utf-8"？> <！doctype struts public " - // apacheソフトウェア財団// dtd struts構成2.3 // en" "http://struts.apache.org/dtds/struts-2.3.dtd"結果、このパッケージのすべてのアクションに対して有効 - > </span> <global-results> <result name = "aindex">/web-inf/aindex.jsp </results> </global-results> <！ - 他のアクションの構成を省略します... </span> - > <！ name = "send">/web-inf/{1}/{2} .jsp </result> </action> </package> </struts> beans.xml：<bean id = "sendaction" />で構成することを忘れないでください。
このアクションで2つの*番号が割り当てられている理由は、JSPのアドレスの執筆方法に関する契約が必要なWeb-INF/*/*。JSPへのアクセスを容易にするためです。 aindex.jspの執筆方法を見てみましょう：
<span style = "font-family：microsoft yahei;"> <％@ page言語= "java" import = "java.util。*" pageencoding = "utf-8"％> <！doctype html public " - // w3c // dtd html 4.01トランジション/ file = " /public /head.jspf"％> < /head> <！ - フレーム本体には3+1ページが含まれます - > <フレームセットrows = "150、*"> <frame src = "send_main_top.action" /> <frameset cols = "150、*"> <フレームsrc = </frameset> </frameset> </html> </span>
変更されたAindex.jspから、Web-Inf/でJSPに直接アクセスしないことがわかります（アクセスできません）。アクションを飛び越えて、<a href = "send_main_aindex.action"> index.jspの本文に書き込み、背景</a>にテストし、Tomcatを起動し、リンクをクリックしてバックエンドホームページに正常にアクセスします。
フレームセットを使用してバックエンドページを作成する上記のプロセスから判断すると、非常に面倒です。各ページに含まれており、フレームセットは開発では使用されていません。 EasyUiには1つのページのみがあり、すべてのリクエストはAjaxリクエストです。次に、EasyUIを使用してバックエンドページを作成する方法を見てみましょう。
3. EasyUIに基づいて背景ページを作成します
jQuery easyuiは、JQueryに基づいたUIプラグインのコレクションであり、JQuery EasyUiの目標は、Web開発者が機能が豊富で美しく豊富なUIインターフェイスを作成できるようにすることです。開発者は、複雑なJavaScriptを作成する必要はなく、CSSスタイルを詳細に理解する必要もありません。すべての開発者は、いくつかの簡単なHTMLタグです。
3.1 EasyUI関連コンポーネントをインポートします
最初に、プロジェクトのWebRootディレクトリにEasyUIに必要なコンポーネントをインポートし、インターネットにダウンロードがあります。 jquery-easyui-1.3.5を使用して、不必要なものを削除します。最終結果は次のとおりです。
3.2 EasyUI環境の構築
抽出したばかりのhead.jspfファイルを開き、ここでeasyuiが依存しているCSSとJSをインポートし、他のページにJSPFファイルを導入し、EasyUIが次のCSSとJSを間接的に導入します。
<％@ page Language = "Java" PageEncoding = "utf-8"％> <％@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c easyi環境 - > <link rel = "styleSheet" href = "$ {shop}/jquery-easyui-1.3.5/themes/icon.css" type = "text/css"> </link> <link rel = "styleSheet" href = "$ {shop} type = "text/css"> </link> <script type = "text/javascript" src = "$ {shop} /jquery-easyui-1.3.5/jquery.min.js"> </script> <script = "text/javascript" src = "$ {shop } /jQuery-easyui-1.3.5/jquery.easyui.min.js "> </script> <script> <script type =" text/javascript "src =" $ {shop}/jquery-easyui-1.3.5/locale/easyui-lang-zh_cn.js "> </scrip> 3.3背景のフレームワークを構築します
web-inf/ main/ directoryでtop.jsp、left.jsp、およびright.jspを削除します。これは現在使用できなくなったためです。次に、aindex.jspページを変更します。 EasyUiを使用してそれを行うことができます：
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "Utf-8"％> <！doctype HTML public " - // w3c // dtd html 4.01 transitional // en" data-options = "region： 'north'、title： 'north title'、split：true" style = "heigh：100px;"> </div data-options = "region： 'west'、title： 'west'、split：true"> <！ - ここに表示されます - > <div id = "aa"> <div div-options = style = "overflow：auto; padding：10px;"> <h3 style = "color：＃0099ff;"> jquery </h3> <p>アコーディオンはjqueryのeasyiフレームワークの一部です。 Webページのアコーディオンコンポーネントをより簡単に定義できます。</p> </div> <div data-options： "icon-reload '、selected：true" style = "padding：10px;"> content2 </div> <div> content3 </div> </div> </div> </div> <div div div div div div-options' '' 'center " style = "パディング：5px;背景：#eee;"> </div> </body> </html>
ここにある多くの<div>はすべて上記のeasyui説明文書を参照しており、以下に投稿しました。最初にレイアウトレイアウト全体を実行し、必要のないものを削除します。北、西、中央の3つの部分のみが必要です。
次に、西部のDivにAccordon分類のレイアウトを追加し、head.jspfにコードを追加します。
このようにして、バックエンドページフレームワークを構築するだけで、後の段階では、何かを埋める必要があります。 index.jspでテストしましょう：<a href = "send_main_aindex.action"> background easyuiバージョン</a>に直接テストしてください。
この時点で、EasyUIを使用して背景ページのフレームワークを正常に構築しました。
（注：最後に、プロジェクト全体のソースコードのダウンロードを提供します！誰もが収集または共有できます）
ソースコードのダウンロードプロジェクト全体のアドレス：//www.vevb.com/article/86099.htm
元のアドレス：http：//blog.csdn.net/eson_15/article/details/51312490
上記は、この記事のコンテンツ全体です。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。