Spring Boot 基本

Spring BootのWEB画面上にThymeleafのfragmentを利用してみた

Thymeleafのfragmentを利用すると、サイトの共通部分を別ファイルに切り出すことができる。今回は、fragmentを利用したサンプルプログラムを作成してみたので、共有する。

前提条件

下記記事の実装が完了していること。

IntelliJ IDEA上でGradleを使ってWeb画面のSpring Bootプロジェクトを作成してみたSpring Bootのプロジェクトを新規作成を「IntelliJ IDEA」のメニューから実施しようとしたところ、無料の「Commun...

サンプルプログラムの作成

作成したサンプルプログラムの構成は以下の通り。
サンプルプログラムの構成
なお、上記の赤枠は、前提条件のプログラムから変更したプログラムである。

fragmentを定義しているHTMLファイルの内容は以下の通りで、th:fragmentタグ内で、サイトの共通部分を記載している。

また、index.htmlの内容は以下の通りで、「th:insert=”(fragmentを定義しているHTMLファイル名):: (fragmentタグ名)”」によって、サイトの共通部分を読み込んでいる。



その他、コントローラクラスの内容は以下の通りで、「body-tag」フラグメント内の「isBodyTag」の値を定義している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-thymeleaf-fragment/demo

サンプルプログラムの実行結果

Spring Bootアプリケーションを起動し、「http:// (ホスト名):(ポート番号)」とアクセスすると、以下の画面が表示される。
サンプルプログラムの実行結果

その他、ヘッダー、フッターを読み込む実装方法については、以下のサイトが参考になる。
https://qiita.com/tamorieeeen/items/4bc818e18f4ff8bdf0c2

要点まとめ

  • Thymeleafのfragmentを利用すると、サイトの共通部分を別ファイルに切り出すことができる。
  • fragmentを利用するには、th:fragmentタグ内でサイトの共通部分を記載し、th:insertタグ内でサイトの共通部分を読み込めば良い。