Skip to content

12. Projekt [vuejs-10]: Plugin [dao], asynchrone Abfragen HTTP

Die Projektstruktur von [vuejs-10] sieht wie folgt aus:

Image

Das Projekt [vuejs-10] zeigt eine Komponente, die eine Anfrage HTTP an einen Remote-Server sendet. Die verwendete Architektur sieht wie folgt aus:

Image

Eine Komponente [Vue.js] nutzt die Schicht [dao], um mit dem Steuerberechnungsserver zu kommunizieren.

12.1. Installation der Abhängigkeiten

Die Anwendung [vuejs-10] nutzt die Bibliothek [axios], um asynchrone Abfragen an den Steuerberechnungsserver zu senden. Wir müssen diese Abhängigkeit installieren:

Image

  • in [4-5], die Zeile, die nach der Installation der Bibliothek [axios] zur Datei [package.json] hinzugefügt wurde: [1-3];

12.2. Die Klasse [Dao]

Die Klasse [Dao] ist diejenige, die im Abschnitt [La classe Dao] entwickelt wurde. Wir geben sie hier zur Erinnerung noch einmal wieder:


'use strict';

// Importe
import qs from 'qs'

// Klasse [Dao]
class Dao {

  // Konstruktor
  constructor(axios) {
    this.axios = axios;
    // Sitzungs-Cookie
    this.sessionCookieName = "PHPSESSID";
    this.sessionCookie = '';
  }

  // Sitzung initialisieren
  async  initSession() {
    // Anfrageoptionen HHTP [get /main.php?action=init-session&type=json]
    const options = {
      method: "GET",
      // Parameter der Abfrage URL
      params: {
        action: 'init-session',
        type: 'json'
      }
    };
    // Ausführung der Abfrage HTTP
    return await this.getRemoteData(options);
  }

  async  authentifierUtilisateur(user, password) {
    // Optionen der Abfrage HHTP [post /main.php?action=authentifier-utilisateur]
    const options = {
      method: "POST",
      headers: {
        'Content-Type: 'application/x-www-form-urlencoded',
      },
      // Hauptteil des POST
      data: qs.stringify({
        user: user,
        password: password
      }),
      // Parameter der URL
      params: {
        action: 'authentifier-utilisateur'
      }
    };
    // Ausführung der Abfrage HTTP
    return await this.getRemoteData(options);
  }

  async getAdminData() {
    // Optionen der Abfrage HHTP  [get /main.php?action=get-admindata]
    const options = {
      method: "GET",
      // Parameter der Abfrage URL
      params: {
        action: 'get-admindata'
      }
    };
    // Ausführung der Abfrage HTTP
    const data = await this.getRemoteData(options);
    // Ergebnis
    return data;
  }

  async  getRemoteData(options) {
    // für das Sitzungs-Cookie
    if (!options.headers) {
      options.headers = {};
    }
    options.headers.Cookie = this.sessionCookie;
    // Ausführung der Abfrage HTTP
    let response;
    try {
      // asynchrone Anfrage
      response = await this.axios.request('main.php', options);
    } catch (error) {
      // Der Parameter [error] ist eine Ausnahmeinstanz – er kann verschiedene Formen annehmen
      if (error.response) {
        // Die Antwort des Servers befindet sich in [error.response]
        response = error.response;
      } else {
        // Der Fehler wird erneut ausgelöst
        throw error;
      }
    }
    // „response“ ist die gesamte Antwort HTTP des Servers (Header HTTP + die Antwort selbst)
    // Das Sitzungs-Cookie wird abgerufen, sofern es vorhanden ist
    const setCookie = response.headers['set-cookie'];
    if (setCookie) {
      // setCookie ist ein Array
      // Das Sitzungs-Cookie wird in diesem Array gesucht
      let trouvé = false;
      let i = 0;
      while (!trouvé && i < setCookie.length) {
        // Das Session-Cookie wird gesucht
        const results = RegExp('^(' + this.sessionCookieName + '.+?);').exec(setCookie[i]);
        if (results) {
          // Das Session-Cookie wird gespeichert
          // eslint-disable-next-line require-atomic-updates
          this.sessionCookie = results[1];
          // Es wurde gefunden
          trouvé = true;
        } else {
          // nächstes Element
          i++;
        }
      }
    }
    // Die Antwort des Servers lautet: [response.data]
    return response.data;
  }
}

// Export der Klasse
export default Dao;

Das Projekt [vuejs-10] verwendet ausschließlich die asynchrone Methode [initSession] aus den Zeilen 18–30. Zur Erinnerung: Die Klasse [Dao] wird mit einem Parameter [axios] instanziiert (Zeile 10), der vom aufrufenden Code initialisiert wird. Dieser aufrufende Code ist hier das Skript [./main.js].

12.3. Das Plugin [pluginDao]

Das Plugin [pluginDao] sieht wie folgt aus:


export default {
  install(Vue, dao) {
    // Fügt der Klasse „Vue“ die Eigenschaft [$dao] hinzu
    Object.defineProperty(Vue.prototype, '$dao', {
      // Wenn auf „Vue.$dao“ verwiesen wird, wird der zweite Parameter „[dao]“ zurückgegeben
      get: () => dao,
    })
  }
}

Wenn man sich an die Erklärung für das Plugin [event-bus] erinnert, sieht man, dass das Plugin [pluginDao] in der Klasse/Funktion [Vue] eine neue Eigenschaft namens [$dao] erstellt. Diese Eigenschaft wird (das muss noch gezeigt werden) als Wert das vom Skript [./Dao] exportierte Objekt haben, d. h. die vorherige Klasse [Dao].

12.4. Das Hauptskript [main.js]

Der Code des Hauptskripts [main.js] lautet wie folgt:


// Importe
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'

// Layer [dao]
import Dao from './Dao';
// Axios-Konfiguration
axios.defaults.timeout = 2000;
axios.defaults.baseURL = 'http://localhost/php7/scripts-web/Steuern/Version-14';
axios.defaults.withCredentials = true;
// Instanzierung der Schicht [dao]
const dao = new Dao(axios);

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

// Konfiguration
Vue.config.productionTip = false

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

Das Skript [main.js]:

  • instanziiert die Schicht [dao] in den Zeilen 14–21;
  • integriert das Plugin [pluginDao] in den Zeilen 24–25;
  • Zeile 15: Die Klasse [Dao] wird importiert;
  • Zeilen 17–18: Das Objekt [axios] wird konfiguriert, das die Abfragen HTTP ausführt. Dieses Objekt wird in Zeile 4 importiert;
    • Zeile 17: Definition eines [timeout] mit einer Dauer von 2 Sekunden;
    • Zeile 18: das URL des Steuerberechnungsservers;
    • Zeile 19: um Cookies mit dem Server austauschen zu können;
  • Zeilen 24–25: Verwendung des Plugins [pluginDao]
    • Zeile 24: Import des Plugins;
    • Zeile 25: Einbindung des Plugins. Man sieht, dass der zweite Parameter der Methode [Vue.use] die Referenz der in Zeile 21 definierten Schicht [dao] ist. Aus diesem Grund bezeichnet die Eigenschaft [Vue.$dao] in allen Instanzen der Klasse/Funktion [Vue], d. h. in allen Komponenten [Vue.js], die Ebene [dao];

12.5. Die Hauptansicht [App.vue]

Der Code der Hauptansicht [App] lautet wie folgt:


<template>
  <div class="container">
    <b-card>
      <!-- Nachricht -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-10] : plugin [dao], requêtes HTTP asynchrones</h4>
      </b-alert>
      <!-- Komponente, die eine asynchrone Anfrage an den Steuerberechnungsserver sendet-->
      <Component1 @error="doSomethingWithError" @endWaiting="endWaiting" @beginWaiting="beginWaiting" />
      <!-- Anzeige eines eventuellen Fehlers -->
      <b-alert show
               variant="danger"
               v-if="showError">Evénement [error] intercepté par [App]. Valeur reçue = {{error}}</b-alert>
      <!-- Wartemeldung mit einem 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",
    // Status der Komponente
    data() {
      return {
        // Steuert den Ladespinner
        showWaiting: false,
        // Steuert die Anzeige des Fehlers
        showError: false,
        // Der abgefangene Fehler
        error: {}
      };
    },
    // verwendete Komponenten
    components: {
      Component1
    },
    // Methoden zur Ereignisverwaltung
    methods: {
      // Wartezeit beginnt
      beginWaiting() {
        // Wartezustand wird angezeigt
        this.showWaiting = true;
        // Die Fehlermeldung wird ausgeblendet
        this.showError = false;
      },
      // Wartezeitende
      endWaiting() {
        // Wartezeit wird ausgeblendet
        this.showWaiting = false;
      },
      // Fehlerbehandlung
      doSomethingWithError(error) {
        // Es wird vermerkt, dass ein Fehler aufgetreten ist
        this.error = error;
        // Anzeige der Fehlermeldung
        this.showError = true;
      }
    }
  };
</script>

Kommentare

  • Zeile 9: [Component1] ist die Komponente, die die asynchrone Abfrage HTTP ausführt. Sie kann drei Ereignisse auslösen:
    • [beginWaiting]: Die Anfrage wird durchgeführt. Dem Benutzer muss eine Wartemeldung angezeigt werden;
    • [endWaiting]: Die Anfrage ist abgeschlossen. Die Wartezeit muss beendet werden;
    • [error]: Die Anfrage ist fehlgeschlagen. Es muss eine Fehlermeldung angezeigt werden;
  • Zeilen 10–13: Die Warnmeldung, die eine eventuelle Fehlermeldung anzeigt. Sie wird durch den Booleschen Wert [showError] in Zeile 33 gesteuert. Sie zeigt den Fehler aus Zeile 35 an;
  • Zeilen 14–18: Die Warnmeldung, die die Wartemeldung mit einem Spinner anzeigt. Sie wird durch den booleschen Wert [showWaiting] in Zeile 47 gesteuert;
  • Zeilen 45–50: [beginWaiting] ist die Methode, die beim Empfang des Ereignisses [beginWaiting] ausgeführt wird. Sie zeigt die Wartemeldung an (Zeile 47) und blendet die Fehlermeldung aus (Zeile 49), falls diese nach einem vorherigen Vorgang noch sichtbar sein sollte;
  • Zeilen 52–55: [endWaiting] ist die Methode, die beim Empfang des Ereignisses [endWaiting] ausgeführt wird. Sie blendet die Wartemeldung aus (Zeile 54);
  • Zeilen 57–62: [doSomethingWithError] ist die Methode, die beim Empfang des Ereignisses [error] ausgeführt wird. Sie protokolliert den empfangenen Fehler (Zeile 59) und zeigt die Fehlermeldung an (Zeile 61);

12.6. Die Komponente [Component1]

Der Code der Komponente [Component1] lautet wie folgt:


<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",
    // Komponentenstatus
    data() {
      return {
        showMsg: false
      };
    },
    // Methoden zur Ereignisbehandlung
    methods: {
      // Verarbeitung der vom Server empfangenen Daten
      doSomethingWithData(data) {
        // Die empfangenen Daten werden gespeichert
        this.data = data;
        // Anzeige der Daten
        this.showMsg = true;
      }
    },
    // Die Komponente wurde gerade erstellt
    created() {
      // Die Sitzung mit dem Server wird initialisiert – asynchrone Anfrage
      // Das von den Methoden der Schicht [dao] zurückgegebene Promise wird verwendet
      // Der Beginn des Vorgangs wird gemeldet
      this.$emit("beginWaiting");
      // Der asynchrone Vorgang wird gestartet
      this.$dao
        // Hierbei wird eine Sitzung jSON mit dem Steuerberechnungsserver initialisiert
        .initSession()
        // Methode, die die empfangenen Daten im Erfolgsfall verarbeitet
        .then(data => {
          // Die empfangenen Daten werden verarbeitet
          this.doSomethingWithData(data);
        })
        // Methode, die den Fehler im Fehlerfall verarbeitet
        .catch(error => {
          // Der Fehler wird an die übergeordnete Komponente weitergeleitet
          this.$emit("error", error.message);
        }).finally(() => {
          // Ende der Wartezeit
          this.$emit("endWaiting");
        })
    }
  };
</script>

Anmerkungen

  • Zeilen 4–6: Die Komponente besteht aus einer einzigen Warnmeldung, die den vom Steuerberechnungsserver zurückgegebenen Wert anzeigt, und zwar nur, wenn die Abfrage HTTP erfolgreich war. Diese Meldung wird durch den booleschen Wert [showMsg] in Zeile 17 gesteuert;
  • Zeilen 31–53: Die Abfrage HTTP wird ausgeführt, sobald die Komponente angelegt wurde. Der entsprechende Code wird daher in die Methode [created] in Zeile 31 eingefügt;
  • Zeile 35: Der übergeordneten Komponente wird mitgeteilt, dass die asynchrone Abfrage gestartet wird;
  • Zeilen 37–39: Die Methode [this.$dao.initSession] wird ausgeführt. Sie initialisiert eine Sitzung jSON mit dem Steuerberechnungsserver. Das unmittelbare Ergebnis dieser Methode ist eine [Promise];
  • Zeilen 41–44: Dieser Code wird ausgeführt, wenn der Server sein Ergebnis fehlerfrei zurückgegeben hat. Das Ergebnis des Servers befindet sich in [data]. In Zeile 43 wird die Methode [doSomethingWithData] aufgefordert, dieses Ergebnis zu verarbeiten;
  • Zeilen 46–49: Dieser Code wird ausgeführt, wenn bei der Ausführung der Abfrage ein Fehler auftritt. In Zeile 48 wird der übergeordneten Komponente mitgeteilt, dass ein Fehler aufgetreten ist, und die Fehlermeldung [error.message] wird an sie übergeben;
  • Zeilen 49–52: Dieser Code wird in jedem Fall ausgeführt. Der übergeordneten Komponente wird mitgeteilt, dass die Abfrage HTTP abgeschlossen ist;
  • Zeilen 23–28: Die Methode [doSomethingWithData] ist dafür zuständig, die vom Server gesendeten Daten aus der Methode [data] auszuwerten. In Zeile 25 werden diese Daten gespeichert und in Zeile 27 angezeigt;

12.7. Ausführung des Projekts

Image

Wenn beim Starten des Projekts der Steuerberechnungsserver nicht gestartet ist, erhält man das folgende Ergebnis:

Image

Starten wir den Server [Laragon] (siehe https://tahe.developpez.com/tutoriels-cours/php7) und laden wir die obige Seite erneut. Das Ergebnis sieht dann wie folgt aus:

Image

Hinweis: Wir verwenden hier die Version 14 des Steuerberechnungsservers, die unter https://tahe.developpez.com/tutoriels-cours/php7 definiert ist.

https://stahe.github.io
Dieses Tutorial, verfasst von Serge Tahé, wird der Öffentlichkeit unter den Bedingungen der Creative Commons Namensnennung – Nicht kommerziell – Namensnennung – Nicht kommerziell – Weitergabe unter gleichen Bedingungen 3.0 Unported.