Symfony et Vue.js — Partie 2 : Récupérer les données d’un webservice en Ajax

Si vous avez suivi la 1ere partie de cette série de tutoriaux, vous savez maintenant comment installer et configurer Webpack et Vue.js afin de pouvoir les utiliser dans le cadre d’une application Symfony. Nous allons maintenant voir comment mettre en place une communication entre le Front et le Back via des webservices et des requêtes ajax.

Création d’un webservice (simple)

Pour ce tutorial nous allons créer un webservice extrêmement simple. Celui-ci ne délivrera qu’une liste statique d’étudiants sous forme de tableau Json.

Le webservice est mis en place dans notre application Symfony et se présente sous la forme d’une action de Contrôleur. Notez l’objet JsonResponse() que l’action retourne à la place de l’objet Response() habituellement utilisé. Celui-ci va nous simplifier la vie en transformant directement le tableau PHP en objet JSON.

Pour un Webservice plus complet

Si vous désirez mettre en place un webservice plus complet qui retournerait, par exemple, des listes d’entités, je vous conseille de jeter un œil sur le composant de Serialisation Symfony. Malheureusement, ce composant mériterait plusieurs tutoriaux à lui seul donc j’ai préféré ne pas l’utiliser ici.

The Serializer Component (Symfony Docs)

Mise en place de la requête AJAX

Maintenant que nous avons un webservice basique, mettons en place le nécessaire dans notre application Vue.js afin de pouvoir effectuer des requêtes Ajax.
Commençons par récupérer le module JS Axios. C’est lui qui va s’occuper des requêtes pour nous.

yarn add axios

Pour le moment, nous allons uniquement implémenter ces requêtes dans notre composant de démo. Modifions le fichier assets/DemoComponent.vue comme ci-dessous :

Qu’avons nous fait ?

• Nous avons importé le module axios dans le composant.
• Nous avons ajouté une méthode loadStudentList() à notre composant.
• La méthode utilise axios pour effectuer une requête GET en Ajax sur l’url relative de notre webservice.
• La requête Ajax est asynchrone, alors avec la méthode then() nous implémentons un callback à exécuter lorsque la requête Ajax aura répondu.
• Enfin, dans le template nous avons ajouté un bouton qui va déclencher la méthode loadStudentList() du composant lors de son clic.

Il ne reste plus qu’à recompiler webpack-encore.

yarn encore production 

Maintenant, si nous retournons sur la page de notre application et que nous cliquons sur le bouton “Charger la liste des étudiants”, la ligne ci-dessous apparait dans la console de développement du navigateur :

(5) ["Pierre", "Sophie", "Lucy", "Marc", "Nicolas"]

C’est un bon début mais ce n’est pas utilisable dans une véritable application. Affichons plutôt le résultat de notre requête Ajax dans une liste HTML :

Qu’est-ce qui a changé ?

• Nous avons ajouté une data “studentList” à notre composant qui va stocker le résultat de notre requête Ajax.
• Une liste HTML a été ajoutée à notre template. La liste est lié à la data “studentList” et affichera automatiquement ce qu’elle contient.
• Nous avons modifié le callback de la requête ajax pour stocker le résultat dans la data “studentList”

On compile et on retourne sur la page de l’application. Maintenant lorsque nous cliquons sur le bouton “Charger la liste des étudiants”, la liste complète s’afficher directement dans notre page !

Ajouter des filtres ou des paramètres de requêtes

Maintenant que la requête fonctionne vous voulez probablement ajouter des paramètres qui vous permettrons de filtrer ce qu’elle retourne ?

Pour se faire, utilisons l’objet Symfony Request afin de récupérer un paramètre “formerStudents” dans notre action. Dans cet exemple, le paramètre est un booléen qui va ajouter à la liste initiale les étudiants des années précédentes.

Puis nous allons modifier notre composant afin d’ajouter le paramètre “formerStudents” à notre requête Ajax.

Afin de pouvoir passer d’un résultat à l’autre, ajoutons également un bouton ainsi que la fonction associée permettant de récupérer la liste complète des étudiants (actuels et anciens) :

Maintenant, la fonction loadCurrentStudentList récupèrera la liste des étudiants actuels uniquement et LoadAllStudentList récupèrera les étudiants actuels et également ceux des années précédentes.

Une fois recompilé, lorsque l’on clique sur le bouton “Charger la liste de tous les étudiants”, la liste comprenant les anciens étudiants va s’afficher.

Améliorer l’organisation de nos composants

Dans cet article, nous avons centralisé tout le traitement dans notre composant Vue.JS. Cela nous a permis de simplifier notre micro-application mais c’est une organisation un peu simpliste qui ne favorise pas le partage de données et la communication entre composants. Pour aller plus loin et travailler sur des applications plus complexes, je vous invite à lire la documentation de Vue.JS concernant l’organisation des composants.

Composants - Vue.js

C’est tout pour le moment. Si cet article vous a plus et que vous voulez en apprendre plus sur Symfony et Vue.JS n’hésitez pas à me suivre sur Medium.

Et si vous désirez me donner un petit coup de pousse et de visibilité, vous pouvez également partager cet article et laisser un “applause”.