1. Übersicht
In diesem Tutorial zeigen wir Ihnen, wie Sie auf Spring MVC-Objekte in Thymeleaf-Ansichten zugreifen, die JavaScript-Code enthalten. In unseren Beispielen werden Spring Boot und die Thymeleaf-Template-Engine verwendet, aber die Idee funktioniert auch für andere Template-Engines.
Wir werden zwei Fälle beschreiben: Wenn JavaScript-Code in die von der Engine generierte Webseite eingebettet oder intern ist und wenn er sich außerhalb der Seite befindet - beispielsweise in einer separaten JavaScript-Datei.
2. Setup
Nehmen wir an, wir haben bereits eine Spring Boot-Webanwendung konfiguriert, die die Thymeleaf-Vorlagen-Engine verwendet. Andernfalls finden Sie diese Tutorials möglicherweise hilfreich, um zu beginnen:
- Bootstrap einer einfachen Anwendung - Informationen zum Erstellen einer Spring Boot-Anwendung von Grund auf neu
- Spring MVC + Thymeleaf 3.0: Neue Funktionen - Verwendung der Thymeleaf-Syntax
Angenommen, unsere Anwendung verfügt über einen Controller, der einem Endpunkt / Index entspricht , der eine Ansicht aus einer Vorlage mit dem Namen index.html rendert . Diese Vorlage kann einen eingebetteten oder einen externen JavaScript-Code enthalten, z . B. script.js .
Unser Ziel ist es, über eingebetteten oder externen JavaScript-Code (JS) auf Spring MVC-Parameter zugreifen zu können.
3. Greifen Sie auf die Parameter zu
Zunächst müssen wir die Modellvariablen, die wir verwenden möchten, aus dem JS-Code erstellen.
In Spring MVC gibt es verschiedene Möglichkeiten, dies zu tun. Verwenden wir den ModelAndView- Ansatz:
@RequestMapping("/index") public ModelAndView thymeleafView(Map model) { model.put("number", 1234); model.put("message", "Hello from Spring MVC"); return new ModelAndView("thymeleaf/index"); } Wir können andere Möglichkeiten in unserem Tutorial auf finden Modell , ModelMap und Modelview in Spring MVC.
4. Eingebetteter JS-Code
Eingebetteter JS-Code ist nichts anderes als ein Teil der Datei index.html , die sich in der Datei befindetElement. Wir können dort ganz einfach Spring MVC-Variablen übergeben:
var number = [[${number}]]; var message = "[[${message}]]"; Die Thymeleaf-Vorlagen-Engine ersetzt jeden Ausdruck durch einen Wert, der im Bereich der aktuellen Ausführung verfügbar ist. Dies bedeutet, dass die Template-Engine den oben genannten Code in den folgenden HTML-Code umwandelt:
var number = 1234; var message = "Hello from Spring MVC!"; 5. Externer JS-Code
Angenommen, unser externer JS-Code ist mit demselben in der Datei index.html enthaltenTag, in dem wir das src- Attribut angeben :
Wenn wir nun die Spring MVC-Parameter aus script.js verwenden möchten , sollten wir:
- Definieren Sie JS-Variablen in eingebettetem JS-Code wie im vorherigen Abschnitt
- Greifen Sie über die Datei script.js auf diese Variablen zu
Beachten Sie, dass der externe JS-Code nach der Initialisierung der Variablen des eingebetteten JS-Codes aufgerufen werden sollte .
Dies kann auf zwei Arten erreicht werden: durch Angabe der Reihenfolge einer JS-Codeausführung oder durch Verwendung einer asynchronen JS-Codeausführung.
5.1. Geben Sie die Ausführungsreihenfolge an
Wir können dies tun, indem wir den externen JS-Code nach dem eingebetteten in index.html deklarieren :
var number = [[${number}]]; var message = "[[${message}]]"; 5.2. Asynchrone Codeausführung
In diesem Fall spielt die Reihenfolge, in der wir den externen und eingebetteten JS-Code in der index.html deklarieren, keine Rolle, aber wir sollten den Code aus script.js in einen typischen Wrapper auf der Seite einfügen :
window.onload = function() { // JS code };Trotz der Einfachheit dieses Codes wird am häufigsten stattdessen jQuery verwendet. Wir schließen diese Bibliothek als erste einElement in der Datei index.html :
... ... Jetzt können wir den JS-Code in den folgenden jQuery- Wrapper einfügen :
$(function () { // JS code });Mit diesem Wrapper können wir garantieren, dass der JS-Code nur ausgeführt wird, wenn der gesamte Seiteninhalt und damit der gesamte andere eingebettete JS-Code vollständig geladen ist.
6. Ein bisschen Erklärung
In Spring MVC analysiert die Thymeleaf-Vorlagen-Engine nur die Vorlagendatei ( in unserem Fall index.html ) und konvertiert sie in eine HTML-Datei. Diese Datei kann wiederum Verweise auf andere Ressourcen enthalten, die außerhalb des Bereichs der Vorlagen-Engine liegen. Es ist der Browser des Benutzers, der diese Ressourcen analysiert und die HTML-Ansicht rendert.
Daher werden diese Ressourcen nicht von der Template-Engine analysiert, und wir können im Controller definierte Variablen nur in den eingebetteten JS-Code einfügen, der dann für den externen JS-Code verfügbar wird.
7. Fazit
In diesem Tutorial haben wir gelernt, wie Sie in einem JavaScript-Code auf Spring MVC-Parameter zugreifen.
Wie immer befinden sich die vollständigen Codebeispiele in unserem GitHub-Repository.