Sitemesh チュートリアル - ページ装飾技術の原理と応用

Sitemesh チュートリアル - ページ装飾技術の原理と応用

1. 基本概念

1. Sitemeshはページ装飾技術です。

1 : フィルターを通してページアクセスを遮断する
2 : 訪問したページのURLに基​​づいて適切な装飾テンプレートを見つける
3 訪問したページのコンテンツを抽出し、デコレーションテンプレートの適切な位置に配置します
4 : 最後に、 装飾されたページがクライアントに送信されます。

2. サイトメッシュでは、ページは装飾テンプレートと通常のページの 2 種類に分かれています。
1) 装飾テンプレートとは、他のページを装飾するために使用するページを指します。
2) 通常のページ。一般的には、さまざまなアプリケーション ページを指します。
3. 次に、簡単な例を使用して、Web ページのサイトメッシュ変更の基本原理を説明します。

第二に、ウェブページのテンプレート変更の原則







Sitemesh の登録メカニズムを通じて、パスにアクセスするときに訪問したページを変更するために、Sitemesh に XXX テンプレート (以前のテンプレートが使用されていると仮定) を使用するように指示します。



ユーザーが左側のナビゲーションバーで「Show the Great Wall」(/ShowGreatWall.do)をクリックすると、右側の「Show the Great Wall」ページが指定されたテンプレートで装飾されます。



上記のプロセスを要約すると、Sitemesh が Web ページを変更する基本原理は次のように説明できます。



3. Sitemeshの設定と使用

1) WEB-INF/web.xmlにフィルター定義とsitemeshタグライブラリ定義を追加する

次のようにコード
をコピーします

<フィルター>
<filter-name>サイトメッシュ</filter-name>
<フィルタークラス>com.opensymphony.module.sitemesh.filter.PageFilter</フィルタークラス>
</フィルター>
<フィルターマッピング>
<filter-name>サイトメッシュ</filter-name>
<urlパターン>/*</urlパターン>
</フィルターマッピング>
<タグライブラリ>
<taglib-uri>サイトメッシュデコレータ</taglib-uri>
<タグライブラリの場所>/WEB-INF/sitemesh-decorator.tld</タグライブラリの場所>
</タグライブラリ>
<タグライブラリ>
<taglib-uri>サイトメッシュページ</taglib-uri>
<タグライブラリの場所>/WEB-INF/sitemesh-page.tld</タグライブラリの場所>
</タグライブラリ>

2) WEB-INF/decorators.xml を作成します。このファイルでは、どのテンプレートを含めるか、各テンプレートがどの URL を変更するかを設定できます。また、テンプレート制御を必要としない URL も設定できます。decorators.xml の例は次のとおりです。

次のようにコード
をコピーします

<除外>
<パターン>/ログイン*</パターン>
</除外>
<デコレーター defaultdir="/デコレーター">
<デコレータ名="メイン" ページ="DecoratorMainPage.jsp">
<パターン>/*</パターン>
</デコレータ>
<デコレータ名="pop" ページ="PopPage.jsp">
<パターン>/showinfo.jsp*</パターン>
<パターン>
/myModule/GreatWallDetailAction.do*
</パターン>
</デコレータ>
</デコレータ>

3) 変更したテンプレートの例を見てみましょう

次のようにコード
をコピーします

<%@page contentType="text/html;?charset=GBK"%>
<%@taglib uri="サイトメッシュデコレータ"?prefix="デコレータ" %>
<html>
<ヘッド>
<タイトル> <デコレータ:タイトル/> </タイトル>
<デコレータ:head/>
</head>
<本文>
こんにちは世界 <hr/>
<デコレータ:本体/>
</本文>
</html>

4) 変更されたページの例を見てみましょう。

次のようにコード
をコピーします

<%@ ページコンテンツタイプ="text/html;?charset=GBK"%>
<html>
<ヘッド>
<title>こんにちは世界</title>
</head>
<本文>
<p>装飾されたページはここに表示されます。</p
</本文>
</html>

5)

デコレーションテンプレートで使用できる

Sitemeshタグ

<decorator:head />

を見て

、デコレーションしたページのheadタグ内のコンテンツを抽出してみましょう。

<decorator:body /> は、

装飾されたページの body タグの内容を取り出します。

<decorator:title default="" /> は、

装飾されたページのタイトル タグのコンテンツを取得します。 default はデフォルト値です。

<decorator:getProperty property="" default="" writeEntireProperty=""/> は、

装飾されたページの関連タグの属性値を取得します。

writeEntirePropertyは、プロパティの値を表示するか、

「property=value」HTMLタグの属性を

表示するかを示します。


本文タグの属性
Meta タグの

コンテンツ値

に ">" または <" が含まれている場合は、エラーが報告され、トランスコードする必要があることに注意してください。たとえば、 &lt;

default はデフォルト値です。

<decorator:usePage id="" /> は、

装飾されたページによってオブジェクトとして構築され、装飾されたページの JSP で直接参照できます

6) デコレーションテンプレートでタグを使用する例を見る

次のようにコード
をコピーします

<html lang=" <デコレータ:getProperty プロパティ="lang"/> ">
<ヘッド>
<title> <デコレータ:title デフォルト="Hello" /> </title>
<デコレータ:ヘッド />
</head>

<body <デコレータ:getProperty property="body.onload" writeEntireProperty="1"/> >
メタから変数会社の名前を取得します。
<デコレータ:getProperty プロパティ="meta.company"/>
変更されたページの本文の内容は次のとおりです。
<デコレータ:本体 />
<デコレータ:usePage id="myPage" />
<%=myPage.getRequest().getAttribute("ユーザー名")%>
</本文>
</html>

7) 変更されたページの対応するコードを確認します。

次のようにコード
をコピーします

<html lang="ja">
<ヘッド>
<title>私のサイトメッシュ</title>
<meta name="会社" content="スマートドット"/>
<meta name="著者" content="zhangsan"/>
<スクリプト>
関数 count(){10 を返す;}
</スクリプト>
</head>
<body onload="count()">
<p>これは修正されたページです</p>
</本文>
</html>

IV. 結論

1. Sitemesh で最も重要なことは、装飾用のテンプレートを作成し、どのページを装飾するかを decorators.xml で設定することです。したがって、Sitemeshを使用する主なプロセスは、デコレーションテンプレートを作成しdecorators.xmlでURLパターンを構成することです。

2. プロジェクト全体を分析して、どのページをテンプレートに抽象化する必要があるかを確認します。たとえば、セカンダリ ページ、三次ページ、ポップアップ ウィンドウなどはすべて、対応するテンプレートにする必要があります。一般的に、大規模な OA システムには 8 個を超えるテンプレートはありません。

特別なリクエスト パスがフィルターの範囲内にあるが、テンプレートを使用したくない場合はどうすればよいでしょうか


そんなに無理なことしちゃダメですよ!

心配しないでください。SiteMesh はすでにこれを考慮しており、上記の手順 5 で説明した decorators.xml がこの時点で機能します。
以下は私の decorators.xml です:

次のようにコード
をコピーします

<?xml バージョン="1.0" エンコーディング="ISO-8859-1"?>
<デコレーター defaultdir="/デコレーター">
<!-- 除外された URL は Sitemesh によって装飾されることはありません -->
<除外>
<パターン>/index.jsp*</パターン>
<パターン>/ログイン/*</パターン>
</除外>
<デコレータ名="main" ページ="main.jsp">
<パターン>/*</パターン>
</デコレータ>
</デコレータ>

decorators.xml には 2 つの主要なノードがあります
デコレータ ノードはテンプレートの場所とファイル名を指定し、パターンを使用してどのパスがどのテンプレートを参照するかを指定します。
excludes ノードは、テンプレートを使用しないリクエストのパスを指定します。

たとえば、上記のコードでは、/index.jsp と /login/ で始まるリクエスト パスはテンプレートを使用しません。

もう 1 つ注意すべき点は、decorators ノードの defaultdir 属性が、テンプレート ファイルが保存されるディレクトリを指定することです。

<<:  高い同時実行性の下でNginxのパフォーマンスを最適化する方法をまとめます

>>:  MySQLスタートアップが起こした事故の実録

推薦する

CSS インライン スタイル、埋め込みスタイル、外部参照スタイルを使用する 3 つの方法

3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...

カルーセルカルーセルケースのJS実装

この記事の例では、カルーセルカルーセルを実装するためのJSの具体的なコードを参考までに共有しています...

nginx でのリクエストのカウント追跡の簡単な分析

まずは適用方法を説明します。nginxモジュールにはjtxyとjtcmdの2つがあります。 http...

Mysql systemctl start mysqld によって報告されるエラーの解決策

エラーメッセージ:制御プロセスがエラー コードで終了したため、mysqld.service のジョブ...

MySQL のキーとインデックスの違い

まずはコードを見てみましょう: ALTER TABLE reportblockdetail ADD ...

突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...

Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現

目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...

JavaScriptプロトタイプと例の詳細な説明

目次コンストラクタインスタンスとプロトタイプの関係プロトタイププロパティ属性またはメンバーの検索原則...

コンテナDockerCommitを介してイメージを送信し、DockerPushでイメージをプッシュします。

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

モバイルレイアウトにvw+remを使用する方法

まだ rem フレキシブルレイアウトを使用していますか?圧縮された js コードの大きなセクションを...

Vue スキャフォールディング学習プロジェクト作成方法

1. 足場とは何ですか? 1. Vue CLI Vue CLI は、Vue.js をベースにした迅速...

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

VueでTypescriptの設定手順を使用する

目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...

MySqlは、外部ネットワーク接続クライアントの低速問題を解決するためにskip-name-resolveを使用します。

Tencent Cloud上に構築されたMySQLは、開発用コンピュータでNavicatを使用して...

オンラインMySQLオプティマイザの誤判断によって発生した低速クエリイベントを記録する

序文:非常に遅いクエリとリクエストのタイムアウトのアラートを受け取りました。メトリックを通じて My...