プログラミング 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


関連記事

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

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

【Java】ListをStreamで処理する方法 7選!

概要 ListをStreamで処理する方法のうち、よく使う処理方法を掲載します。 前準備 プリミティブなListでStreamを利用するシーンをあまり想定できなかったので、オブジェクトのListでの事 …

no image

画面にonclickを書かずにイベントを発生させる方法

画面にonclickを記述すると、JavaScript側で関数名が変更になった際の修正が面倒になる。 なのでonclickを記述せずにイベントを発生させるように記述することが望ましいと子ドレビューで指 …

【Spring】バリデーション時に、入力値を保持する方法

登録画面で「登録」ボタンを押した後、 バリデーションで引っ掛かってエラーになっても 入力内容を画面に保持して置く方法についてです。 テンプレートエンジンは、Tymeleafを使用しています。 方法とし …

【Java入門】Javaの開発環境を準備しよう!

概要 これからJavaの勉強をしようとする方向けにJavaの開発環境を準備する手順をご説明します。   環境構築 Eclipseのダウンロード IDE(統合開発環境)のEclipseをダウンロードしま …

記事を探す

SpringFramworkの良書

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

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