Thymeleaf構文

一、前言

Thymeleafって何ですか?ThymeleafはWebと独立した環境の現代サーバー側Javaテンプレートエンジンであり、HTML、XML、JavaScript、CSS、さらには純粋なテキストを処理することができる.

テンプレートエンジンとは何ですか?テンプレートエンジン(ここでは特にWeb開発用のテンプレートエンジンを指す)は、ユーザインタフェースを業務データ(コンテンツ)から分離するために生成され、特定のフォーマットのドキュメントを生成することができ、ウェブサイト用のテンプレートエンジンは標準的なHTMLドキュメントを生成する.

類似のテンプレートエンジンはどれらがありますか?市販のJavaテンプレートエンジンはJSP、Velocity、Freemarker、Thymeleaf

テンプレートエンジンの役割:静的ページとビジネスデータを統合し、サーバ側でレンダリングした後、クライアントに戻って表示します.異なるテンプレートエンジンの違いは、異なる構文を使用することです.

自己認識はjspからthymeleaf、さらにvueまで、前後端が徐々に分離する過程である.jspの特徴は、ページにjavaコードをネストできることです.これは明らかに強力です.結果は (一部のフロントエンドインタフェース要素の表示非表示、動的変化)と であった.(データベース照会などのバックグラウンドへのアクセスが必要な操作は、しばしば絡み合っており、コードが混乱し、メンテナンス性が悪く、元バックグラウンド人員の職責分担が明確でなく、責任が追跡しにくい.thymeleafになると、thymeleafがhtmlの境界面をサポートしているため、サーバ環境下でもインタフェースが展示され、インタフェース上で直接バックグラウンドでのインタラクションも少なくなりました.さらに、現在人気のあるvueは、本当の意味での前後の分離を実現し、フロントエンドの人はフロントインタフェースに集中し、バックエンドの人はバックグラウンドインタフェースに集中している.

二、SpringBoot環境でthymeleafを使用する
Springbootはthymeleafを統合するのは簡単で、以下のいくつかのステップだけを紹介します:1.依存のインポート

    org.springframework.boot
    spring-boot-starter-thymeleaf

2.アプリケーションを簡単に構成する.properties

spring.thymeleaf.enabled=true
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.mode=HTML
spring.thymeleaf.suffix=.html

3.htmlインタフェースに名前空間を導入する

    ......

三、文法の詳細
thymeleaf構文はhtmlタグにth:*を付ける形式です
1、テキスト操作

//      thymeleaf

//      thymeleaf

th:text和th:utext的区别：

th:utext中的html标签会正常翻译成html标签，而th:text的内容原样输出。如下：

 //    
  //thymeleaf  

输出包含空格的文本：

所有th:标签都可以用data-th-替换：

2、几种常用符号

#号用于国际化
1.在templates文件夹下建立i18n目录，新建messages_zh_CN.properties文件，内容如下：

thymeleaf.welcome=welcome to thymeleaf index page

2.application.propertiesで構成:

spring.messages.basename=i18n/messages

3.インタフェースでの使用:

$用于后端取值

后端要向model存入user对象

* 用于绑定一个对象的属性，与$结合使用

      ： 

      ： 

      ： 

@リンク用

ユーザーの   


ユーザーの   

~プロジェクトルートへのアクセス

ユーザーの  

3、html要素の操作

4、いくつかの表現

三元式

三元表达式省略写法，表达式为真，值为*{favorite}，否则,值为后面的字符串

三元表达式省略写法,表达式为真，会给标签加上customStyle样式，为假，返回null，什么也不执行

• switch表达式

    username:
    
lorem
    
ipsum
    
dolor
    
whatever
  

5、条件判断、算数演算

lorem

lorem

6、循环迭代

   
    

        
        view detail
    

7、fragmentの使用
fragmentはjspのjsp:includeに似ており、一部のページを再利用するために使用されます.templatesディレクトリの下に、一般的な著作権フラグメントを格納するためのfooter.htmlを作成します.内容は次のとおりです.

次に、他のインタフェースに導入します.

• th:insert保留当前页面的div根标签，也保留copyright片段的footer根标签
• th:replace只保留copyright片段的footer根标签,div被替换掉了
• th:include保留当前界面的div，但只包含copyright片段的里的内容，不再包含footer根标签

片段还可以传参数：比如有一个navbar片段，所在文件templates/nav.html：

他のインタフェースに導入するには、次の手順に従います.

      span       span

現在のインタフェースのラベルを転送するには~{this:span}

を使用します.

何も伝わらないもう一つの書き方は~{}

8、コメント

    
        

            
oamha
        
    

thymeleaf注釈フォーマットは

である.

コンテンツ部分は、ブラウザが直接開くときにコメントとして扱われ、サーバ環境下でのみテンプレートエンジンによって

が正しく解析する.
9、行内式

    
[[${str}]]
    
[(${str})]

th:blockは1つの容器に相当するが、具体的なラベル

は生成されない.

th:with str変数に

を割り当てる

[[]]はth:text

に相当する

[()]はth:utext

に相当する
JavaScriptコードでsessionの値にアクセスする必要がある場合があります.行内式も使用できます.

    var user = [[${session.user}]]

四、まとめ
thymeleafの一般的な構文はこれだけで、いくつかの内蔵オブジェクトの使用もあります.遭遇したらドキュメントを参照することができます.