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. 

Introduction a VueJS 

- Partir d'un projet vierge 

- Importer VueJS dans une page html 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>$

- Initialiser la vue 

<script>

var app = new Vue({

    el: '#app',

    data: {

        message: 'Mes premiers pas avec Vue'

    }

});

</script>

- Lier la page html à l'objet Vue 

<div id="app">

    /p[18]/span, reference to undefined name 'message'

</div>

Que se passe t il ici? 

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 

- On va faire plus propre en séparant la vue (HTML) et le gestionnaire de vue (VueJS)

- On peut aussi enricher le model de données en y ajoutant d'autres informations 

var app = new Vue({

    el: '#app',

    data: {

        title: 'Mes premiers pas avec Vue', 

        description: 'Ici on a une page vide, mais au fur et à mesure on va y ajouter des infos'

    }

});

=====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[47]/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[58]/span, reference to undefined name 'person'</p></li>

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

    <li><p>Fullname : /p[60]/span, reference to undefined name 'person' /p[60]/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[78]/span, reference to undefined name 'person'</p>' +

        '<div>/p[79]/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: {

    ....

})