Mise en place d'une API Rest avec Spring

Créer un client en Vue.js

Nous avons déjà créé des clients en ligne de commande (curl) et en Java (RestTemplate). Nous allons maintenant créer une application WEB côté client en Vue.js et Axios (pour le lancement des requêtes Rest).

Préalables

Très rapide introduction à Vue.js

Modifions nos fichiers :

app.js 
const myApp = {

    // Préparation des données
    data() {
        console.log("data");
        return {
            counter: 1,
            message: "Hello",
            list: [10, 20, 30],
            axios: null,
        }
    },

    // Mise en place de l'application
    mounted() {
        console.log("Mounted ");
        this.axios = axios.create({
            baseURL: 'http://localhost:8081/api/',
            timeout: 1000,
            headers: { 'Content-Type': 'application/json' },
        });
    },

    methods: {
        // Place pour les futures méthodes
    }
}

Vue.createApp(myApp).mount('#myApp');

L'application Vue.js est créée par la dernière ligne. Elle va gérer l'élément identifié par myApp. Elle prépare des données data(), elle s'initialise mounted(), et elle prévoie des méthodes.

app.jsp 
...
<div id="myApp">
    <div class="container">
        <h1>My application</h1>
        <p>{{ message }}</p>
        <p>list = <span v-for="element in list">{{element}} - </span></p>
        <p>counter = {{counter}}</p>
    </div>
</div>
...

La page HTML (générée par la page JSP) une fois chargée par le client va initialiser Vue.js et ce dernier va remplacer {{ message }} par le contenu de la donnée en question. La mise à jour sera automatique si la donnée est modifiée. Vous remarquerez la facilité avec laquelle nous pouvons itérer sur une collection afin de générer plusieurs éléments HTML (affichage de la liste).

Vérifiez dans la console Javscript de votre navigateur les messages générés.

Ajoutons un bouton (en HTML) et une méthode (en JS) pour incrémenter le compteur :

app.js 
...
    methods: {
        // Place pour les futures méthodes
        incCounter: function() {
            console.log("incremente le compteur ");
            this.counter++;
        }
    }
...
app.jsp 
...
<div id="myApp">
    <div class="container">
        <h1>My application</h1>
        <p>{{ message }}</p>
        <p>counter = {{counter}}</p>
        <p>list = <span v-for="element in list">{{element}} - </span></p>
        <button v-on:click="incCounter">Plus un</button>
    </div>
</div>
...

Nous pouvons donc capter les évènements JS et leur associer des méthodes Vue.js qui agissent sur les données (ce qui provoque une mise à jour). À titre d'exemple, testez le traitement ci-dessous de l'évènement mouseover.

app.jsp 
...
    <span v-on:mouseover="incCounter">Il faut me survoler</span>
...

À faire : Prévoir un argument step à la méthode incCounter et mettez en place deux boutons pour augmenter le counter de 1 ou de 2.

À faire : Ajoutez le code suivant après l'incrémentation et vérifiez le résultat (la lecture asynchrone du résultat de la requête GET /movies/1 provoque la mise à jour de l'affichage).

app.js 
this.axios.get('/movies/1')
    .then(r => {
        console.log("read movie 1 done");
        this.message = r.data;
    });

Une application de gestion des films

Travail à faire :

Modifier les données

Nous allons maintenant éditer un film :

Utiliser la validation côté serveur

Afin d'éviter une double validation (côté JS et côté serveur), nous allons utiliser la validation côté API REST. Pour ce faire, il est nécessaire de

Ajouter des films

Modifiez votre application afin d'offrir la fonction d'ajout d'un nouveau film (à ajouter dans le menu).