[JAVA] Thymeleaf machte HTML zu einem gemeinsamen Bestandteil, um das Design zu vereinheitlichen und die Entwicklungseffizienz zu verbessern.

In einer Spring Boot + Thymeleaf-Umgebung können mehrere Personen das Frontend entwickeln. Es ist ein Memo, dass, wenn die gleiche Struktur und das gleiche Design oft auftreten, es ein solches Problem gab und es gelöst wurde. (Selbst wenn jemand übernimmt, kann es eine Ameise sein, es zu einem gemeinsamen Teil zu machen)

Umgebung

Spring Boot: 1.3.2 RELEASE Thymeleaf: 2.14 RELEASE

Was ist Thymeleaf?

Es ist eine der Template-Engines und wird für die Verwendung in einer Java-Umgebung empfohlen. Was mir daran gefällt, ist, dass Sie die eigene Syntax von Thymeleaf in HTML einbetten können. Schreiben Sie zuerst natives HTML, bestimmen Sie grob die Struktur und das Design und brechen Sie den Code nicht zu stark Sie können es vervollständigen. (Ich habe noch nie eine andere Template-Engine verwendet ... vielleicht ist es die Welt) Es wird gesagt, dass Sie verschiedene Dinge tun können (obwohl es rau ist), indem Sie es mit Spring Boot kombinieren. Offizielle Seite: http://www.thymeleaf.org/

Herausforderungen auf dem Gebiet, auf dem ich war

Eigentlich war es etwas weniger als zwei Jahre her, und ich bin kürzlich zum Frontend zurückgekehrt und habe mich daran erinnert, also habe ich es geschrieben. Zu dieser Zeit, mitten in der Entwicklung, hatte ich die folgenden Probleme.

• Mehrere Personen haben Bildschirmvorlagen implementiert, und es gab Unterschiede in der Struktur und im Design, die jeweils implementiert wurden. (Es gab einen Kodierungsstandard, aber leider haben sich nicht alle daran gehalten, so dass es nicht realistisch war, den Standard zu verbessern (ich frage mich immer noch, ob dieses Urteil richtig war. Ich habe ihn später verbessert. Aber es hätte der erste sein sollen ...))
• Als die Anzahl der serverseitigen Entwicklungsaufgaben zunahm, war eine kleine Anzahl von Personen (Effizienz) erforderlich, um Bildschirmvorlagen zu implementieren. (Am Ende musste ich wöchentlich Dutzende von Bildschirmvorlagen selbst erstellen.)

Gemeinsame Teile aus Thymeleaf

Abschließend werde ich es so machen (ich werde die Syntax von Thymeleaf weglassen).

Anrufer

<!-- form.Text in HTML-Rufen Sie einen Teil namens form auf.
Als Argument templateId, label,Pass erforderlich.
templateId"accountName"Übergeben Sie die Zeichenfolge.
label ist msg in der Nachrichtenressource.account.Übergeben Sie die im Namen definierte Zeichenfolge.
Pass false für erforderlich-->
<div th:replace="form :: text-form(
    templateId = 'accountName',
    label      = #{msg.account.name},
    required   = false)">
</div>

Gemeinsame Teile

<!-- text-Es ist ein Teil namens Form.
Als Argument templateId, label,Empfangen erforderlich.-->
<div th:fragment="text-form(templateId, label, required)">
    <label th:for="${templateId}" th:text="${label}"></label>
    <div>
        <input type="text" th:id="${templateId}" th:name="${templateId}" th:field="*{__${templateId}__}"
               th:required="${required}? required"/>
    </div>
</div>

Tatsächlich gibt es eine CSS-Klassenanwendung und einen Javascript-Aufruf, was es kompliziert macht, aber wenn Sie gemeinsame Teile definieren, Sie können eine Struktur mit einem einheitlichen Design effizient erstellen, indem Sie einfach die erforderlichen Parameter an die erforderlichen Teile übergeben und diese aufrufen.

Probleme nach der Herstellung gemeinsamer Teile

Wir konnten das Design vereinheitlichen, Bildschirmvorlagen effizient entwickeln und wie geplant freigeben. Im Verlauf der Entwicklung traten jedoch die folgenden Probleme auf.

• Da gemeinsame Teile in Einheiten von Konstruktionsunterschieden hergestellt wurden, wurde eine große Anzahl gemeinsamer Teile erstellt, und die Kosten für die Suche nach geeigneten gemeinsamen Teilen stiegen. → Wenn Sie beispielsweise die Switch-Syntax in die allgemeinen Teile innerhalb des Bereichs schreiben, in dem sich die Argumente nicht ändern, können Sie die Anzahl der Teile reduzieren und verbessern. → Es kann sich im Wesentlichen um ein Designproblem handeln.
• Es gibt viele gemeinsame Teile, die in nicht optimalen Einheiten hergestellt werden, da wir uns nicht genügend Zeit genommen haben, um die Einheiten zu entwerfen, die als gemeinsame Teile verwendet werden sollen. → Im obigen Codebeispiel handelt es sich um eine Formulareinheit. Ist dies jedoch optimal? Für jedes Produkt sollte eine Überprüfung durchgeführt werden. → Es ist eine gute Idee, die Layout-Dialekt-Funktion (http://www.ultraq.net.nz/thymeleaf/layout) vollständig zu nutzen.

Was ich persönlich denke

• Ich denke, es gab überhaupt einen Weg zur automatischen Erzeugung → Ich hatte damals keine Ahnung, aber ... Im Moment ist die Hauptsache, es zu reparieren, aber es sollte zu dieser Zeit sehr wertvoll gewesen sein.
• Es gibt möglicherweise eine effizientere Möglichkeit, gemeinsame Teile durch Aktualisierung auf Thymeleaf 3.x zu erstellen. → Es gab einige neue Funktionen, mit denen gemeinsame Teile hergestellt werden konnten. Es ist abwärtskompatibel, sodass Sie keine Angst haben sollten