API Rest avec Vue 3

Dans le même esprit que ce que j’ai décrit dans les articles concernant l’utilisation d’une API Rest avec les Frameworks Angular et React, on va consommer une API Rest avec cette fois-ci avec Vue 3. Pour cela, j’ai conçu une petite application, qui une fois lancée ressemble à ceci :

C’est une application plutôt simple qui nous permet de nous concentrer sur les notions élémentaires. La page d’accueil affiche une liste de contacts récupérés grâce à l’appel d’une API REST. On dispose d’un header contenant le nom de l’application ainsi que le Framework et la version utilisée, ici Vue 3.0.0. Sur la partie gauche, on a un bouton qui permet d’ajouter un contact et qui nous dirige vers une autre page. Cette page « ajouter contact » sera étudiée dans un prochain article. Sur chaque « card » contenant un contact, on a 2 icônes, une pour supprimer le contact et l’autre pour éditer ce même contact.

L’Api REST

L’API REST utilisée est une API que j’ai développé en Java avec le Framework Spring (Spring Boot), le code de l’application est disponible ici. Pour que notre application Angular affiche des données, il faudra lancer cette API en local. Par défaut, elle se lance sur le port 8080. Une fois lancée, on peut consulter les données en GET en utilisant Postman par exemple

En appelant l’url http://localhost:8080 avec la méthode GET, l’API nous renvoie un tableau de contacts avec les champs suivants : id, firstName, lastName, age.

Créer une application « from scratch »

Revenons à l’application Front, avant de s’intéresser au code, nous allons voir comment l’application a été créée. Et justement pour démarrer simplement une application « from scratch », il existe le Vue CLI. C’est un outil en ligne de commande à lancer via NPM, qui nécessite donc dans un premier temps l’installation de NodeJS. Pour créer une nouvelle application, il faut lancer la commande suivante vue create contacts-front-vue. La nouvelle application sera ainsi disponible à l’url http://localhost:8082 après avoir lancé la commande npm run serve. Pour cet article on utilisera l’application disponible sur mon github à l’adresse suivante https://github.com/rpalvair/contacts-front-vue en prenant soin de bien sélectionner la branche 01-starting-project.

Structure du dossier src

Le dossier src qui contient les composants de l’application possède cette structure:

Dans le dossier components, on retrouve les composants liés au layout de l’application. On a qu’un seul élément le header. Dans le dossier pages, on retrouve comme son l’indique les pages de l’application. Celle qui nous intéresse est la page contacts-list qui est en fait la page d’accueil :

Dépendances

Notre application a besoin de dépendances supplémentaires notamment pour la partie « design ». Nous avons besoin du Framework Bootstrap (version 4.6.0) et FontAwesome pour les icônes. Il existe un package pour faciliter l’intégration avec une application Vue https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs.

Ci-dessous les commandes pour installer les packages nécessaires :

npm i bootstrap
npm i jquery
npm i popper.js
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome@prerelease

Il faut ensuite charger Bootstrap et Font Awesome dans notre application. Pour Bootstrap, il suffit d’importer le module js ainsi que le fichier css. Pour Font Awesome, il faut enregistrer le composant FontAwesomeIcon dans notre application. De plus, il faut préciser les icônes que l’on souhaite utiliser (faTrash et faEdit) en les ajoutant à la library. Tout cela est fait dans le fichier main.js

Le Header

Le header est géré par le composant TheHeader décrit par le fichier TheHeader.vue. Ce composant affiche le nom de l’application ainsi que le nom et la version du Framework utilisé. Le nom de l’application et le nom du Framework sont « en dur » dans le template. Par contre la version est récupérée à partir du fichier package.json et est stockée dans une variable du même nom :

Dans la section script du composant, on retrouve l’attribution de la valeur à la variable version

Affichage des contacts

L’affichage sur la page d’accueil est géré dans le composant ContactsList.vue. Le chargement des contacts se fait dans la méthode created() qui est appelée une fois que le composant est initialisé (cf. cycle de vie des composants Vue):

Dans la méthode loadContacts, on va donc faire appel à notre API pour récupérer les contacts et renseigner le tableau de contacts qui est initialisé avec un tableau vide. Pour cela, on va utiliser l’API Fetch et la méthode fetch() qui prend en paramètre une url et qui retourne une Promesse (Promise). On va utiliser la méthode .then() sur la promesse afin de récupérer le résultat une fois que l’API a répondue et stocker les données dans le tableau de contacts :

J’ai créé en plus un fichier config.js qui est importé dans le composant et qui contient les urls des endpoints de l’API de contacts:

Au démarrage de l’application , les contacts sont chargés et seront affichés dans le template. Dans ce template, on a une liste de « card » qui sont des composants de Bootstrap (https://getbootstrap.com/docs/4.6/components/card/). On parcourt le tableau de contacts et pour chaque contact on affiche une « card » avec les infos du contact. On va utiliser la directive v-for pour boucler sur le tableau de contacts :

Lorsque l’on est dans une boucle, chaque élément doit avoir son attribut key renseigné avec une valeur unique. Ici la clé est l’attribut id du contact.

Pour afficher les informations, on va donc utiliser l’interpolation. Par exemple, pour afficher l’attribut firstName suivi de l’attribut lastName ,on utilise la syntaxe suivante {{contact.firstName}} {{contact.lastName}}.

On remarque la présence des icônes qui possèdent chacune un listener sur l’évènement « click » afin de déclencher l’appel de méthodes définies dans le composant. Une icône est représenté par la balise fa-icon et l’attribut icon permet de sélectionner quelle icône afficher.

Un petit mot sur la navigation

En créant notre application, Vue CLI a installé le package vue-router qui permet de gérer la navigation dans notre application. Dans le template du fichier App.vue, on retrouve l’élément <router-view></router-view> qui active les fonctionnalités de navigation.C’est aussi à cet endroit que l’on spécifie que le header (<the-header>) doit être présent sur toutes les pages:

La configuration du routeur est effectuée dans le fichier router.js. On y retrouve la configuration des routes de l’application avec le schéma classique, un path est rattaché à un composant. La route principale dont l’url pointe vers la racine de notre site, instancie le composant ContactsList. Toutes les autres routes non configurées sont redirigées vers le composant NotFound.

En conclusion

Nous avons vu dans cet article comment consommer une API Rest et afficher le résultat dans une application Vue. L’application permet également de supprimer un contact, de le modifier ou de créer un nouveau contact. Nous verrons ces différentes fonctionnalités dans de futurs articles. Nous mettrons également en place la gestion des erreurs, un système d’authentification et pleins d’autres améliorations.

Voici le lien vers l’application : https://github.com/rpalvair/contacts-front-vue/tree/01-starting-project

A très vite !