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). Suivez les étapes ci-dessous :

• Reprenez le projet du TP précédent.
• Ajoutez au fichier pom.xml les dépendances suivantes :
  <!-- Pour Vue.js -->
  <dependency>
      <groupId>org.webjars.npm</groupId>
      <artifactId>vue</artifactId>
      <version>3.4.38</version>
  </dependency>
  <!-- Pour Axios -->
  <dependency>
      <groupId>org.webjars.npm</groupId>
      <artifactId>axios</artifactId>
      <version>1.7.7</version>
  </dependency>
  

• Ajoutez au fichier headers.jsp les clauses suivantes (pour que nos pages JSP soient équipées de ces deux nouvelles librairies) :
  <c:url var="vue_js" value="/webjars/vue/3.4.38/dist/vue.global.js" />
  <c:url var="axios_js" value="/webjars/axios/1.7.7/dist/axios.min.js" />
  
  ...
  <script src="${vue_js}"></script>
  <script src="${axios_js}"></script>
  ...
  

• Modifiez le fichier application.properties en ajoutant la ligne ci-dessous. Nous allons utiliser des ressources statiques (fichier Javascript) et il est nécessaire que le navigateur ne conserve pas de cache (afin de toujours utiliser la dernière version).
  spring.resources.cache.cachecontrol.max-age=0
  

• Préparez un fichier vide afin d'accueillir notre code javascript :
  src/main/resources/static/app.js

  // pour le code Javascript
  

• Préparez le fichier JSP ci-dessous:
  src/main/webapp/WEB-INF/jsp/app.jsp

  <%@ include file="/WEB-INF/jsp/header.jsp"%>
  
  <c:url var="home" value="/app" />
  <c:url var="app" value="/app.js" />
  
  <div id="myApp">
      <div class="container">
          <h1>My application</h1>
          <p>Hello.</p>
      </div>
  </div>
  <script src="${app}"></script>
  
  <%@ include file="/WEB-INF/jsp/footer.jsp"%>
  

• Ajoutez à (ou enrichissez) la classe myboot.app1.web.SpringConfiguration avec la méthode ci-dessous afin de créer des contrôleurs qui renvoient directement à des vues :
  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
      registry.addViewController("/app").setViewName("app");
  }
  

• Vérifiez que la ressource /app est accessible ainsi que le fichier javascript (/app.js).

Très rapide introduction à Vue.js

Modifions nos fichiers :

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.

...
<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>
...

...
    methods: {
        // Place pour les futures méthodes
        incCounter: function() {
            console.log("incremente le compteur ");
            this.counter++;
        }
    }
...

...
    <p>counter = {{counter}}</p>
    <p>button v-on:click="incCounter">Plus un</button></p>
...

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

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

Une application de gestion des films

Lister les données

Modifier les données

Valider côté serveur

Ajouter des films