プログラミング Java

【SpringBoot入門】#4~ headerの作成と埋め込み

投稿日:2020年11月28日 更新日:

概要

全ての画面で使用するヘッダーを作成します。
そして、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
-,

執筆者:


  1. 超初心者 より:

    はじめまして。
    コロナ禍でなにか役立つことができないかと考えて
    javaを独学中の主婦です。
    こちらのサイトを拝見して、わたしがつくろうとしている
    「こどものための絵本ガイド」の参考にさせていただこうと
    SpringBoot入門(書籍情報管理システム)のマニュアル通りに
    進めたのですが、この「共通ヘッダーの作成」と
    「index画面の埋め込み」でつまづきました。
    試行錯誤したのですが、根本的に理解できていないようです。

    質問は①共通ヘッダーはどこにつくればいいのですか?
       ②indexは先に作ったindex.htmlを上書きするのですか?

    初っ端からつまづいたので、また質問させていただくかもしれません。
    よろしくお願いします。

    • ログログ より:

      >①共通ヘッダーはどこにつくればいいのですか?
      以下に作成して頂ければ大丈夫です。
      src\main\resources\templates\header.html

      >②indexは先に作ったindex.htmlを上書きするのですか?
      はい。
      【SpringBoot入門】#3~ Index画面の作成で作成したものを修正して頂きます。

  2. 超初心者 より:

    コメントが承認制だったので
    もう1つ質問させてください。
    indexとcontrollerを作成した際、localhost画面がエラーになりました。
    そこでpom.xmlを少しさわってdependencyをいくつか消しました。
    そうしたら表示されたのですが、その後に行き詰り
    最初から、名前もすべてこちらのサイトの通りに作り直しました。
    すると、やはり表示されなくなりました。
    配置に問題があるかもしれません。

    配置先:プロジェクト(ここでは配置先:プロジェクト(ここではBookManagement) > src > main > java > com > example > demo > controller > IndexController.java example > demo > controller > IndexController.java

    と、ありましたが、
    わたしのは
    BookManagement > src > main > java > com > controller > IndexController.java です。

    質問を連投してしまい申し訳ありません。

    • ログログ より:

      ①エラーのに内容を見ないと何とも言えないですが、IndexControllerの@GetMapping(“/”)とreturn “index”が、
      localhost上でアクセスしているURLとindex.htmlにうまく対応していないのではないかと推測しています。

      それぞれは以下のような対応関係になっています。
      @GetMapping(“/”)
      →http://localhost:8080/ にアクセスされた場合に処理を受け付ける。

      return “index”;
      →src\main\resources\templates\index.html
      src\main\resources\templates\直下のindex.htmlファイルを参照するようにする。

      ②dependencyを消して表示されたということですが、環境構築時点で入れたものを削除する必要はないはずです。
      念のため、私の環境で設定されているpom.xmlを掲載しますので対比してご確認されてみて下さい。

      <?xml version=”1.0″ encoding=”UTF-8″?>
      <project xmlns=”http://maven.apache.org/POM/4.0.0″ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
      xsi:schemaLocation=”http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd“>
      <modelVersion>4.0.0</modelVersion>
      <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.4.2</version>
      <relativePath/> <!– lookup parent from repository –>
      </parent>
      <groupId>com.example</groupId>
      <artifactId>BookManagement</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <name>BookManagement</name>
      <description>Demo project for Spring Boot</description>
      <properties>
      <java.version>11</java.version>
      </properties>
      <dependencies>
      <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
      <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-validation</artifactId>
      </dependency>
      <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      </dependency>
      <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>2.1.4</version>
      </dependency>

      <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <scope>runtime</scope>
      <optional>true</optional>
      </dependency>
      <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <scope>runtime</scope>
      </dependency>
      <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <optional>true</optional>
      </dependency>
      <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
      </dependency>
      </dependencies>

      <build>
      <plugins>
      <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
      <configuration>
      <excludes>
      <exclude>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      </exclude>
      </excludes>
      </configuration>
      </plugin>
      </plugins>
      </build>

      </project>

  3. 超初心者 より:

    ていねいに教えてくださって、ほんとうにありがとうございます。
    pom.xmlも見せてくださり、感謝します。

    1つ1つ確認したのですが、ほぼ同じでした。
    違ったのはバージョンと表記の一部だけでした。
    (そこが重要なのかもしれませんが)

    のversionが
    わたしのは2.5.5でした。
    それからJava.versionは1.8です。

    org.mybatis.spring.boot
    mybatis-spring-boot-starter
    のversionも2.2.0で異なります。

    それから、の中の表記が

    なぜか「–」が1つずつ多くなっています。

    それ以外は同じでした。

    再度、上書きし、共通ヘッダーもつくってみたのですが
    エラーにんってしまいました。

    またエラーは
    2021-10-04 10:14:51.588 ERROR —[ restartedMain]o.s.b.d.LoggingFailureAnalysisReporter
    です。

    実は対応関係というのを、まったく理解できていないので
    そこをもう一度、調べてみようと思います。

    ほんとうにほんとうに、初心者にもわかりやすく
    ていねいに教えてくださってありがとうございます。

    ちゃんと出来上がるようにがんばります。

comment

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

CAPTCHA


関連記事

【Java入門】Predicateの使い方まとめ

概要 Predicateはtestメソッド持つ関数型インターフェースです。 引数を1つ受け取り、booleanを返します。   基本的な使い方 test(T t)には、ジェネリクスに指定する型を引数と …

no image

PHPの開発環境の作り方

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

Java Silver SE11に誰でも合格できる方法

※お断り とても基本的かつ地道な方法です。 なので、魔法や銀の弾丸を求めている方はそっとページを閉じてください。 地道にこつこつと努力できる方のみ読み進めて下さい。 対象 ・Java Silver S …

【Bootstrap】ログイン画面をデザインしよう!

概要 【SpringSecurity】#3~ 独自のログイン画面でシンプルな独自のログイン画面を実装しました。 これに、Bootstrapでデザインを施していきます。 Bootstrapのサンプルを基 …

【Java】ArrayListの最長文字列を取得する簡単な方法

(追記)2020/08/19 1. Listが空の場合(NoSuchElementException)に対応しました。 2. Nullが含まれていた場合、空文字として扱うように修正しました。 Arra …

■運営者プロフィール
IT業界10年のエンジニア。
PHP -> VBA -> Javaと渡り歩いてきて、今はJavaをメインにフリーランスエンジニアとして活躍中!

[保有資格]
・Java SE 11 Gold

一度はエンジニアを辞めざるを得なかった私が再びエンジニアとして復活した数奇な物語

SpringFramworkの良書

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

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