Spring BootにおけるThymeleafの使い方

7639 ワード

スプリングブック thymeleaf

Thymeleaf
Thymeleafは最近SpringBootが推奨しているテンプレートの枠です。公式サイトはthymeleaf.orgです。
私たちはなぜテンプレートエンジンとしてThymeleafを使いますか？公式サイトは非常に納得できる説明をくれました。
Thymeleaf is a moden server-side Java template engine for both web and standowne environments.>
基本的な書き方は以下のようです。


<table>
 <thead>
 <tr>
  <th th:text="#{msgs.headers.name}">Name</th>
  <th th:text="#{msgs.headers.price}">Price</th>
 </tr>
 </thead>
 <tbody>
 <tr th:each="prod: ${allProducts}">
  <td th:text="${prod.name}">Oranges</td>
  <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>
 </tr>
 </tbody>
</table>

そうです。このテンプレートはxmlの形式でファイルに埋め込まれていますので、楽屋の人にだけでなく、バックグラウンドのプログラムがない場合は直接ブラウザでレンダリングすることができます。これはブラウザで自動的に無視されます。
この属性はやはりとても人を引きつけて、結局私達は舞台裏をして最も面倒なのはめちゃくちゃなフロントのテンプレートでコードをプラスして、コードをプラスし終わった後にフロントのもプラスのコードが正しいかどうかを知らないで、先に一回走ってみないと分かりません。テンプレートファイルを直接フロントスタッフが作成すればいいです。そして、フロントスタッフが作成する時にこのコードが走るかどうかを知ることができます。
参考文献
Thymeleafのドキュメントはここにリンクされています。詳細は直接検索できます。以下は主に私がよく出会う問題を列挙します。
テンプレートの定義
私たちは多くのIDEが良いヒントを提供していますので、私たちはIDEに私たちが使っているテンプレートの仕様を教えて、彼が私たちにサービスを提供してくれるようにする必要があります。Thymeleafの一般的な規範はこうです。


<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
...
</html>

私たちが編纂したいDOMをこのhtmlタグに入れてください。
この言葉は何をしましたか？つまり、thという名前空間を定義しています。すべてのThymeleafの属性はこの名前空間の下にあります。
静的ファイルの読み込み
私たちはウェブページにロードされている静止ファイルには通常非常にばつの悪い問題があることを知っています。例えば、bootstrap.cssについては、IDEにこのファイルを認識させることができれば、相対パスを使ってこのファイルを導入しなければなりません。このように私達のIDEはこのファイルにロードできます。そして、相応のヒントをくれます。しかし、私たちが発表後にサーバーがこのファイルをロードできるようになるには、スタティックファイルをresourceまたはstaticに対する位置で導入しなければなりません。明らかに、普通の状況ではこの二つの問題を両立することはできません。編纂する時に自分に対するパスを使うしかないです。発表する時にプロジェクトの資源フォルダに対するパスを使うか、IDEの提示を放棄するしかないです。とても気まずいです。
Thymeleafでは、この点をうまく処理できます。資源を導入する時、私達は下記のコードを書くことができます。


<link rel="stylesheet" type="text/css" media="all" 
   href="../../css/gtvg.css" rel="external nofollow" th:href="@{/css/gtvg.css}" rel="external nofollow" />

バックグラウンドレンダリングがない場合、ブラウザはhrefを認識しますが、th:hrefを認識しないと、本ファイルとの相対的なパスを選択して静止ファイルをロードします。そして、私たちのIDEもこのようなロード方式を認識し、提示してくれます。
バックグラウンドにレンダリングがある場合、バックグラウンドはこのラベルをこのようにレンダリングします。


<link rel="stylesheet" type="text/css" media="all" href="/css/gtvg.css" rel="external nofollow" />

元のhrefタグはプロジェクトに対するパスに置き換えられますので、サーバーは正しいリソースを見つけて、正確にレンダリングします。
非常にスマートで便利です。
ここで注意したいのですが、すべてのパスは「@{}」で参照しています。これは変数名を参照するためのものです。前者は参照パスですので、ここでは前者を使用しています。しかし、私たちが変数にパスを書くなら、後者を使って引用します。
定数のレンダリングと文字の国際化
多くの場合、コードの中で無理にコードを入れたくないです。文字を統一されたコードにしたいです。このように管理しやすく、言語の変更も便利です。
私たちがやるべきことはまず、メッセンジャー（message au）などの言語ファイルを作成することです。chinese.properties:


title=    
message1=    2
message2=    2
....

その後、私達はapplication.propertiesリガの上でこの行にこの言語ファイルを登録します。


spring.messages.basename=message_chinese

このように、私たちはテンプレートでこのメッセージに対応する真の文字を取得することができます。


<title th:text="#{title}"></title>

変数のレンダリング
テンプレートファイルにとって、最も重要なことは変数を渡すことです。
このことはとても簡単で、主に二つのステップに分けられています。まずSpringBootのControllerでModelにパラメータを伝えます。


@Controller
public class IndexController {
 @RequestMapping(path = {"index", "/"}, method = {RequestMethod.GET})
 public String index(Model model) {
 
  model.addAttribute("var1", "value1");
  model.addAttribute("src1", "https://www.baidu.com");
  
  Map<String,Object> map=new HashMap<>();
  map.put("src1","/a.png");
  map.put("src2","/b.png");
  model.addAttribute("src", map);
  return "index";
 }
}

このようにして、私たちはテンプレートの中で、th:属性名=「$変数名」という方法で値を伝えることができます。


<span th:text="${var1}"></span>
<a th:href="${src1}" rel="external nofollow" >baidu</a>
<img th:src="${src.src1}" />

定義がはっきりしていて、類比も容易で、階層選択を支持しています。詳しくは話しません。
ループステートメント
私達が何かの書き込みを動的にロードする必要がある時、私達はよく循環文を使う必要があります。Thymeleafの循環文も簡単です。
まず、もちろんControllerで循環可能なListオブジェクトを作成し、modelに渡すことです。


@Controller
public class IndexController {
 @RequestMapping(path = {"index", "/"}, method = {RequestMethod.GET})
 public String index(Model model) {
 
  List<String> list=new ArrayList<>();
  for(int i=0;i<10;i++){
   list.add(String.valueOf(i));
  }
  model.addAttribute("list", list);
  return "index";
 }
}

そして循環が必要なところでこう使います。


<div th:each="value:${list}" th:text="${value}"></div>

このリストの要素を繰り返しレンダリングすることができます。
アクティブステートメント
アクティブステートメント（自分の名前が付けられている）とは、変数の値によって表示するか、表示しないかを選択したい場合があります。使い方も簡単です。主にth:ifとth:unlessによるものです。


<div th:if="${judge}" >if clause</div>
<div th:unless="${judge}" >unless clause</div>

judgeという変数が空でないかどうかを判断することにより、このラベルの表示を制御します。ifとunlessは反対語です。説明しません。
語句を選択
switch-case文に似ています。とても簡単です。次の例を参照してください。


<div th:switch="${user.role}">
 <p th:case="'admin'">User is an administrator</p>
 <p th:case="#{roles.manager}">User is a manager</p>
</div>

このコードはついでに細かいところを表しています。th名前空間に直接文字列を記入するには、ペアの引用符を使って引用しなければなりません。
コード分割参照
thymeleafはimportのようなものも提供しています。多くのコードブロックをモジュールに抽象化して、必要な時に引用してもいいです。具体的には、引用方式にはCreplaceとincludeがあります。
例えば二つの書類があります。


<!--footer.html-->
<div th:fragment="copy">footer</div>
<!--index.html-->
<div th:include="footer :: copy">index</div>

このようにして、私達はindexの中でfooterの中のこのdivを引用することができます。私達はincludeを使っています。だから、レンダリングの結果はこうです。


<div>
 <div th:fragment="copy">footer</div>
</div>

replaceであれば、ラベル全体の入れ替えです。よく分かります。
もちろん、参照部分をfragmentで識別する以外に、idで引用することもできます。具体的にはドキュメントを参照することができます。
時々、私たちはパラメータを引用する時に渡すことを望んでいるかもしれません。このようなパラメータを参照する時に加えることができます。


<!--index.html-->
<div th:include="footer :: copy" th:with="param=${value}" >index</div>

これでindexページのvalue変数をfooterページに転送できます。とても簡単です。
jsの坑道を引用する
時々私たちはjs変数を使ってテンプレートの伝達パラメータを保存したいです。


<script th:inline="javascript">
/*<![CDATA[*/
 ...
 var username = /*[[${session.user.name}]]*/ 'Sebastian';
 ...
/*]]>*/
</script>

注意してください。これは公式のオススメの書き方です。以下の点に注意してください。
私たちはオンラインでこのスクリプトタグを指定します。
私たちは注釈が必要です。CDATA[]>はい、そうでないとjsで比較記号が使えなくなります。
テンプレート変数を参照します。
私たちは変数の外にもコメントを付けます。また、デフォルトの値を後につけます。これはフロントエンドの開発者がバックグラウンドなしで正常にレンダリングできるようにするためです。
最後に
現在私が出会ったのは基本的に上の知識で十分解決しました。もっと高級な使い方は直接文書を読んで、その時に使ってまた0.0を追加します。
以上は小编でご绍介したSpringBootのThymeleafの使い方です。皆様に何かお聞きしたいことがあれば、メッセージをください。小编はすぐにご返事します。ここでも私たちのサイトを応援してくれてありがとうございます。

Javaスレッド譲歩動力ノードJava学院の整理

Javaスレッドが休眠します動力ノードJava学院の整理