Thymeleafの使い方を簡単にまとめ

１．はじめに

　Thymeleafは画面側のテンプレートエンジンとしてよく使うので、この前にjspを使う場合も多いけど、二つの使い方は全然違いますと思い、今日はThymeleafの使い方を簡単にまとめてみます。

２．まとめ

• 式の構文

  • SpEL 式 ${value}
    
  • [[${value}]]
    SpEL を使いましたら、オブジェクトの中身をそのままアクセスできます。

    <p><span th:text="${object.property}"></span></p>
  

  • *{value}
    指定されたオブジェクトを基に、プロパティをアクセス
    

    <div th:object="${session. user}" >
       <p>Name: <span th: text=" *{firstName}" >Sebastian</span>. </p>
       <p>Surname: <span th: text=" *{lastName}" >Pepper</span>. </p>
       <p>Nationality: <span th: text=" *{nationality}" >Saturn</span>. </p>
    </div>
  

  • #{...}
    通常は静的画面の場合、propertiesファイルに定義された中身をhtmlに埋め込みたいの際、以下の通り、やりまし ょう。
    /WEB-INF/templates/app.htmlを新規して、ソースを埋め込み

    <p th: text=" #{app.welcome}" >This text will not be show! </p>
  

  後は、WEB-INF/templates/app.propertiesを作って、テキストを埋め込み

    app.welcome=this messages is from app.properties！
  

  上記の通り、やりましたら、"This text will not be show!"の代わりに"this messages is from app.properties！"を表示されることになります。

• th:とは
  Thymeleafが特有のth:属性名です。

  • テキストの置換
    usernameの値をtdタグの間に埋め込みます。

    <td class="text" th:text="${username}" ></td> 
  

  • リンクURL
    通常は < a > タグの href 属性などに指定する

    <a th:href="@{/login}" class="login">登録</a>
  

  • divテンプレートの導入
    普通にh:include，th:replaceを使います。例えば、ヘッダファイルを作って、別のHTMLに導入する場合
    /WEBINF/templates/heater. html :

    <div th: fragment="header" >
       welcome to my homepage!
    </div>
  

  HTMLへ導入するの例は以下の通りです。

     <div th: replace=" /templates/header : : header" ></div>
  

  • th: onclick:
    クリックのイベント

    <button   th:onclick="'doClick()'"></button>
  

th:の機能がいろいろありますので、以下の例はご参考しましょう。

 <script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"
 <input  id="msg" type="hidden" th:value="${msg}" />
 <a th:remove="${status}!=0?all:none" >削除</a>
 <span th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></span>
   ．．．

• 演算子

  • 条件演算子
    条件演算子を使うと、trueの場合はvalue1を設定します、逆に、falseの場合はvalue2を設定します。

    <p th:text="true  ? 'value1': 'value2'"></p>
  

  • 論理演算子
    　論理演算を行う

   <p th:text="true && false || true and not true or !false"></p>
  

  • 算術演算子
    算術演算を行う <P th:text="(100 + 5 - 2 * 15 / 10) % 3"></P>

３．最後に

最後まで読んで頂いてとても嬉しいです！
ありがとうございました！

４．参考

以下を参考にさせていただきました。ありがとうございました。
Spring Boot总结(9)---Thymeleaf用法大全
Spring Boot で Thymeleaf 使い方メモ