Erstellen Sie eine TODO-App in Java 7 Create Header

Hallo. In diesem Artikel möchte ich auf die Erstellung des Header-Teils der mit Spring und Thymeleaf erstellten TODO-Anwendung eingehen.

Linkerfassung zur Erstellung von TODO-Anwendungen

1: [Grundlegendes zu den Super-Grundlagen] Eine kurze Beschreibung von MVC 2: [Vorlage vorbereiten] Ich möchte eine Vorlage mit Spring Initializr erstellen und eine Hallo-Welt erstellen 3: [Verbindung / Einstellungen / Datenanzeige mit MySQL] Temporäre Daten in MySQL speichern-> Alle abrufen-> Oben anzeigen 4: [POST-Funktion] Implementierung der Posting-Funktion 5: [PATCH-Funktion] TODO-Anzeige umschalten 6: [Einfach zu verwendendes JpaRepository] Implementierung der Suchfunktion 7: [Häufig mit Thymeleaf-Vorlagenfragmenten] Header erstellen (jetzt hier)

Aktuelle Seitenstruktur

・ Http: // localhost: 8080 / top ・ Http: // localhost: 8080 / search

Derzeit werden auf diese Weise nur zwei Seiten angezeigt.

In Zukunft als Ansicht in dieser TODO-App

・ Seite mit dem Fehler · Seite bearbeiten

Wird erstellt, sodass der vordere Anzeigebereich insgesamt 4 Seiten umfasst.

Und die Spezifikation ist, dass alle vier Seiten einen gemeinsamen Header haben.

Wenn es ungefähr 4 Seiten sind, wird es in individuellem HTML sein

`html`


<header>....</header>

ich kann hinzufügen

Wenn Sie der Kopfzeile einen neuen Link hinzufügen möchten, können Sie eine Seite bearbeiten. Diese wird auf allen Seiten angezeigt, was die Bearbeitung sehr einfach macht.

Was ist ein Vorlagenfragment?

Das Vorlagenfragment ist eine Funktion von Thymeleaf, die HTML verwaltet, das Sie freigeben möchten.

Es wird verwendet, wenn eine HTML-Datei oder ein HTML-Element in mehreren HTML-Dateien angezeigt wird.

Ich denke, diese Idee kommt dem Konzept der in Vue.js und React verwendeten Komponenten nahe, daher ist es möglicherweise gut, sich dessen bewusst zu sein.

Nun, wie man Vorlagenfragmente verwendet

das ist

** 1. Fragmentieren Sie die Elemente, die Sie auf mehreren Seiten anzeigen möchten **

** 2. Rufen Sie das Fragment auf der Seite auf, die Sie verwenden möchten **

Es wird erschöpft sein.

Positionsbeziehung von HTML-Dateien

Diesmal der Header

main/resources/templates/common/header.html

Erstellen Sie es mit diesem Pfad und fragmentieren Sie es.

Und das

main/resources/templates/top.html main/resources/templates/search.html

Lassen Sie es uns in der Kopfzeile von anzeigen!

HTML-Elemente fragmentieren

Lassen Sie uns nun fragmentieren.

Zunächst werde ich kurz das Konzept der Fragmentierung erläutern.

Was bedeutet Fragmentierung?

Fragment bedeutet * "Fragment / Fragment / Fragment" *.

Mit anderen Worten, Fragmentierung ist ein gutes Bild für die Registrierung (variabler) HTML-Elemente als * ein Stück *!

Wie man fragmentiert

Für Elemente, die Sie freigeben möchten (z. B. Header)

<header th:fragment="header_fragment()>
  ...
</header>

th: fragment =" Fragmentname (Argument, wenn Sie ein Argument übergeben möchten)

Sie können es fragmentieren, indem Sie wie folgt vorgehen.

Versuchen Sie, den Header zu fragmentieren

`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">Aufgabenliste</a>
                </p>
                <p class="display-4 w-25 mb-0 mr-5 text-right font-weight-bold ">
                    <a th:href="@{/search}" class="text-dark">Suche</a>
                </p>
            </div>
        </div>
    </header>
</html>

Wie Sie sehen können, wird dieser Header durch Schreiben von "

" fragmentiert.

Nennen wir dies aus einem anderen HTML!

Fragmentieren und rufen Sie View aus einem anderen HTML-Code auf.

`main/resources/templates/top.html`


<body>
  <header th:replace="common/header :: header_fragment()"></header>
    .....Abkürzung
  </header>
</body>

Was ich beachten möchte, ist der Teil von th: replace =" .... ".

Ersetzen hat die Bedeutung von * Ersetzen * und ersetzt buchstäblich das HTML-Element.

Es ist also ein Bild, das völlig überschreibt. Es gibt andere Anzeigemethoden wie "th: insert" und "th: include". Wenn Sie sie also richtig verwenden möchten, sollten Sie sie überprüfen.

th: replace =" Relativer Pfad des Fragments, das Sie aufrufen möchten :: Fragmentname, den Sie aufrufen möchten "

Sie können dieses Fragment aufrufen, indem Sie!

Jetzt können Sie problemlos allgemeine Header aufrufen, auch wenn die Anzahl der Aufrufe in Zukunft zunimmt!

Zusammenfassung

Grob schreiben, wie Vorlagenfragmente verwendet werden

-Fragmentieren Sie die Ansicht, die Sie standardisieren möchten (th: fragment)

Rufen Sie diese Ansicht auf (th: replace, th: insert, th: include)

Wird sein!

Dieses Mal überschreibt Ersetzen das Element vollständig, aber abhängig von den Spezifikationen denke ich, dass ich etwas aufrufen möchte, das teilweise üblich ist (z. B. eine Schaltfläche). Versuchen Sie in diesem Fall, Einfügen oder Einschließen zu verwenden. Machen wir das!