SpringBoot学習---thymeleafテンプレートエンジン

このブログディレクトリ：

1.thymeleafとは何ですか

1.テンプレートエンジン

Baidu百科事典：

テンプレートエンジン（ここでは特にWeb開発用のテンプレートエンジンを指します）は、ユーザーインターフェイスをビジネスデータ（コンテンツ）から分離するために生成され、特定の形式のドキュメントを生成できます。Webサイトに使用されるテンプレートエンジンは、標準のHTMLドキュメント。

ここに画像の説明を挿入

2.thymeleafテンプレートエンジン

ここに画像の説明を挿入

3.教材

（1）Thymeleaf公式Webサイト：https：//www.thymeleaf.org/公式
開発ドキュメント（英語版）
ここに画像の説明を挿入

公式開発ドキュメント（中国語版）、作者LiuMinggangによる翻訳。

ダウンロードリンク：
Tencent Weiyunダウンロードリンク：https：//share.weiyun.com/7nezzZwDパスワード：xmahjk
Baiduネットワークディスクダウンロードリンク：https
：//pan.baidu.com/s/1BBJJ5_N8St6BoPem6A_qJg抽出コード：y4hm

（2）Github上のThymeleafのホームページ
ここに画像の説明を挿入

（3）Springの公式ドキュメント：thymeleafに対応するバージョンを見つけることができます
ここに画像の説明を挿入

Two.thymeleafの基本的な文法

1.プロジェクト紹介

pom.xmlに依存関係をインポートします

    <!--导入thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

関連するjarパッケージ：
ここに画像の説明を挿入

2.ソースコード分析

thymeleafの自動構成クラスThymeleafPropertiesのソースコードを見てください。

ctrl + shift + TでThymeleafPropertiesを入力
ここに画像の説明を挿入

ソースコードのプレフィックスとサフィックスから、thymeleafを使用すると、htmlページをクラスパスのテンプレートの下に置くだけで、thymeleafが自動的にレンダリングできると推測できますか？

推測を確認するために、新しいSpringBootプロジェクトを作成し、Web依存関係をインポートし、不要な部分を削除します。プロジェクトの構造は次のとおり
ここに画像の説明を挿入
です。thymeleafの依存関係をインポートし

ます。テンプレートファイルの下に新しいtest.htmlファイルを

作成します。新しいコントローラーファイル、およびこのファイルの下に新しいTestControllerクラスを作成します
ここに画像の説明を挿入
。Webプログラムを実行します

。thymeleafの最大の役割はデータとインターフェイスの分離であるため、ここにはデータが含まれず、上記の操作では説明できません。対応するコードを記述してデータをフロントエンドに渡し、それをthymeleafに渡します。インターフェースがレンダリングされます。

test.htmlにthymeleafテンプレートエンジンの名前空間をインポートします。

xmlns:th="http://www.thymeleaf.org"

ここに画像の説明を挿入
test.htmlコードを書き直します。

実際、これはJSPと非常によく似ています。JSPは次のように記述されます。バック

エンド操作は基本的に以前と同じです。TestControllerクラスでは、

書き込み後、test.htmlのメッセージは次のようになります。エラーを報告しなくなりまし
ここに画像の説明を挿入
た：プロジェクトを再実行します：

前の分析で述べたように、テンプレートファイルの下にXX.htmlファイルを配置すると、自動的にレンダリングされます。これをさらに証明するために、最初にtest.htmlを静的に配置します（静的ファイルの静的リソースにアクセスできます）、データがまだ表示されているかどうかを確認します。
test.htmlを静的にすると、msgが赤に変わり、分析が正しいことを示します。
ここに画像の説明を挿入

3.基本的な文法学習

（1）th：text / utext、th：value、th：each

一般的に使用されるデータバインディング：

文字列をバインドする

 th:text="${msg}" 和 th:utext="${msgUtext}"

.pojoオブジェクトをバインドします

 th:value="${user.name}"

リストをバインドする

 <tr th:each="e:${userList}">
 	<td th:text="${e.id}"></td>
 	<td th:text="${e.name}"></td>
    <td th:text="${e.age}"></td>
          
 </tr>

マップをバインドする

 <tr th:each="e,eState:${userMap}">
        <td th:text="下标:${eState.index+1}"></td>
        <td th:text="${e.name}"></td>
        <td th:text="${e.age}"></td>
 </tr>

新しいpojoファイルを作成し、このファイルの下にUserクラスを作成します。
ここに画像の説明を挿入
注意：lombok依存関係をインポートすることを忘れないでください。

TestControllerクラス：

test.html（このファイルはテンプレートファイルに戻されます）：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
后端传递的数据为:
<p th:text="${msg}"></p>
<p th:utext="${msgUtext}"></p>

用户信息:
用户ID:<input type="text" th:value="${user.getUserId()}">
用户姓名:<input type="text" th:value="${user.getName()}">
用户年龄:<input type="text" th:value="${user.getAge()}">


</br>获取一组用户数据:
<table border="1px" th:width="200px">
    <thead>
    <tr>
        <th>用户ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>序号</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="e:${userList}">
        <td th:text="${e.getUserId()}"></td>
        <td th:text="${e.getName()}"></td>
        <td th:text="${e.getAge()}"></td>
        <td th:text="${e.getUserId()-1}"></td>
    </tr>
    </tbody>
    <tbody>
    <tr th:each="e,eState:${userMap}">
        <td th:text="${e.getValue().getUserId()}"></td>
        <td th:text="${e.getValue().getName()}"></td>
        <td th:text="${e.getValue().getAge()}"></td>
        <td th:text="${eState.index}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

実行結果：
ここに画像の説明を挿入

質問1：th：textとth：utextの違いは何ですか？
フロントエンドに渡されるデータは次のとおりです。
ここに画像の説明を挿入
表示状況：

从中我们可以得出:text不会解析html,utext会解析html

質問2：との違いは<tr th:each="e:${userList}"><tr th:each="e,eState:${userMap}">
何ですか
ここに画像の説明を挿入

（2）th：if

基本的な関係：
ここに画像の説明を挿入

20歳を超えるユーザーの名前をクエリします。

<p th:text="${user.name}" th:if="${user.age gt 20}"></p>

その他のプロパティについては、公式WebサイトのAPIドキュメントを確認してください。
ここに画像の説明を挿入

（3）式（変数、リンク、メッセージ、コードブロック、選択変数）

ここに画像の説明を挿入

${…}変数式

変数式は、一部の組み込みオブジェクトや組み込みメソッドなど、オブジェクトのプロパティとメソッドを取得できます。

前の例では、オブジェクトを取得して対応する値を返すすべてのメソッドです。
ここに画像の説明を挿入
実際、属性を介して直接値を取得できます。もちろん、一部の組み込み

オブジェクトでは、次の情報も取得できます。
オブジェクト：

現在の言語の状況など：

実行効果：

もちろん、一部の場合は組み込みメソッドを取得することもできます:(
次の図は、一般的に使用される組み込みメソッドを示しています）
ここに画像の説明を挿入
例：

実行結果：
ここに画像の説明を挿入

@{…}リンク式

静的リソース参照、フォームリクエスト、または任意のリンクのいずれであっても、@{…}を使用できます。このようにして、プロジェクトパスを動的に取得でき、プロジェクト名が変更されても、通常どおりアクセスできます。

パラメータなし：@ {/ xxx}
パラメータがあります：@ {/ xxx（k1 = v1、k2 = v2）}対応するURL構造：xxx？k1 = v1＆k2 = v2
ローカルリソースを紹介します：@{/project-ローカルリソースパス}
外部リソースを紹介します：@ {/jarパッケージのwebjars/リソースパス}

例えば：
ここに画像の説明を挿入

＃{…}メッセージ式

メッセージ式は、一般的に国際化シナリオで使用されます。国際化により、外部ファイルからローカルテキスト情報（.properties）を取得し、Keyを使用してValueにインデックスを付け、一連のパラメーターを提供できます（オプション）。

（国際化構成の場合）ここでuser.nameによって取得された値は、言語の選択に応じて異なるコンテンツを表示します！

 <th th:text="#{user.name}">...</th>

〜{…}コード式

宣言する方法は2つあります。
推奨：サポート：~{templatename::fragmentname}
~{templatename::#id}

関連するパラメーターの説明：

templatename：テンプレート名。Thymeleafはテンプレート名に従ってフルパスを解析します：/resources/templates/templatename.html、ファイルのパスに注意してください。
フラグメント名：フラグメント名、Thymeleafはth：fragment宣言を介してコードブロックを定義します。つまり、th：fragment =“fragmentname”
id： HTML IDセレクター。使用する場合は先頭に＃を付ける必要があります。クラスセレクターはサポートされていません。

コードブロック式は、th属性（th：insert、th：replace、th：include）と一緒に使用する必要があります。th
：insert：コードブロックフラグメント全体を、th：insert
th：replace： addを使用するHTMLタグに挿入します。コードブロックフラグメント全体が、th：replace
th：includeを使用してHTMLタグを置き換えます。th：includeを使用して、コードブロックフラグメントに含まれるコンテンツをHTMLタグに挿入します。