Vue.js Frontend avec une base de démarrage à ressort

Vue.js Frontend with a Spring Boot Backend

1. Vue d'ensemble

Dans ce tutoriel, nous allons passer en revue un exemple d'application qui rend une seule page avec une interface Vue.js, tout en utilisant Spring Boot comme backend.

Nous utiliserons également Thymeleaf pour transmettre des informations au modèle.

2. Configuration de démarrage du printemps

L'applicationpom.xml utilise la dépendancespring-boot-starter-thymeleaf pour le rendu du modèle avec lesspring-boot-starter-web habituels:


    org.springframework.boot
    spring-boot-starter-web
    2.0.3.RELEASE


    org.springframework.boot
    spring-boot-starter-thymeleaf
    2.0.3.RELEASE

Thymeleaf recherche par défaut les modèles de vue àtemplates/, nous ajouterons unindex.html vide àsrc/main/resources/templates/index.html. Nous mettrons à jour son contenu dans la section suivante.

Enfin, notre contrôleur Spring Boot sera ensrc/main/java:

@Controller
public class MainController {
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("eventName", "FIFA 2018");
        return "index";
    }
}

Ce contrôleur restitue un modèle unique avec des données transmises à la vue via l'objet Spring Web Model à l'aide demodel.addAttribute.

Exécutons l'application en utilisant:

mvn spring-boot:run

Accédez àhttp://localhost:8080 pour voir la page d'index. Il sera vide à ce stade, bien sûr.

Notre objectif est de faire en sorte que la page imprime quelque chose comme ceci:

Name of Event: FIFA 2018

Lionel Messi
Argentina's superstar

Christiano Ronaldo
Portugal top-ranked player

3. Rendu de données à l'aide d'un composant Vue.Js

3.1. Configuration de base du modèle

Dans le modèle, chargeons Vue.js et Bootstrap (facultatif) pour rendre l'interface utilisateur:

// in head tag



//  other markup

// at end of body tag

Ici, nous chargeons Vue.js à partir d'un CDN, mais vous pouvez également l'héberger si cela est préférable.

Nous chargeons Babel dans le navigateur afin d'écrire du code compatible ES6 dans la page sans avoir à exécuter les étapes de transpilation.

Dans une application réelle, vous utiliserez probablement un processus de construction utilisant un outil tel que Webpack et Babel transpiler, au lieu d'utiliser Babel dans le navigateur.

Maintenant, sauvegardons la page et redémarrons en utilisant la commandemvn spring-boot: _run_. Nous actualisons le navigateur pour voir nos mises à jour; rien d'intéressant pour l'instant.

Ensuite, configurons un élément div vide auquel nous attacherons notre interface utilisateur:

Ensuite, nous configurons une application Vue sur la page:

Qu'est-ce qui vient de se passer? Ce code crée une application Vue sur la page. Nous l'attachons à l'élément avec le sélecteur CSS#contents.

Cela fait référence à l'élément vidediv sur la page. L'application est maintenant configurée pour utiliser Vue.js!

3.2. Affichage des données dans le modèle

Ensuite, créons un en-tête qui montre l’attribut ‘eventName’ que nous avons transmis à partir du contrôleur Spring, et restituons-le en utilisant les fonctionnalités de Thymeleaf:


    Name of Event:

Attachons maintenant un attribut ‘data' à l’application Vue pour contenir notre tableau de données de lecteur, qui est un simple tableau JSON.

Notre application Vue ressemble maintenant à ceci:

Maintenant, Vue.js connaît un attribut de données appeléplayers.

3.3. Rendu des données avec un composant Vue.js

Ensuite, créons un composant Vue.js nomméplayer-card qui ne rend qu'un seulplayer. Remember to register this component before creating the Vue app.

Sinon, Vue ne le trouvera pas:

Vue.component('player-card', {
    props: ['player'],
    template: `
        
            
                {{ player.name }}
            
            
                

                    {{ player.description }}
                
            
        
        `
});

Enfin, passons en revue l'ensemble des joueurs dans l'objet app et restituons un composantplayer-card pour chaque joueur:

La logique ici est la directive Vue appeléev-for, qui bouclera sur chaque joueur dans l'attribut de donnéesplayers et restituera unplayer-card pour chaque entrée deplayer dans un<li>élément s.

v-bind:player signifie que le composantplayer-card recevra une propriété appeléeplayer dont la valeur sera la variable de boucleplayer actuellement utilisée. v-bind:key est requis pour rendre chaque élément<li> unique.

Généralement,player.id est un bon choix car il est déjà unique.

Maintenant, si vous rechargez cette page, observez le balisage HTML généré dansdevtools, et il ressemblera à ceci:


    
        
            // contents
        
    
    
        
            // contents

Une note d'amélioration du flux de travail: il deviendra vite fastidieux de devoir redémarrer l'application et d'actualiser le navigateur chaque fois que vous apporterez une modification au code.

Par conséquent, pour vous faciliter la vie, veuillez vous référer àthis article pour savoir comment utiliser Spring Bootdevtools et redémarrer automatiquement.

4. Conclusion

Dans cet article rapide, nous avons expliqué comment configurer une application Web à l'aide de Spring Boot pour le backend et deVue.js pour le frontend. Cette recette peut constituer la base d’applications plus puissantes et évolutives, et ce n’est qu’un point de départ pour la plupart de ces applications.

Comme d'habitude, des exemples de code peuvent être trouvésover on GitHub.

TOC