概要
全ての画面で使用するヘッダーを作成します。
そして、Index画面に埋め込むところまでを行います。
共通ヘッダーの作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:fragment="head(title)"> <meta charset="UTF-8"> <title th:replace="${title}">title</title> <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script> <script th:src="@{/js/dialog.js}" defer="defer"></script> </head> <body> <header th:fragment="header"> <a th:href="@{/}">ホーム</a> <a th:href="@{/book/list}">検索</a> <a th:href="@{/book/add}">新規登録</a> <hr> </header> </body> </html> |
・<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画面への埋め込み
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:replace="header::head(~{::title})"> <title>書籍管理システム</title> </head> <body> <header th:replace="header::header"></header> <div> <h1> ようこそ！<br> 書籍管理システムへ！！ </h1> </div> </body> </html> |
・<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で置換できる。
コメント
コメント一覧 （5件）
はじめまして。
コロナ禍でなにか役立つことができないかと考えて
javaを独学中の主婦です。
こちらのサイトを拝見して、わたしがつくろうとしている
「こどものための絵本ガイド」の参考にさせていただこうと
SpringBoot入門（書籍情報管理システム）のマニュアル通りに
進めたのですが、この「共通ヘッダーの作成」と
「index画面の埋め込み」でつまづきました。
試行錯誤したのですが、根本的に理解できていないようです。
質問は①共通ヘッダーはどこにつくればいいのですか？
②indexは先に作ったindex.htmlを上書きするのですか？
初っ端からつまづいたので、また質問させていただくかもしれません。
よろしくお願いします。
＞①共通ヘッダーはどこにつくればいいのですか？
以下に作成して頂ければ大丈夫です。
src\main\resources\templates\header.html
＞②indexは先に作ったindex.htmlを上書きするのですか？
はい。
【SpringBoot入門】#3~ Index画面の作成で作成したものを修正して頂きます。
コメントが承認制だったので
もう１つ質問させてください。
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も見せてくださり、感謝します。
１つ１つ確認したのですが、ほぼ同じでした。
違ったのはバージョンと表記の一部だけでした。
（そこが重要なのかもしれませんが）
のversionが
わたしのは2.5.5でした。
それからJava．versionは1.8です。
org.mybatis.spring.boot
mybatis-spring-boot-starter
のversionも2.2.0で異なります。
それから、の中の表記が
で
なぜか「–」が１つずつ多くなっています。
それ以外は同じでした。
再度、上書きし、共通ヘッダーもつくってみたのですが
エラーにんってしまいました。
またエラーは
2021-10-04 10:14:51.588 ERROR —[ restartedMain]o.s.b.d.LoggingFailureAnalysisReporter
です。
実は対応関係というのを、まったく理解できていないので
そこをもう一度、調べてみようと思います。
ほんとうにほんとうに、初心者にもわかりやすく
ていねいに教えてくださってありがとうございます。
ちゃんと出来上がるようにがんばります。