Zugriff auf Spring MVC-Modellobjekte in JavaScript

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:

  1. Definieren Sie JS-Variablen in eingebettetem JS-Code wie im vorherigen Abschnitt
  2. 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.