Accès aux objets de modèle Spring MVC dans JavaScript

1. Vue d'ensemble

Dans ce didacticiel, nous allons montrer comment accéder aux objets Spring MVC dans les vues Thymeleaf qui contiennent du code JavaScript. Nous utiliserons Spring Boot et le moteur de modèle Thymeleaf dans nos exemples, mais l'idée fonctionne également pour d'autres moteurs de modèle.

Nous allons décrire deux cas: lorsque le code JavaScript est intégré ou interne à la page Web générée par le moteur, et lorsqu'il est externe à la page - par exemple, dans un fichier JavaScript séparé.

2. Configuration

Supposons que nous ayons déjà configuré une application Web Spring Boot qui utilise le moteur de modèle Thymeleaf. Sinon, vous pourriez trouver ces didacticiels utiles pour démarrer:

  • Bootstrap a Simple Application - comment créer une application Spring Boot à partir de zéro
  • Spring MVC + Thymeleaf 3.0: Nouvelles fonctionnalités - sur l'utilisation de la syntaxe Thymeleaf

De plus, supposons que notre application dispose d'un contrôleur correspondant à un point de terminaison / index qui restitue une vue à partir d'un modèle nommé index.html . Ce modèle peut inclure un code JavaScript intégré ou externe, par exemple script.js .

Notre objectif est de pouvoir accéder aux paramètres Spring MVC à partir de code JavaScript (JS) intégré ou externe.

3. Accéder aux paramètres

Tout d'abord, nous devons créer les variables de modèle que nous voulons utiliser à partir du code JS.

Dans Spring MVC, il existe différentes manières de procéder. Utilisons l' approche ModelAndView :

@RequestMapping("/index") public ModelAndView thymeleafView(Map model) { model.put("number", 1234); model.put("message", "Hello from Spring MVC"); return new ModelAndView("thymeleaf/index"); } 

Nous pouvons trouver d'autres possibilités dans notre tutoriel sur Model , ModelMap et ModelView dans Spring MVC.

4. Code JS intégré

Le code JS intégré n'est rien d'autre qu'une partie du fichier index.html qui se trouve à l'intérieur duélément. Nous pouvons y passer des variables Spring MVC assez simplement:

 var number = [[${number}]]; var message = "[[${message}]]"; 

Le moteur de modèle Thymeleaf remplace chaque expression par une valeur disponible dans la portée de l'exécution en cours. Cela signifie que le moteur de modèle transforme le code mentionné ci-dessus en code HTML suivant:

 var number = 1234; var message = "Hello from Spring MVC!"; 

5. Code JS externe

Disons que notre code JS externe est inclus dans le fichier index.html en utilisant le mêmetag, dans lequel nous spécifions l' attribut src :

Maintenant, si nous voulons utiliser les paramètres Spring MVC de script.js , nous devrions:

  1. définir les variables JS dans le code JS intégré comme nous l'avons fait dans la section précédente
  2. accéder à ces variables depuis le fichier script.js

Notez que le code JS externe doit être appelé après l'initialisation des variables du code JS intégré .

Cela peut être réalisé de deux manières: en spécifiant l'ordre d'exécution d'un code JS ou en utilisant une exécution de code JS asynchrone.

5.1. Spécifiez l'ordre d'exécution

Nous pouvons le faire en déclarant le code JS externe après celui intégré dans index.html :

 var number = [[${number}]]; var message = "[[${message}]]";  

5.2. Exécution de code asynchrone

Dans ce cas, l'ordre dans lequel nous déclarons le code JS externe et intégré dans l' index.html n'a aucune importance, mais nous devrions placer le code de script.js dans un wrapper typique chargé sur la page:

window.onload = function() { // JS code };

Malgré la simplicité de ce code, la pratique la plus courante consiste à utiliser jQuery à la place. Nous incluons cette bibliothèque comme le premierélément dans le fichier index.html :

    ...  ... 

Maintenant, nous pouvons placer le code JS dans le wrapper jQuery suivant :

$(function () { // JS code });

Avec ce wrapper, nous pouvons garantir que le code JS n'est exécuté que lorsque tout le contenu de la page, et donc tout autre code JS intégré, est complètement chargé.

6. Un peu d'explication

Dans Spring MVC, le moteur de modèle Thymeleaf analyse uniquement le fichier modèle ( index.html dans notre cas) et le convertit en fichier HTML. Ce fichier, à son tour, peut inclure des références à d'autres ressources qui sont hors de la portée du moteur de modèle. C'est le navigateur de l'utilisateur qui analyse ces ressources et rend la vue HTML.

Par conséquent, ces ressources ne sont pas analysées par le moteur de modèle et nous pouvons injecter des variables définies dans le contrôleur uniquement dans le code JS intégré qui devient alors disponible pour le code JS externe.

7. Conclusion

Dans ce didacticiel, nous avons appris à accéder aux paramètres Spring MVC dans un code JavaScript.

Comme toujours, les exemples de code complets se trouvent dans notre référentiel GitHub.