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

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

Beispiele aus 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|. Dies ist das aktuelle Dokument;
|Einführung in das NUXT.JS-Framework anhand von Beispielen|;

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 alle 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, kann man 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 das 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;

Die neueste Version des in Dokument [1] entwickelten Steuerberechnungsservers (siehe Dokument |https://tahe.developpez.com/tutoriels-cours/php7|) lässt sich auf verschiedene Weise verbessern:

Die aktuelle Version ist serverzentriert. Der aktuelle Trend (Stand: Sept. 2019) geht in Richtung Client-Server-Architektur:

Der Server fungiert als JSON-Dienst;
Eine statische oder dynamische Seite dient als Einstiegspunkt für die Webanwendung. Diese Seite enthält HTML/CSS sowie JavaScript;
die anderen Seiten der Webanwendung werden dynamisch durch JavaScript generiert:
- Die HTML-Seite kann durch das Zusammensetzen statischer oder dynamischer Fragmente generiert werden, die von demselben Server bereitgestellt werden, der auch die Einstiegsseite bereitstellt, oder durch clientseitiges JavaScript erstellt werden;
- Diese verschiedenen Seiten zeigen Daten an, die vom JSON-Dienst angefordert wurden;

Somit wird die Arbeit zwischen Client und Server aufgeteilt. Der Server, dessen Auslastung reduziert ist, kann mehr Nutzer bedienen.

Die diesem Modell entsprechende Architektur sieht wie folgt aus:

JS: JavaScript

Der Browser ist der Client:

ein Dienst, der statische oder dynamische Seiten oder Fragmente bereitstellt (oben nicht dargestellt);
ein JSON-Datendienst;

Der JavaScript-Code ist somit ein JSON-Client und kann als solcher in Schichten [UI, Geschäftslogik, DAO] (UI: Benutzeroberfläche) organisiert werden, genau wie unsere in PHP geschriebenen JSON-Clients. Letztendlich lädt der Browser nur eine einzige Seite, die Startseite. Alle anderen werden von JavaScript abgerufen und gerendert. Diese Art von Anwendung wird als SPA (Single Page Application) oder APU (Application à Page Unique) bezeichnet.

Diese Art von Anwendung gehört auch zu den sogenannten AJAX-Anwendungen: Asynchronous JavaScript and XML:

Asynchron: weil die Aufrufe des JavaScript-Clients an den JSON-Server asynchron erfolgen;
XML: weil XML die Technologie war, die vor dem Aufkommen von JSON verwendet wurde. Das Akronym AJAX wurde jedoch beibehalten;

Wir werden diese Architektur in diesem Dokument untersuchen. Auf der Client-Seite werden wir das JavaScript-Framework [Vue.js] [https://vuejs.org/] verwenden, um den JavaScript-Client für den PHP-JSON-Server zu schreiben, den wir in Dokument [1] beschrieben haben.

[Vue.js] ist ein JavaScript-Framework. Wir haben die Sprache JavaScript im Dokument [2] vorgestellt. Wir werden keine umfassende Untersuchung des [Vue.js]-Frameworks durchführen. Wir werden lediglich die Konzepte vorstellen, die anschließend beim Schreiben eines [Vue.js]-Clients für die JSON-Version von Version 14 des Steuerberechnungsservers verwendet werden (siehe |https://tahe.developpez.com/tutoriels-cours/php7|).

Die Skripte in diesem Dokument sind kommentiert, und ihre Konsolenausgabe wird wiedergegeben. Wo nötig, werden zusätzliche Erläuterungen gegeben. Dieses 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é, Oktober 2019