[JAVA] Erstellen Sie eine einfache CRUD mit SpringBoot + JPA + Thymeleaf ⑤ ~ Common template ~

Inhalt

Fortsetzung von Letztes Mal --Erstellen Sie eine einfache CRUD-App mit Spring Boot ――Dieses Mal werden wir die gemeinsamen Teile von Thymeleaf herausarbeiten.

Überprüfen Sie die aktuelle Situation

Bisher wurden die folgenden 4 HTML-Dateien erstellt.

src/main/resources/templates
└── players
    ├── edit.html
    ├── index.html
    ├── new.html
    └── show.html

Der Inhalt des Head-Tags ist in allen vier Dateien fast gleich, wie unten gezeigt.
Der einzige Unterschied ist der Titel

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>XXXX - baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <!--Dies hängt von der Seite ab-->
  </body>
</html>

Wenn Sie eine neue CSS- oder JavaScript-Last hinzufügen oder ein Meta-Tag hinzufügen, müssen Sie an allen Dateien dieselben Änderungen vornehmen, was nicht einfach zu warten ist.
Also ziehe ich den gemeinsamen Teil heraus und ändere ihn so, dass er aus allen Dateien verwendet wird

Verfahren

Abhängigkeiten hinzufügen (nur für Spring Boot 2-Serien)

Fügen Sie Bibliotheksabhängigkeiten zu pom.xml für maven und build.gradle für gradle hinzu
Es funktioniert auch, wenn es sich nicht um die Spring Boot 1-Serie handelt

`pom.xml`


<dependency>
  <groupId>nz.net.ultraq.thymeleaf</groupId>
  <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

`build.gradle`


compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect')

Gemeinsame Datei erstellen

--Erstellen Sie eine Datei mit dem Namen "layout.html" in "src / main / resources / templates" und beschreiben Sie den folgenden Inhalt

<!DOCTYPE html>
<!-- ① -->
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>
    <meta charset="utf-8" />
    <!-- ② -->
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <!-- ③ -->
    <div layout:fragment="content"></div>
  </body>
</html>

-①: Der Unterschied zu den vorherigen Dateien besteht darin, dass die folgende Beschreibung hinzugefügt wurde. - xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

Durch Hinzufügen dieser Beschreibung wird es möglich sein, sie als gemeinsame Datei zu behandeln. ――②: Da Sie den Titel für jede Seite ändern möchten, wird die Korrespondenz beschrieben.
Der auf jeder Seite definierte Titel wird "$ DECORATOR_TITLE" zugewiesen.
Der in der allgemeinen Datei (dieser Datei) definierte Titel wird "$ CONTENT_TITLE" zugewiesen.
In diesem Beispiel wird der Titel im folgenden Format festgelegt. --Titel jeder Seite --baseball --③: Durch Hinzufügen der Markierung <div layout: fragment =" content "> </ div> können Sie den Inhalt jeder Seite durch diesen Teil ersetzen.

Verwendung allgemeiner Dateien

Ändern Sie zunächst src / main / resources / templates / player / index.html

<!DOCTYPE html>
<!-- ① -->
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
  <head>
    <!-- ② -->
    <title>Listing Players</title>
  </head>
  <body>
    <!-- ③ -->
    <div class="container" layout:fragment="content">
      <h1>Listing Players</h1>
      <!--Weggelassen, weil es lang ist-->
    </div>
  </body>
</html>

--①: Die folgenden zwei Beschreibungen wurden hinzugefügt. - A: xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" - B: layout:decorator="layout" --A ist dasselbe wie die allgemeine Datei. Wenn Sie dies schreiben, können Sie die allgemeine Datei verwenden. --B gibt die zu verwendende allgemeine Datei an -Die rechte Seite von = entspricht dem Dateinamen mit Ausnahme der Erweiterung der allgemeinen Datei

Wenn sich die gemeinsame Datei beispielsweise in "template / sample / common.html" befindet, lautet die Beschreibung von B wie folgt. - layout:decorator="sample/common" --Spring Boot 2-Personen funktionieren wie sie sind, schreiben jedoch gemäß Official Sample wie folgt. - layout:decorate="~{sample/common}" -②: Der Inhalt des Head-Tags ist nur Titel
Da das Lesen von CSS usw. mit einer gemeinsamen Datei erfolgt, werden alle gelöscht
Der Titel wird hier übergeben, da der Inhalt für jede Seite eindeutig festgelegt wird.
In diesem Beispiel lautet der Titel in Kombination mit dem Titel der allgemeinen Datei wie folgt. - Listing Players - baseball
Wenn es nur auf dieser Seite Inhalte gibt, die Sie im Head-Tag beschreiben möchten, können Sie sie zum Inhalt der allgemeinen Datei hinzufügen und definieren, indem Sie sie hier beschreiben. --③: Durch Setzen von layout: fragment =" content " kann der HTML-Code unter dieser Beschreibung durch den Teil ersetzt werden, der in der allgemeinen Datei als layout: fragment =" content " beschrieben wird.

Nehmen Sie ähnliche Änderungen an anderen Dateien vor

src/main/resources/templates/players/new.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
  <head>
    <title>New Player</title>
  </head>
  <body>
    <div class="container" layout:fragment="content">
      <!--Weggelassen, weil es lang ist-->
    </div>
  </body>
</html>

src/main/resources/templates/players/edit.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
  <head>
    <title>Editing Player</title>
  </head>
  <body>
    <div class="container" layout:fragment="content">
      <!--Weggelassen, weil es lang ist-->
    </div>
  </body>
</html>

src/main/resources/templates/players/show.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
  <head>
    <title>Show Player</title>
  </head>
  <body>
    <div class="container" layout:fragment="content">
      <!--Weggelassen, weil es lang ist-->
    </div>
  </body>
</html>

Funktionsprüfung

--OK, wenn Sie den gleichen Vorgang wie zuvor ausführen