【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で置換できる。

最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

リーマンショックの影響で26歳の時にIT業界から離れ、紆余曲折を経て34歳でエンジニアに復帰しました。
復帰前は開発未経験でしたが、独学した知識と面接時のコミュニケーション力で見事開発エンジニアとして復帰しました!
今はフリーランスエンジニアとして仕事をしています。

■保有資格
・Java Gold SE 11

コメント

コメント一覧 (5件)

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

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

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

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

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

  • コメントが承認制だったので
    もう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>

  • ていねいに教えてくださって、ほんとうにありがとうございます。
    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
    です。

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

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

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

コメントする

CAPTCHA


目次