Introduction au framework VUE.JS par l'exemple

'use strict';

// imports
import qs from 'qs'

// classe [Dao]
class Dao {

  // constructeur
  constructor(axios) {
    this.axios = axios;
    // cookie de session
    this.sessionCookieName = "PHPSESSID";
    this.sessionCookie = '';
  }

  // init session
  async initSession() {
    // options de la requête HHTP [get /main.php?action=init-session&type=json]
    const options = {
      method: "GET",
      // paramètres de l'URL
      params: {
        action: 'init-session',
        type: 'json'
      }
    };
    // exécution de la requête HTTP
    return await this.getRemoteData(options);
  }

  async authentifierUtilisateur(user, password) {
    // options de la requête HHTP [post /main.php?action=authentifier-utilisateur]
    const options = {
      method: "POST",
      headers: {
        'Content-type': 'application/x-www-form-urlencoded',
      },
      // corps du POST
      data: qs.stringify({
        user: user,
        password: password
      }),
      // paramètres de l'URL
      params: {
        action: 'authentifier-utilisateur'
      }
    };
    // exécution de la requête HTTP
    return await this.getRemoteData(options);
  }

  async getAdminData() {
    // options de la requête HHTP  [get /main.php?action=get-admindata]
    const options = {
      method: "GET",
      // paramètres de l'URL
      params: {
        action: 'get-admindata'
      }
    };
    // exécution de la requête HTTP
    const data = await this.getRemoteData(options);
    // résultat
    return data;
  }

  async getRemoteData(options) {
    // pour le cookie de session
    if (!options.headers) {
      options.headers = {};
    }
    options.headers.Cookie = this.sessionCookie;
    // exécution de la requête HTTP
    let response;
    try {
      // requête asynchrone
      response = await this.axios.request('main.php', options);
    } catch (error) {
      // le paramètre [error] est une instance d'exception - elle peut avoir diverses formes
      if (error.response) {
        // la réponse du serveur est dans [error.response]
        response = error.response;
      } else {
        // on relance l'erreur
        throw error;
      }
    }
    // response est l'ensemble de la réponse HTTP du serveur (entêtes HTTP + réponse elle-même)
    // on récupère le cookie de session s'il existe
    const setCookie = response.headers['set-cookie'];
    if (setCookie) {
      // setCookie est un tableau
      // on cherche le cookie de session dans ce tableau
      let trouvé = false;
      let i = 0;
      while (!trouvé && i < setCookie.length) {
        // on cherche le cookie de session
        const results = RegExp('^(' + this.sessionCookieName + '.+?);').exec(setCookie[i]);
        if (results) {
          // on mémorise le cookie de session
          // eslint-disable-next-line require-atomic-updates
          this.sessionCookie = results[1];
          // on a trouvé
          trouvé = true;
        } else {
          // élément suivant
          i++;
        }
      }
    }
    // la réponse du serveur est dans [response.data]
    return response.data;
  }
}

// export de la classe
export default Dao;

export default {
  install(Vue, dao) {
    // ajoute une propriété [$dao] à la classe Vue
    Object.defineProperty(Vue.prototype, '$dao', {
      // lorsque Vue.$dao est référencé, on rend le 2ième paramètre [dao]
      get: () => dao,
    })
  }
}

// imports
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';

// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// couche [dao]
import Dao from './Dao';
// configuration axios
axios.defaults.timeout = 2000;
axios.defaults.baseURL = 'http://localhost/php7/scripts-web/impots/version-14';
axios.defaults.withCredentials = true;
// instanciation couche [dao]
const dao = new Dao(axios);

// plugin [dao]
import pluginDao from './plugins/dao'
Vue.use(pluginDao, dao)

// configuration
Vue.config.productionTip = false

// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div class="container">
    <b-card>
      <!-- message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-10] : plugin [dao], requêtes HTTP asynchrones</h4>
      </b-alert>
      <!-- composant faisant une requête asynchrone au serveur de calcul d'impôt-->
      <Component1 @error="doSomethingWithError" @endWaiting="endWaiting" @beginWaiting="beginWaiting" />
      <!-- affichage d'une éventuelle erreur -->
      <b-alert show
               variant="danger"
               v-if="showError">Evénement [error] intercepté par [App]. Valeur reçue = {{error}}</b-alert>
      <!-- message d'attente avec un spinner -->
      <b-alert show v-if="showWaiting" variant="light">
        <strong>Requête au serveur de calcul d'impôt en cours...</strong>
        <b-spinner variant="primary" label="Spinning"></b-spinner>
      </b-alert>
    </b-card>
  </div>
</template>

<script>
  import Component1 from "./components/Component1";
  export default {
    name: "app",
    // état du composant
    data() {
      return {
        // contrôle le spinner d'attente
        showWaiting: false,
        // contrôle l'affichage de l'erreur
        showError: false,
        // l'erreur interceptée
        error: {}
      };
    },
    // composants utilisés
    components: {
      Component1
    },
    // méthodes de gestion des évts
    methods: {
      // début attente
      beginWaiting() {
        // on affiche l'attente
        this.showWaiting = true;
        // on cache le msg d'erreur
        this.showError = false;
      },
      // fin attente
      endWaiting() {
        // on cache l'attente
        this.showWaiting = false;
      },
      // gestion d'erreur
      doSomethingWithError(error) {
        // on note qu'il y a eu erreur
        this.error = error;
        // on affiche le msg d'erreur
        this.showError = true;
      }
    }
  };
</script>

<template>
  <b-row>
    <b-col>
      <b-alert show
               variant="warning"
               v-if="showMsg">Valeur reçue du serveur = {{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    name: "component1",
    // état du composant
    data() {
      return {
        showMsg: false
      };
    },
    // méthodes de gestion des évts
    methods: {
      // traitement de la donnée reçue du serveur
      doSomethingWithData(data) {
        // on enregistre la donnée reçue
        this.data = data;
        // on l'affiche
        this.showMsg = true;
      }
    },
    // le composant vient d'être créé
    created() {
      // on initialise la session avec le serveur - requête asynchrone
      // on utilise la promesse rendue par les méthodes de la couche [dao]
      // on signale le début de l'opération
      this.$emit("beginWaiting");
      // on lance l'opération asynchrone
      this.$dao
        // il s'agit d'initialiser une session jSON avec le serveur de calcul de l'impôt
        .initSession()
        // méthode qui traite la donnée reçue en cas de succès
        .then(data => {
          // on traite la donnée reçue
          this.doSomethingWithData(data);
        })
        // méthode qui traite l'erreur en cas d'erreur
        .catch(error => {
          // on remonte l'erreur au composant parent
          this.$emit("error", error.message);
        }).finally(() => {
          // fin de l'attente
          this.$emit("endWaiting");
        })
    }
  };
</script>