Bonjour. Dans cet article, je voudrais aborder la création de la partie en-tête de l'application TODO créée avec Spring et Thymeleaf.
1: [Comprendre les super bases] Une brève description de MVC 2: [Préparer un modèle] Je veux créer un modèle avec Spring Initializr et créer un monde Hello 3: [Connexion / Paramètres / Affichage des données avec MySQL] Enregistrer les données temporaires dans MySQL-> Tout obtenir-> Afficher en haut 4: [Fonction POST] Implémentation de la fonction de publication 5: [Fonction PATCH] Basculer l'affichage TODO 6: [Easy to use JpaRepository] Implémentation de la fonction de recherche 7: [Commun avec les fragments de modèle Thymeleaf] Créer un en-tête (maintenant ici)
・ Http: // localhost: 8080 / top ・ Http: // localhost: 8080 / recherche
Actuellement, seules deux pages sont affichées de cette manière.
Dans le futur en tant que View dans cette application TODO
・ Page affichant l'erreur · Modifier la page
Sera créé, donc la zone d'affichage avant sera un total de 4 pages.
Et la spécification est que les quatre pages ont un en-tête commun.
S'il s'agit d'environ 4 pages, ce sera en HTML individuel
html
<header>....</header>
je peux ajouter
Lorsque vous souhaitez ajouter un nouveau lien à l'en-tête, vous pouvez modifier une page et il sera reflété sur toutes les pages, ce qui rend l'édition très facile.
Le fragment de modèle est une fonction de Thymeleaf qui gère le HTML que vous souhaitez partager.
Il est utilisé lors de l'affichage d'un fichier ou d'un élément HTML dans plusieurs HTML.
Je pense que cette idée est proche du concept de composants utilisés dans Vue.js et React, il peut donc être bon d'en être conscient.
Maintenant, comment utiliser des fragments de modèle
c'est
** 1. Fragmentez les éléments que vous souhaitez afficher sur plusieurs pages **
** 2. Appelez le fragment sur la page que vous souhaitez utiliser **
Il sera épuisé.
Cette fois l'en-tête
main/resources/templates/common/header.html
Créez-le avec ce chemin et fragmentez-le.
Et cela
main/resources/templates/top.html main/resources/templates/search.html
Affichons-le dans l'en-tête de!
Faisons maintenant la fragmentation.
Je vais d'abord expliquer brièvement le concept de fragmentation.
Fragment signifie * "fragment / fragment / fragment" *.
En d'autres termes, la fragmentation est une bonne image de l'enregistrement d'éléments HTML (variables) comme * une seule pièce *!
Pour les éléments que vous souhaitez partager (par exemple, en-tête)
<header th:fragment="header_fragment()>
...
</header>
th: fragment =" Nom du fragment (argument si vous voulez passer un argument)
Vous pouvez le fragmenter en faisant comme.
main/resources/templates/common/header.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header_fragment()">
<div class="text-center bg-primary">
<div class="d-flex p-3">
<p class="display-4 w-75 pl-5 mb-0 text-left font-weight-bold">
<a th:href="@{/top}" class="text-dark">Liste de choses à faire</a>
</p>
<p class="display-4 w-25 mb-0 mr-5 text-right font-weight-bold ">
<a th:href="@{/search}" class="text-dark">Chercher</a>
</p>
</div>
</div>
</header>
</html>
Comme vous pouvez le voir, cet en-tête est fragmenté en écrivant <header th: fragment =" header_fragment () ">.
Appelons cela d'un autre HTML!
main/resources/templates/top.html
<body>
<header th:replace="common/header :: header_fragment()"></header>
.....Abréviation
</header>
</body>
Ce à quoi je veux faire attention est la partie de th: replace =" .... ".
replace a la signification de * replace * et remplace littéralement l'élément HTML.
C'est donc une image qui écrase complètement. Il existe d'autres méthodes d'affichage telles que th: insert et th: include, donc si vous voulez les utiliser correctement, vous devriez les vérifier.
th: replace =" Chemin relatif du fragment que vous voulez appeler :: Nom du fragment que vous voulez appeler "
Vous pouvez appeler ce fragment en faisant!
Vous pouvez désormais appeler facilement des en-têtes communs même si le nombre de vues augmente à l'avenir!
Écrire en gros comment utiliser les fragments de modèle
-Fragmenter la vue que vous souhaitez normaliser (th: fragment)
-Appeler cette vue (th: remplacer, th: insérer, th: inclure)
Sera!
Cette fois, remplacer écrase complètement l'élément, mais en fonction des spécifications, je pense que je veux appeler quelque chose qui est en partie commun (par exemple, un bouton), alors dans ce cas, essayez d'utiliser insérer ou inclure Faisons le!