SpringBoot-web開発(3):テンプレートエンジンThymeleaf



この記事では主に、SpringBootが推奨するThymeleafテンプレートエンジンを紹介します。これは、より単純な構文とより強力な関数を備えた高級言語テンプレートエンジンです。

参照:https://www.jianshu.com/p/7c27c50f24ec

1.はじめに

以前は、通常、フロントエンドから渡されたhtmlページをjspページに変換し、jspを介してデータの表示とフロントエンドの対話を簡単に実現していました。

jspは非常に強力な関数をサポートし、Javaコードを記述できますが、springbootはデフォルトでjspをサポートしていません

純粋に静的なページを直接使用する場合、開発は非常に面倒です。模板引擎



2.テンプレートエンジンとは何ですか?

模板引擎ユーザーインターフェイスをビジネスデータ(コンテンツ)から分離するために生成されます。特定の形式のドキュメントを生成できます。Webサイトで使用されるテンプレートエンジンは、標準の[HTML]ドキュメントを生成します。SpringBootは、テンプレートエンジンの使用をお勧めします

ZWPF0M5W_CR_NEUY6H46__W

  • テンプレートエンジンはたくさんありますが、以前はJSPがテンプレートエンジンでしたが、SpringBootが推奨するThymeleafを含む、より多くのフリーマーカーもあります。

  • テンプレートエンジンは多数ありますが、原則は次のとおりです。
    ここに画像の説明を挿入

  • ページテンプレートを作成する場合、一部の値はバックグラウンドでカプセル化するデータであり、動的です。これらの値を取得するための式をいくつか作成します。データによると、テンプレートエンジンは、式を解析して指定した位置に入力し、最後に書き出すデータを生成するのに役立ちます

  • すべてのテンプレートエンジンの原理は同じですが、異なるテンプレートエンジンの構文は異なります

  • テンプレートテクノロジーは神秘的なテクノロジーではなく、ストリングをスプライスするという物理的な作業を行います。テンプレートエンジンは、正規表現を使用してテンプレート識別子を識別し、識別子をデータに置き換えます

一般的に使用されるテンプレートエンジンの比較
image-20200923214737908



3. Thymeleaf

1はじめに

Thymeleaf主な目標は、エレガントで自然なテンプレートを開発ワークフローに取り入れることです。HTMLはブラウザーで正しく表示でき、静的プロトタイプとして使用できるため、開発チームでより強力なコラボレーションを実現できます。Thymeleafは、HTML、XML、JavaScript、CSS、さらにはプレーンテキストも処理できます。
image-20200923214427073

  • thymeleaf6つのテンプレートを処理できます。それぞれをテンプレートモードと呼びます。

    2つのマークアップテンプレートモード(HTML、XML)があります。

    3つのテキストテンプレートモード(TEXT、JAVASCRIPT、CSS)

    操作テンプレートなしモード(RAW)

Thymeleafhttps : //www.thymeleaf.org/

Githubアドレスhttps : //github.com/thymeleaf/thymeleaf

公式ウェブサイトドキュメントhttps : //www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process


2. Thymeleafをインポートする

現在のバージョンは3.xで、次の依存関係をインポートするだけです

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

依存関係をインポートした後、jarパッケージがインポートされているかどうかを確認します。
image-20200922231528040
次の2つのパッケージが自動的にインポートされることがわかります(2.xバージョンでは、次の2つの依存関係を個別にインポートする必要があります)

<dependency>
	<groupId>org.thymeleaf</groupId>
	<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
	<groupId>org.thymeleaf.extras</groupId>
	<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>

3. Thymeleafを使用する

最初に、SpringBootの自動構成原則に従ってThymeleafの自動構成ルールを確認する必要があり、それらをそのルールに従って使用します。

Thymeleafの自動構成クラスを見てみましょう。ビューのパーサーThymeleafProperties
image-20200922232535328
であるデフォルトのプレフィックスとサフィックスを確認できます。Thymeleaf

要約:thymeleafを使用するには、対応する依存関係をインポートして、htmlページをresourceの下のtemplatesディレクトリに配置するだけです。thymeleafは、自動的にレンダリングするのに役立ちます


4.簡単なテスト

1. TestControllerを書く
image-20200923212322017

package com.zsr.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {
    
    
    @RequestMapping("/test")
    public String TestThymeleaf(Model model) {
    
    
        model.addAttribute("msg", "Hello,Thymeleaf");
        return "test";
    }
}

2.テストページtest.htmlを作成し、テンプレートディレクトリに配置します
image-20200923210314616

最初にthymeleaf名前空間制約を導入します

xmlns:th="http://www.thymeleaf.org"
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试Thymeleaf</title>
</head>
<body>
<!--th:text就是将div中的内容设置为它指定的值-->
<div th:text="${msg}"></div>
</body>
</html>

3.プロジェクトリクエストテストを開始する

アクセスhttp://localhost:8080/test
image-20200923140335602

正常にフェッチされた値


5. thymeleaf構文

参照:https://www.cnblogs.com/itdragon/archive/2018/04/13/8724291.html

https://www.cnblogs.com/jnba/p/10832878.html

1、th属性

th:text:テキストの置換。

th:utext:HTMLテキスト置換をサポートします。

th:value:属性の割り当て

th:each:トラバースループ要素

th:if:決意条件だけでなく、類似しましたth:unlessth:switchth:case

th:insert:一般的なコードブロック抽出シナリオで一般的に使用される、th:replace、th:includeと同様のコードブロックの導入

th:fragment:th:insertで簡単に参照できるようにコードブロックを定義します

th:object:変数を宣言します。通常、遅延の効果を達成するために* {}と組み合わせて使用​​されます。

th:attr:ラベル属性を設定します。複数の属性はコンマで区切ることができます

2.標準の式構文

${...} 変数式、変数式

#常用的内置对象
`ctx` :上下文对象
`vars` :上下文变量
`locale`:上下文的语言环境
`request`:(仅在web上下文)的 HttpServletRequest 对象
`response`:(仅在web上下文)的 HttpServletResponse 对象
`session`:(仅在web上下文)的 HttpSession 对象
`servletContext`:(仅在web上下文)的 ServletContext 对象

#常用的内置方法
`strings`:字符串格式化方法,常用的Java方法它都有,比如:equals,equalsIgnoreCase,length,trim,toUpperCase,toLowerCase,indexOf,substring,replace,startsWith,endsWith,contains,containsIgnoreCase等
`numbers`:数值格式化方法,常用的方法有:formatDecimal等
`bools`:布尔方法,常用的方法有:isTrue,isFalse等
`arrays`:数组方法,常用的方法有:toArray,length,isEmpty,contains,containsAll等
`lists`,`sets`:集合方法,常用的方法有:toList,size,isEmpty,contains,containsAll,sort等
`maps`:对象方法,常用的方法有:size,isEmpty,containsKey,containsValue等
`dates`:日期方法,常用的方法有:format,year,month,hour,createNow等

@{...} リンク式、リンクURL式

#{...} メッセージ式、メッセージ式

~{...} コードブロック式、フラグメント式

*{...} 選択変数式、選択変数式

おすすめ

転載: blog.csdn.net/qq_45173404/article/details/108763691