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

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

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

...
<div id="app">
{ { restaurants } }
</div>
...

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

var app = new Vue({
el: '#app',
data: {
restaurants: 'Mes premiers pas avec Vue'
}
});

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

function getRestaurants() {
fetch("/api/restaurants")
.then(response => response.json())
.then(json => {
this.restaurants = json.data
})
}

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

var app = new Vue({
el: '#app',
data: {
restaurants: 'Mes premiers pas avec Vue'
},
created() {
getRestaurants()
}
});

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.

...
<table>
<tr>
<td>ID</td>
<td>Nom</td>
<td>Cuisine</td>
</tr>
<tr v-for="restaurant in restaurants" >
<td>{ {restaurant._id} }</td>
<td>{ {restaurant.name} }</td>
<td>{ {restaurant.cuisine} }</td>
</tr>
</table>
...

5. Raffraichir la page.

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

7. Ajouter un champ de recherche, permettant de rechercher les restaurants par nom

8. Ajouter deux autres colonnes contenant respectivement les actions supprimer et modifier et exécuter l'action appropriée quand l'utilisateur clique sur un bouton

9. Ajouter une nouvelle page html (detail.html) pour afficher les détails d'un restaurant connaissant son id

10. Remplacer la première colonne du tableau par un lien détail (au lieu de l'id) et afficher la page créée en 9 quand l'utilisateur clique sur le lien.

Récupéré depuis "http://miageprojet2.unice.fr/User:EdouardAmosse/Introduction_NodeJS/TP4_:_Consommer_les_APIs_(Node_JS)_avec_VueJS"