2.7. 統合テンプレートエンジン
2.7.1、タイムリーフ
1 はじめに
フロントエンドとバックエンドの分離（フロントエンドがフロントエンドのコードを書き、バックエンドがバックエンドのコードをお互いに影響を与えずに書く）は、現在最も主流の考え方と言えます。
従来の Java Web 開発では、通常、フロント ページの開発に JSP が使用されます。しかし、JSP ページは HTML+Java で記述されており、明らかに「フロントエンドとバックエンドの分離」の考えに準拠していません。したがって、現在の Java Web 開発では、JSP の使用は徐々に少なくなってきています。その中でも、Thymeleaf は、JSP の代わりに使用される優れたテクノロジの 1 つです。
Thymeleaf これは、XML、XHTML、HTML5、JavaScript、CSS、さらにはプレーン テキストをレンダリングするためのテンプレート エンジン フレームワークです。Spring MVC などの Web フレームワークと統合でき、プロジェクトが実行中でない場合でもブラウザで直接開くことができますが、ブラウザは未定義の Thymeleaf タグ属性を無視し、静的ページの効果を表示します。 Web アプリケーションを通じてアクセスすると、Thymeleaf が表示されます。これにより、静的なコンテンツが動的に置き換えられ、ページが動的に表示されます。
- 動的と静的の組み合わせ: ブラウザーで直接開いてページの静的効果を表示したり、Web アプリケーション経由でアクセスして動的ページ効果を表示したりできます。
- すぐに使用できる: Spring 標準言語と、SpringMVC と完全に統合されたオプションのモジュールを提供します。これにより、フォーム バインディング、属性エディター、国際化などの機能を迅速に実装できます。
- 複数の方言のサポート: Thymeleaf 標準と Spring 標準の 2 つの方言が提供され、テンプレートを直接適用して JSTL および OGNL 式を実装できます。開発者は、必要に応じてカスタム方言を拡張して作成することもできます。
- SpringBoot との完全な統合: Springboot は公式に推奨およびサポートされており、Thymeleaf のデフォルト構成を提供し、Thymeleaf のビュー リゾルバーも設定します。
Spring で Thymeleaf を使用するには、関連する依存関係 (jar パッケージ) をインポートする必要があります。
<!-- thymeleaf的依赖 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.15.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.15.RELEASE</version>
</dependency>
<!-- html、xml解析器-->
<dependency>
<groupId>org.attoparser</groupId>
<artifactId>attoparser</artifactId>
<version>2.0.5.RELEASE</version>
</dependency>
<!--转义反转义词库-->
<dependency>
<groupId>org.unbescape</groupId>
<artifactId>unbescape</artifactId>
<version>1.1.6.RELEASE</version>
</dependency>
2. 文法
Thymeleaf 内には HTML に代わるタグや式が多数あり、これらのタグや式によって Thymeleaf は動的表示機能を実現しています。
使用する場合は、編集時のエラーを避けるために、HTML ページにステートメント スペースを追加してください。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
th タグ: thymeleaf が静的表示と動的表示の違いを実現できるのは、HTML タグをベースに th 属性を拡張しているためで、基本的には元の HTML タグの属性を th: 属性に置き換えることができます。これらの th が付いた属性は HTML タグ内で直接利用できるため、Thymeleaf の HTML は静的時には元のコンテンツを表示し、Web アクセス後に属性を設定したコンテンツを表示することで、HTML を動的と静的な双方向表示にすることができます。
属性 説明する 例 th:id HTMLのid属性を置き換える < input id=”html-id” th:id=”thymeleaf-id” /> th:テキスト 現在の要素のテキスト コンテンツを設定します (HTML タグをエスケープせずに) < h1 th:text=“helloSpringBoot” >こんにちは< /h1 > th:utext 特殊文字をエスケープせずにテキストを置換（HTMLタグは認識可能） <div th:utext="'<h1>表示</h1>'" >テキスト</div> th:オブジェクト 親タグでオブジェクトを選択し、*{…} 選択式を使用して子タグでオブジェクトの属性値を選択します。選択オブジェクトがない場合、サブタグで使用される選択式は ${…} 変数式と同じ効果があります。同時に、オブジェクトが選択されている場合でも、サブタグ内で変数式を使用できます。 < div th:object=”${session.user}” >
< p th:text=”*{name}”>< /p>
</ div>th:値 value 属性を置き換えます < input th:value = “${user.name}” /> th:付き ローカル変数の代入 < div th:with=”isEvens = prod ステータス 。カウント {prodStat.count}%2 == 0" th:text="製品ステーション_ _ _ _ _ count {isEvens}">< / div > th:スタイル スタイルを設定する < div th:style=”'color:#F00; font-weight:bold'">< /div> th:onclick クリックイベント < td th:onclick = “'getInfo()'”>< /td> 番目:それぞれ Traverse、Iterable、Map、配列などをサポートします。 < テーブル >
< tr th:each="m:セッション 。マップ " > < br / > < tdth : text = " {session.map}"> <br /> < td th:text="セッションします。_ マップ」_><br / _><t d t h:テキスト_ _ _=" {m.getKey()}">< /td>
< td th:text=”${m.getValue()}”>< /td>
< /tr>
< /table>th:if このラベルを表示するかどうかを条件に応じて決定します < a th:if =“${userId ==collect.userId}”> th:そうでない限り th:ifの判定に反して、条件を満たした場合は表示されません < div th:unless=“${m.getKey()=='name'}” >< /div> th:スイッチ Java の switch case ステートメントに似ており、通常は th:case と組み合わせて使用されます。 < div th:switch=”${name}”>
< span th:case=”值1”>< /span>
< span th:case=”值2”>< /span>
</ div>番目:選択済み 選択ボックスを選択してください < select>
< オプション th:selected=“${name=='a'}”> < /option>
……
< /select>th:ソース HTMLのsrc属性を置き換える < img th:src=“@{}” src=“” /> th:アクション フォーム送信アドレスを置き換える < form th:action=“@{/user/login}” th:method=“post”> < /form> 細い線 インライン属性。この属性には、text、none、javascript の 3 つの値があります。<script> タグで使用すると、js コードはバックグラウンドで渡されるページのオブジェクトを取得できます。 th:置き換える レイアウト タグ。現在のタグ全体を、th:fragment 属性で指定されたテンプレート フラグメント (タグを含む) に置き換えます。 th:挿入 レイアウト タグ。th:fragment 属性を使用して指定されたテンプレート フラグメント (タグを含む) を現在のタグに挿入します。 th:フラグメント JSP タグと同様のテンプレート レイアウト。参照または組み込まれるテンプレート フラグメントを定義するために使用されます。 -
表現：
-
変数式: ${}${} で囲まれた式は変数式です
-
オブジェクトのプロパティとメソッドを取得します。コントローラーは Student オブジェクトを送信します。
获取学生的id：${student.getId} -
組み込みプリミティブを使用する
-
#ctx : コンテキスト オブジェクト
-
#vars : コンテキスト変数
-
#locale: コンテキストのロケール
-
#request: Web アプリケーションで利用可能 (サーバー: setAttribute(“student”, Student))
${request.getAttribute('student')} -
#response: Web アプリで利用可能
-
#session: Web アプリケーションで使用可能
-
#servletContext: Web アプリケーションで使用可能
-
-
組み込みツールオブジェクトを使用する
-
文字列、数値、配列、コレクション、日付など。
${#strings.equals(o1,o2}
-
-
-
変数式の選択: *{} (基本的には変数式と同じ関数ですが、th:object とともに使用できます。th:object がオブジェクトを格納した後、オブジェクトはその内部サブタグで取得できます)
-
国際化: #{} (国際化された構成を取得できます)
-
リンク URL 式: 他のリンク (静的リソース、フォーム フォーム リクエスト、タグなど) を参照します。
- パラメータなしのリクエスト: @{xxx}
- 参加リクエストがあります: @{/xxx(k1=v1,k2=v2)}
-
フラグメント式: ~ (テンプレート ページ内の他のテンプレート フラグメントを参照するために使用されます)
-
-
文字
- 文本字面量：
'one text','Another one!', … - 数字字面量：
0,34,3.0,12.3,… - 布尔文字：
true,false - 空字面量：
null - 文字标记：
one,sometext,main,…
- 文本字面量：
-
文本操作：
- 字符串连接：
+ - 字面替换：
|The name is ${name}|
- 字符串连接：
-
算术运算：
- 二元运算符：
+,-,*,/,% - 减号（一元运算符）：
-
- 二元运算符：
-
布尔运算：
- 二元运算符：
and,or - 布尔否定（一元运算符）：
!,not
- 二元运算符：
-
比较与相等：
- 比较器：
>,<,>=,<=(gt,lt,ge,le) - 等式运算符：
==,!=(eq,ne)
- 比较器：
-
条件运算符：
- 如果-那么：
(if) ? (then) - 如果-然后-其他：
(if) ? (then) : (else) - 默认：
(value) ?: (defaultvalue)
- 如果-那么：
3、使用
Spring Boot 推荐使用 Thymeleaf 作为其模板引擎。SpringBoot 为 Thymeleaf 提供了一系列默认配置，项目中一但导入了 Thymeleaf 的依赖，相对应的自动配置 （ThymeleafAutoConfiguration 或 FreeMarkerAutoConfiguration） 就会自动生效，因此 Thymeleaf 可以与 Spring Boot 完美整合 。
Spring Boot 整合 Thymeleaf 模板引擎，需要以下步骤：
-
引入 Starter启动器
<!--thymeleaf模板的依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> -
其模板引擎大多都使用默认值，不配置也能直接使用
-
通过controller访问
2.7.2、Freemarker
一种基于模板和要改变的数据， 并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。 是一种用Java语言编写的模板引擎，与Web容器无关，在Web运行时，它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生产XML，JSP或Java等。目前企业中主要用Freemarker做静态页面或是页面展示
freemarker并不关心数据的来源，只是根据模板的内容，将数据模型在模板中显示并输出文件
-
添加Freemarker 的依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> -
yml中配置
spring: freemarker: cache: false charset: utf-8 template-loader-path: classpath:/templates/ suffix: .html content-type: text/html request-context-attribute: request -
html页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FreeMarker</title> </head> <body> <h1>Welcome ${user} !</h1> <u1> <#list lists as list> <li>${list} </li> </#list> </u1> </body> </html>
2.7.3、整合JSP
SpringBoot默认是不支持JSP模板引擎的，但是可以通过引入相关依赖来整合JSP模板引擎。
-
导入支持JSP的依赖
<!-- 内置的不支持jsp，所以要添加支持jsp的tomcat--> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <!--jsp标签库支持--> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency> -
添加webapp文件
-
yml文件中配置支持jsp页面
spring: mvc: #支持的jsp路径 view: prefix: /WEB-INF/ suffix: .jsp