プログラミング Java

【SpringBootチュートリアル】#4~ headerの作成と埋め込み

投稿日:

概要

全ての画面で使用するヘッダーを作成します。
そして、Index画面に埋め込むところまでを行います。

共通ヘッダーの作成

・<head th:fragment="head(title)">
 headタグをheadというフラグメント名で埋め込む指定です。
 titleは呼び出し元から受け取る引数になります。

・<title th:replace="${title}">title</title>
 th:fragment=”head(title)” で受け取った引数(title)で、${title}を置換します。

・scriptタグではjQueryを使えるようにしています。

・<header th:fragment="header">
 headerタグをheaderというフラグメント名で埋め込めるようにします。
 
 

Index画面への埋め込み

・<head th:replace="header::head(~{::title})">
 header.htmlのth:fragment=header(title)を、index.htmlのheaderタグと置換(replace)します。
 その際、index.html内のtitleタグを引数に与える(~{::title})ことで、「書籍管理システム」が設定されます。

・<header th:replace="header::header"></header>
 これで、header.htmlのheaderタグがindex.htmlのheaderタグとして置換されます。

作成イメージ

title:index.htmlのtitleタグの内容が、header.htmlの引数に渡されて設定できています。
header:index.htmlに、header.htmlのheaderが埋め込まれています。


 

まとめ

・画面内をth:fragmentで部分的に定義することができる。
・埋め込み側では、部分的に定義した画面の一部をth:replaceで置換できる。

-プログラミング, Java
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

【Node.js】Excel⇔JSON変換する方法

やること 1.ExcelファイルをJSONで取得。 2.JSONの編集後、新しいExcelファイルに出力する。 環境 Node.js ・インストール  https://nodejs.org/ja/   …

【Java】オブジェクト指向の練習題材(会員オブジェクト)

前回記事、オブジェクト指向とは何なのかを簡単に説明してみるの練習題材です。   仕様 以下の会員クラスを作成し、Mainクラスで表示する。 会員クラスには、「会員」という単位で持つことできる …

【Javaサンプル】自動販売機(Level4) ドメイン駆動

前回(Level3) Level3ではクラス分けすることを行いました。 しかし、私の目指すところのドメイン駆動開発になっていません。 また、ロジックもまだまだ複雑さが残っており、ぱっと見て何をやってい …

no image

PHPの開発環境の作り方

前提 OS:Windows10 準備 XAMPPのダウンロード https://www.apachefriends.org/jp/download.html 構築 XAMPPのインストール インストー …

【SpringBootチュートリアル】#10~ 更新機能の実装

概要 既に登録済みの書籍情報を画面上で編集し、更新する処理を実装します。 更新した内容が反映されていることを確認するところまでを行います。   フロントエンド 更新情報のリクエスト edit.html …

記事を探す

SpringFramworkの良書

■おすすめ教材
Javaの基本を学んだ人が、次のステップとして読む本(中級者向け)

※SpringはJavaのFrameworkの1つです。
変更のしやすさ、保守性の高さが特徴です。