1. Einführung in das Framework NUXT.JS

Das PDF dieses Dokuments ist verfügbar |HIER|.

Die Beispiele dieses Dokuments sind unter |HIER| verfügbar.

Dieses Dokument ist Teil einer vierteiligen Artikelserie:

|Einführung in die Sprache PHP7 anhand von Beispielen|;
|Einführung in die Sprache ECMASCRIPT 6 anhand von Beispielen|;
|Einführung in das Framework VUE.JS anhand von Beispielen|;
|Einführung in das Framework NUXT.JS anhand von Beispielen|. Dies ist das vorliegende Dokument;

Es handelt sich ausschließlich um Dokumente für Anfänger. Die Artikel folgen einer logischen Abfolge, sind jedoch nur lose miteinander verbunden:

Das Dokument [1] stellt die Sprache PHP 7 vor. Leser, die sich nur für die Sprache PHP und nicht für die JavaScript-Sprache der folgenden Artikel interessieren, können an dieser Stelle aufhören;
die Dokumente [2-4] zielen darauf ab, einen JavaScript-Client für den im Dokument [1] entwickelten Steuerberechnungsserver zu erstellen;
die JavaScript-Frameworks [vue.js] und [nuxt.js] aus den Artikeln 3 und 4 setzen Kenntnisse des JavaScripts der neuesten Versionen von ECMASCRIPT voraus, nämlich der Version 6. Das Dokument [2] richtet sich daher an diejenigen, die diese JavaScript-Version nicht kennen. Es bezieht sich auf den Steuerberechnungsserver, der im Dokument [1] erstellt wurde. Leser von [2] müssen daher gelegentlich auf das Dokument [1] zurückgreifen;
sobald man ECMASCRIPT 6 beherrscht, kann man sich mit dem Framework VUE.JS befassen, das es ermöglicht, JavaScript-Clients zu erstellen, die in einem Browser im SPA-Modus (Single Page Application) ausgeführt werden. Es handelt sich um das Dokument [3]. Es bezieht sich sowohl auf den im Dokument [1] erstellten Steuerberechnungsserver als auch auf den Code des eigenständigen JavaScript-Clients, der in [2] erstellt wurde. Wer sich mit [3] beschäftigt, muss daher gelegentlich auf die Dokumente [1] und [2] zurückgreifen;
Sobald man VUE.JS beherrscht, kann man sich mit dem Framework NUXT.JS befassen, das die Erstellung von JavaScript-Clients ermöglicht, die in einem Browser im Modus SSR (Server Side Rendered) ausgeführt werden. Es bezieht sich sowohl auf den im Dokument [1] erstellten Steuerberechnungsserver auf den eigenständigen JavaScript-Client-Code, der in [2] erstellt wurde, sowie auf die Anwendung [vue.js], die im Dokument [3] entwickelt wurde. Der Leser von [4] muss daher gelegentlich auf die Dokumente [1], [2] und [3] zurückgreifen;

Dieses Dokument knüpft an die im Dokument [3] geleistete Arbeit mit dem Framework VUE.JS an.

Dieser Abschnitt befasst sich mit der folgenden Architektur:

In [1] zeigt ein Webbrowser dem Benutzer Webseiten ([5, 7]) an, die von einem Server ([3]) bereitgestellt werden. Diese Seiten enthalten JavaScript, das einen Client für einen [2]-Webdatendienst sowie einen Client für einen [3]-Webseitenfragment-Server implementiert;
Bei [2] handelt es sich bei dem Webserver um einen Datenserver. Er kann in jeder beliebigen Sprache programmiert sein. Er erzeugt keine Webseiten im herkömmlichen Sinne (HTML, CSS, JavaScript), außer vielleicht beim ersten Mal. Diese erste Seite kann jedoch von einem klassischen Webserver ([3] – kein Datenserver) abgerufen werden. Das JavaScript der Startseite generiert dann die verschiedenen Webseiten der Anwendung, indem es die anzuzeigenden Daten [4] vom Webserver abruft, der als Datenserver [2] fungiert. Es kann außerdem Webseitenfragmente [5] vom Webseitenserver [3] abrufen, um diese Daten zu gestalten;
in [4] löst der Benutzer eine Aktion aus;
in [6,7]: Er erhält Daten, die mit einem Webseitenfragment aufbereitet wurden;

Das Framework [nuxt.js] |https://fr.nuxtjs.org/| ermöglicht es uns, den folgenden Ablauf zu implementieren:

Die erste Seite der Anwendung wird vom Server [node.js] [3] bereitgestellt. Darüber hinaus befinden sich auch die anderen Seiten der Anwendung auf demselben Server. Sie werden bereitgestellt, wenn der Benutzer ihre URL-Adresse manuell in den Browser eingibt. Diese Seiten enthalten eine [vue.js]-Anwendung (ungefähr);
Sobald die erste Seite im Browser geladen ist, verhält sich die Anwendung wie eine klassische [vue.js]-Anwendung. In unserem obigen Schema kommuniziert sie dann mit dem Datenserver [2];

Letztendlich verhält sich die Anwendung wie eine [vue.js]-Anwendung, außer bei der ersten Seite und wenn der Benutzer URL manuell eingibt. In diesen Fällen wird die Seite auf dem Server [3] abgerufen. Wenn eine Suchmaschine die verschiedenen Seiten der Anwendung abfragt, erhält sie die Seiten vom Server [3]. Diese konnten für den SEO optimiert worden sein (Suchmaschinenoptimierung). In einer Anwendung [vue.js] erhält die Suchmaschine eine Seite mit geringer Relevanz SEO. Beispielsweise war in der Client-Anwendung des Servers zur Steuerberechnung des Dokuments [3] die vom Browser beim Start der Anwendung empfangene Seite wie folgt:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!---Build-Dateien werden automatisch eingefügt -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

Dies ist die einzige Seite, die vom Browser geladen wird. Alle anderen Seiten der Anwendung werden dynamisch durch JavaScript ohne Mitwirkung des Browsers generiert. Manche Suchmaschinen begnügen sich mit dieser Seite. Andere gehen noch einen Schritt weiter und führen das in der Seite enthaltene JavaScript aus (Zeile 9 oben). Dadurch entsteht eine weitere Seite. Diese kann einen asynchronen Vorgang enthalten, um die Daten abzurufen, die die Seite anzeigen soll. In diesem Fall warten die Suchmaschinen nicht. Man erhält dann eine unvollständige Seite. Man erinnert sich vielleicht daran, dass dies bei unserem Kunden [vue.js] vom Steuerberechnungsserver der Fall ist: Asynchron initialisiert er während des Ladens der ersten Seite eine Sitzung jSON mit dem Steuerberechnungsserver. In diesem konkreten Fall hat dies keinen Einfluss auf die von der Suchmaschine abgerufene Seite. Bei anderen Anwendungen könnte dies jedoch nachteilig sein, was SEO betrifft.

Mit [nuxt.js] kann der Suchmaschine für jede Seite der Anwendung eine aussagekräftigere Seite bereitgestellt werden.

Die Skripte in diesem Dokument sind kommentiert und ihre Ausführung in der Konsole wiedergegeben. Teilweise werden zusätzliche Erläuterungen gegeben. Das Dokument erfordert aktives Lesen: Um ein Skript zu verstehen, muss man sowohl den Code als auch die Kommentare und die Ausführungsergebnisse lesen.

Die Beispiele des Dokuments sind |HIER| verfügbar.

Die Serveranwendung PHP 7 kann |HIER| getestet werden.

Serge Tahé, Dezember 2019