[JAVA] Créez un CRUD simple avec SpringBoot + JPA + Thymeleaf ⑤ ~ Modèle commun ~

Contenu

-Suite de Dernière fois --Créez une application CRUD simple avec Spring Boot ――Cette fois, nous allons refactoriser pour faire ressortir les parties communes de Thymeleaf.

Vérifiez la situation actuelle

Jusqu'à présent, les 4 fichiers html suivants ont été créés.

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

Le contenu de la balise head est presque le même dans les quatre fichiers, comme indiqué ci-dessous.
La seule différence est le titre

<!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>
    <!--Cela dépend de la page-->
  </body>
</html>

Si vous ajoutez un nouveau chargement CSS ou JavaScript ou ajoutez une balise meta, vous devez apporter les mêmes modifications à tous les fichiers, ce qui n'est pas facile à maintenir. --Alors, extrayez la partie commune et modifiez-la pour qu'elle soit utilisée à partir de tous les fichiers.

procédure

Ajouter des dépendances (uniquement pour la série Spring Boot 2)

Ajouter des dépendances de bibliothèque à pom.xml pour maven et build.gradle pour gradle
Cela fonctionne même si ce n'est pas la série Spring Boot 1

`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')

Créer un fichier commun

--Créez un fichier appelé layout.html dans src / main / resources / templates et décrivez le contenu suivant

<!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>

-①: La différence avec les fichiers précédents est que la description suivante a été ajoutée. - xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

En ajoutant cette description, il sera possible de la traiter comme un fichier commun. ――②: le titre décrit la correspondance car vous souhaitez la modifier pour chaque page.
Le titre défini sur chaque page est attribué à $ DECORATOR_TITLE.
Le titre défini dans le fichier commun (ce fichier) est affecté à $ CONTENT_TITLE.
Dans le cas de cet exemple, le titre sera défini dans le format suivant. --Titre de chaque page --baseball --③: En ajoutant la marque <div layout: fragment =" content "> </ div>, vous pouvez remplacer le contenu de chaque page par cette partie.

Utilisation de fichiers communs

Tout d'abord, modifiez src / main / resources / templates / players / 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>
      <!--Omis parce que c'est long-->
    </div>
  </body>
</html>

--①: Les deux descriptions suivantes ont été ajoutées. - A: xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" - B: layout:decorator="layout" --A est identique au fichier commun, et en écrivant ceci, vous pouvez utiliser le fichier commun. --B spécifie le fichier commun à utiliser -Le côté droit de = correspond au nom du fichier à l'exclusion de l'extension du fichier commun --Par exemple, si le fichier commun est dans template / sample / common.html, la description de B est la suivante. - layout:decorator="sample/common"

Les gens de Spring Boot 2 travailleront tel quel, mais selon Official Sample, écrivez comme suit. - layout:decorate="~{sample/common}" -②: Le contenu de la balise head n'est que titre
Puisque la lecture de css, etc. se fait avec un fichier commun, tous sont supprimés --Title est passé ici car il définit également le contenu unique de chaque page.
Dans cet exemple, le titre est le suivant lorsqu'il est combiné avec le titre du fichier commun. - Listing Players - baseball
S'il y a du contenu que vous souhaitez décrire dans la balise head uniquement sur cette page, vous pouvez l'ajouter au contenu du fichier commun et le définir en le décrivant ici. --③: En définissant layout: fragment =" content ", le html sous cette description peut être remplacé par la partie décrite comme layout: fragment =" content " dans le fichier commun.

Apportez des modifications similaires à d'autres fichiers

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">
      <!--Omis parce que c'est long-->
    </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">
      <!--Omis parce que c'est long-->
    </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">
      <!--Omis parce que c'est long-->
    </div>
  </body>
</html>

Contrôle de fonctionnement

--OK si vous faites la même opération qu'avant