1. Einführung in das NUXT.JS-Framework

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

Die Beispiele in diesem Dokument sind |HIER| verfügbar.

Dieses Dokument ist Teil einer vierteiligen Artikelserie:

|Einführung in PHP7 anhand von Beispielen|;

|Einführung in ECMASCRIPT 6 anhand von Beispielen| ;
|Einführung in das VUE.JS-Framework anhand von Beispielen|;
|Einführung in das NUXT.JS-Framework anhand von Beispielen|. Dies ist das aktuelle Dokument;

Dies sind alles Dokumente für Anfänger. Die Artikel folgen einer logischen Reihenfolge, sind jedoch lose miteinander verbunden:

Dokument [1] stellt die Sprache PHP 7 vor. Leser, die sich nur für PHP und nicht für das in den folgenden Artikeln behandelte JavaScript interessieren, sollten hier aufhören;
Die Dokumente [2–4] zielen darauf ab, einen JavaScript-Client für den in Dokument [1] entwickelten Steuerberechnungsserver zu erstellen;
Die JavaScript-Frameworks [vue.js] und [nuxt.js] in den Artikeln 3 und 4 erfordern Kenntnisse der neuesten Versionen von ECMAScript, insbesondere der Version 6. Dokument [2] richtet sich daher an diejenigen, die mit dieser Version von JavaScript nicht vertraut sind. Es bezieht sich auf den in Dokument [1] erstellten Steuerberechnungsserver. Leser von [2] müssen daher gelegentlich auf Dokument [1] zurückgreifen;
Sobald ECMASCRIPT 6 beherrscht wird, können wir zum VUE.JS-Framework übergehen, das die Erstellung von JavaScript-Clients ermöglicht, die in einem Browser im SPA-Modus (Single Page Application) laufen. Dies ist Dokument [3]. Es bezieht sich sowohl auf den in Dokument [1] erstellten Steuerberechnungsserver als auch auf den in [2] erstellten eigenständigen JavaScript-Client-Code. Leser von [3] müssen daher gelegentlich auf die Dokumente [1] und [2] zurückgreifen;
Sobald Sie VUE.JS beherrschen, können Sie zum NUXT.JS-Framework übergehen, mit dem Sie JavaScript-Clients erstellen können, die in einem Browser im SSR-Modus (Server Side Rendered) laufen. Es bezieht sich auf den in Dokument [1] erstellten Steuerberechnungsserver, den in [2] erstellten eigenständigen JavaScript-Client-Code und die in Dokument [3] entwickelte [vue.js]-Anwendung. Leser von [4] müssen daher gelegentlich auf die Dokumente [1], [2] und [3] zurückgreifen;

Dieses Dokument knüpft an die in Dokument [3] geleistete Arbeit unter Verwendung des Vue.js-Frameworks an.

Dieser Abschnitt konzentriert sich auf die folgende Architektur:

In [1] zeigt ein Webbrowser Webseiten [5, 7] von einem Server [3] an, die für einen Benutzer bestimmt sind. Diese Seiten enthalten JavaScript, das einen Client für einen Webdatendienst [2] sowie einen Client für einen Webseitenfragment-Server [3] implementiert;
In [2] fungiert der Webserver als Datenserver. Er kann in jeder beliebigen Programmiersprache geschrieben sein. Er generiert keine Webseiten im herkömmlichen Sinne (HTML, CSS, JavaScript), außer vielleicht beim ersten Mal. Diese erste Seite kann jedoch von einem herkömmlichen Webserver [3] (keinem Datenserver) abgerufen werden. Das JavaScript auf der Startseite generiert dann die verschiedenen Webseiten der Anwendung, indem es die anzuzeigenden Daten [4] vom Webserver abruft, der als Datenserver fungiert [2]. Es kann auch Webseitenfragmente [5] zum Formatieren dieser Daten vom Webseitenserver [3] abrufen;
in [4] löst der Benutzer eine Aktion aus;
in [6,7]: Er erhält Daten, die durch ein Webseitenfragment formatiert wurden;

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

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

Letztendlich verhält sich die Anwendung wie eine [Vue.js]-Anwendung, mit Ausnahme der ersten Seite und wenn der Benutzer URLs manuell eingibt. In diesen Fällen wird die Seite vom Server [3] abgerufen. Wenn eine Suchmaschine die verschiedenen Seiten der Anwendung anfordert, erhält sie die Seiten vom Server [3]. Diese Seiten wurden möglicherweise für SEO (Suchmaschinenoptimierung) optimiert. In einer [Vue.js]-Anwendung erhält die Suchmaschine eine Seite mit geringem SEO-Wert. In der Client-Anwendung für den Dokumentensteuerberechnungsserver [3] sah die Seite, die der Browser beim Start der Anwendung erhielt, beispielsweise wie folgt aus:


<!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>
    <!-- built files will be auto injected -->
  <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. Einige Suchmaschinen geben sich mit dieser Seite zufrieden. Andere gehen noch einen Schritt weiter und führen das in der Seite enthaltene JavaScript aus (Zeile 9 oben). Daraufhin wird eine weitere Seite abgerufen. Diese Seite kann einen asynchronen Vorgang enthalten, um die Daten abzurufen, die die Seite anzeigen soll. In diesem Fall warten Suchmaschinen nicht. Wir haben dann eine unvollständige Seite. Sie erinnern sich vielleicht, dass dies bei unserem [Vue.js]-Client auf dem Steuerberechnungsserver der Fall ist: Asynchron, während die erste Seite geladen wird, initialisiert er eine JSON-Sitzung mit dem Steuerberechnungsserver. In diesem speziellen Fall hat dies keinen Einfluss auf die von der Suchmaschine abgerufene Seite. Bei anderen Anwendungen könnte dies im Hinblick auf SEO nachteilig sein.

Mit [nuxt.js] können wir der Suchmaschine für jede Seite der Anwendung eine aussagekräftigere Seite bereitstellen.

Die Skripte in diesem Dokument sind kommentiert, und ihre Konsolenausgabe wird wiedergegeben. Manchmal werden zusätzliche Erläuterungen gegeben. Das Dokument erfordert aktives Lesen: Um ein Skript zu verstehen, müssen Sie dessen Code, Kommentare und Ausführungsergebnisse lesen.

Die Beispiele in diesem Dokument sind |hier| verfügbar.

Die PHP-7-Serveranwendung kann |hier| getestet werden.

Serge Tahé, Dezember 2019