TP4 : Consommer les APIs (Node JS) avec VueJS

Vue est un framework progressif permettant de gérer aisément la relation entre les données et la vue dans une page web. Vue peut être appliqué sur la totalité d'un projet ou une partie. Voir le site officiel de vue pour plus de détails https://vuejs.org/v2/guide/ 

Dans ce TP, nous allons utiliser Vue pour consommer les APIs développées en Nod JS. 

A. Configuration du framework NodJS

1. Créer une nouvelle page HTML (restaurants.html) en prenant soin d'y ajouter les balises html minimales (html, head, body, ...) 

2. Importer le framework Vue dans la page créée à l'étape 2

 

3. Entre les balises body de la page html, ajouter une balise <div> dont l'id vaut app

4. Créer un ficher Javascript (restaurant.js) et ajouter les instructions ci-après

 

5. Importer le fichier restaurant.js dans la page HTML (restaurant.html)

6. Afficher la page restaurant.html dans un navigateur, que remarquez-vous ? 

7. Afficher la console du browser (CTRL + SHIFT + I sur Chrome)

8. Dans la console Java Script du browser, changer la valeur de l'attribut restaurants (ex app.restaurants = "Nouvelle valeur"); que remarquez-vous ? 

Remarque : Vue fait la liaison entre la vue et le DOM. Par exemple, si on change le message, la vue sera modifiée aussi et inversement. 

B. Consommer les données de l'API Node JS

Dans cette section, nous allons récupérer la liste des restaurants du serveur afin de les afficher dans un tableau. 

1. Modifier le fichier restaurant.js en y ajoutant une méthode getRestaurants permettant de récupérer la liste des restaurants 

2. Indiquer à Vue de charger la liste des restaurants à la création de l'application. Pour cela, il faut s'abonner à l'événement created de Vue 

3. Raffraichir la page dans le navigateur, que remarquez-vous ? 

4. Dans le fichier HTML, ajouter un tableau et remplir le tableau avec les données retournées par le serveur. 

 

5. Raffraichir la page. 

6. Ajouter deux nouvelles colonnes pour afficher l'adresse ainsi que la localité du restaurant.

7. Ajouter deux autres colonnes contenant respectivement les actions supprimer et modifier. 

 

=====Les directives Vue =======

- On peut binder des attributs dans un champ de text 

<div id="app">

    <input type="text" v-model="title"/>

</div>

Le binding se fait dans les deux sens - modifier le text dans la console le champ est modifié et vice-versa 

---v-for---

Permet d'itérer sur une liste d'éléments

var app = new Vue({

    el: '#app',

    data: {

        days: ["Lundi", "Mardi", "Mercredi", "Jeudi"]

    }

});

<div id="app">

 <ul v-for="day in days">

        <li>/p[42]/span, reference to undefined name 'day'</li>

 </ul>

 </div>

L'object peut être un peu plus complexe 

var app = new Vue({

    el: '#app',

    data: {

        people: [{firstname: "Pierre", lastname: "Lefont"}, {firstname: "Marlène", lastname: "Sasoeur"}]

    }

});

<ul v-for="person in people">

    <li><p>Firstname : /p[53]/span, reference to undefined name 'person'</p></li>

    <li><p>Lastname : /p[54]/span, reference to undefined name 'person'</p></li>

    <li><p>Fullname : /p[55]/span, reference to undefined name 'person' /p[55]/span[2], reference to undefined name 'person'</p></li>

</ul>

--Les événements -----

var app = new Vue({

    el: '#app',

    methods: {

        sayAllo: function() {

            alert("Tick click");

        }

    }

});

<input type="button" v-on:click="sayAllo" value="Click me"/>

--- Créer des composants ----

Les composants permettent de regroupper des éléments dans un template afin de pouvoir les réutiliser au besoin. 

Nous reprenons l'exemple de la liste des personnes. Cette fois, nous allons  créer un composant qui créera le template d'affichage d'une personne. 

Vue.component('person-item', {

    props: ['person'],

    template: '<li> ' +

        '<p>/p[73]/span, reference to undefined name 'person'</p>' +

        '<div>/p[74]/span, reference to undefined name 'person'</div>' +

        '</li>'

});

var app = new Vue({

    el: '#app',

    data: {

        people: [{firstname: "Pierre", bio: "Lorem ipsum dolor"}, {firstname: "Marlène", bio: "Lorem ipsum dolor mat trels"}]

    }

});

<div id="app">

    <ul v-for="person in people">

        <person-item v-bind:person="person"></person-item>

    </ul>

</div>

---Avez-vous remarqué l'attribut v-bind? 

Il permet de binder (comme son nom l'indique) des attributs d'un élément. 

Exercice 

Créer une todo-list 

1. Un champ permettant d'ajouter une tâche 

2. un bouton, permettant de sauvegarder la tache

3. Afficher les tâches dans une liste 

4. Supprimer une tâche quand on clique dessus 

Pour aller plus loin, 

5. ajouter des status à une tâche (à réaliser, réaliser, annuler, ...)

6. changer le statut d'une tâche (en utilisant un selecteur par exemple)

7. Afficher le nombre de tâcches restantes pour chaque statut

8. Ajouter un peu de CSS 

 

------ Utilisation d'un Webservice REST avec VueJS ------

Plusieurs possibilités:

- XHR: https://www.html5rocks.com/en/tutorials/file/xhr2/

- Fetch: https://davidwalsh.name/fetch

- Appolo: https://github.com/apollographql/apollo-client

 

Nous allons expérimenter le premier 

 

fetch('url')

   .then(response => {

     return response.json(); // transforme le json texte en objet js

   })

   .then(data => { // data c'est l'objet ci-dessus (json devenu obj)

     //console.log(data[0].title);

     this.todos = data;

   }).catch(err => {

     console.log("erreur dans le get : " + err)

   });

 

On va modifier un peut notre todo-list en récupérant une fake list de toto en via un Webservice (https://jsonplaceholder.typicode.com/todos)

 

- créer une méthode pour charger la list des todos

methods: {

    getDataFromServer: function() {

      console.log("--- GETTING DATA ---");

       fetch('https://jsonplaceholder.typicode.com/todos')

       .then(response => {

         return response.json(); // transforme le json texte en objet js

       })

       .then(data => { // data c'est l'objet ci-dessus (json devenu obj)

         //console.log(data[0].title);

         this.todos = data;

       }).catch(err => {

         console.log("erreur dans le get : " + err)

       });

 

    }, 

    ...

}

 

- on veut charger la liste des todos à l'instantiation de l'application; pour cela nous allons utiliser l'événement mounted de Vue 

cet evenement se déclenche quand l'application est initialisé et offre la possibilité d'effecuter des actions supplémentaires. 

Dans notre cas, nous allons indiquer a Vue qu'il faut charger la liste des todos du serveur puis les afficher. 

 

 

new Vue({

  ...

   mounted() { 

     this.get();

  },

  methods: {

    ....

})