10. Beispiel [nuxt-07]: Client- und Serverkontexte
10.1. Einführung
Beispiel [nuxt-07] zielt darauf ab, das [context]-Objekt sowohl auf der Server- als auch auf der Client-Seite zu untersuchen. Es ist wichtig, sich vor Augen zu halten, dass diese beiden Komponenten von [nuxt]-Anwendungen voneinander getrennt sind: Sie teilen nichts außer:
- dem, was der Server an den Client sendet (in der HTTP-Antwort und der gerenderten Seite);
- was der Client an den Server sendet (in seiner HTTP-Anfrage);
Wie wir also sehen werden, haben die vom Server und die vom Client verwalteten Objekte zwar denselben Namen, sind aber nicht identisch: Sie können manchmal Kopien voneinander sein, haben aber niemals dieselbe Referenz. Das Ändern eines clientseitigen Objekts hat keine Auswirkungen auf das gleichnamige Objekt auf der Serverseite und umgekehrt.
Das Beispiel [nuxt-07] wird zunächst durch Kopieren des Beispiels [nuxt-01] erstellt:
- In [2] fügen wir ein Plugin hinzu, das von Client und Server gemeinsam genutzt wird;
- in [3] werden wir die Seite [index] leicht modifizieren;
10.2. Das Plugin [common/main.js]
Das Plugin [common / main.js] wird sowohl vom Client als auch vom Server ausgeführt: Dies ist auf die folgende Konfiguration in [nuxt.config.js] zurückzuführen:
/*
** Plugins to load before mounting the App
*/
plugins: [{ src: '~/plugins/common/main.js' }],
- Zeile 4: Das Fehlen der Eigenschaft [mode] bedeutet, dass das Plugin [~/plugins/common/main.js] sowohl vom Client als auch vom Server ausgeführt wird: zuerst vom Server, dann vom Client;
Dieses Plugin sieht wie folgt aus:
/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function(...args) {
// who executes this code?
console.log('[main server], process.server=', process.server, 'process.client=', process.client)
const who = process.server ? 'server' : 'client'
const main = '[main ' + who + ']'
// number of arguments
console.log(main + ', il y a', args.length, 'arguments')
// 1st argument
const context = args[0]
// key context
dumpkeys(main + ', context', context)
// the application
dumpkeys(main + ', context.app', context.app)
// the road
dumpkeys(main + ', context.route', context.route)
console.log(main + ', context.route=', context.route)
// the router
dumpkeys(main + ', context.app.router', context.app.router)
// on router.options.routes
dumpkeys(main + ', context.app.router.options.routes', context.app.router.options.routes)
console.log(main + ', context.app.router.options.routes=', context.app.router.options.routes)
// 2nd argument
const inject = args[1]
console.log('inject=', typeof inject)
}
function dumpkeys(message, object) {
// list of [object] keys
const ligne = 'Liste des clés [' + message + ']'
console.log(ligne)
// kEY LIST
if (object) {
console.log(Object.keys(object))
}
}
- Zeilen 31–39: Die Funktion [dumpkeys] listet die Eigenschaften des Objekts auf, das als zweiter Parameter übergeben wurde. Dieser Liste geht die als erster Parameter übergebene Meldung voraus;
- Zeile 3: Wir möchten wissen, wie viele Argumente die Funktion erhält. Dazu verwenden wir die Notation [...args], die die tatsächlichen Funktionsparameter in das Array [args] einfügt. Wir werden feststellen, dass es zwei Argumente gibt;
- Zeile 5: Wir zeigen an, wer den Code ausführt, der Server oder der Client;
- Zeile 6: der Code-Ausführer, Client oder Server;
- Zeile 7: eine in den Protokollen verwendete Zeichenfolgenkonstante;
- Zeile 12: Wir werden sehen, dass das erste vom Plugin empfangene Argument der Kontext des Ausführenden ist;
- Zeile 14: Liste der Schlüssel für das [context]-Objekt;
- Zeile 16: Wir werden sehen, dass das [context]-Objekt eine [app]-Eigenschaft besitzt, die die [nuxt]-Anwendung repräsentiert;
- Zeile 18: Wir sehen, dass das [context]-Objekt eine [route]-Eigenschaft hat, die die aktuelle Route des Routers darstellt;
- Zeile 21: Wir werden feststellen, dass das [app]-Objekt eine [router]-Eigenschaft hat, die den Router repräsentiert;
- Zeile 23: Das Objekt [router.options.routes] repräsentiert die verschiedenen Routen der Anwendung;
- Zeilen 27–28: Das zweite Argument des Plugins ist die Funktion [inject], die wir im Beispiel [nuxt-06] verwendet haben;
10.3. Das vom Server ausgeführte Plugin
Bei der Ausführung zeigt der Server Folgendes an:
- Zeilen 11–12: Wir hatten bereits Gelegenheit, die Eigenschaften [base] und [env] zu verwenden, deren Werte aus der Datei [nuxt.config.js] stammen;
- Zeile 8: Die Eigenschaft [app] bezieht sich auf die [nuxt]-Anwendung;
- Zeile 18: Die Eigenschaft [route] bezieht sich auf die aktuelle Route des Routers, d. h. die Seite, die der Server senden wird;
- Zeile 13: die HTTP-Anfrage vom Client-Browser;
- Zeile 14: die HTTP-Antwort des Servers;
Die Liste der [context.app]-Eigenschaften lautet wie folgt:
- Zeile 3: Die Eigenschaft [router] ermöglicht uns den Zugriff auf den Router der Anwendung. Dies ist in [Nuxt] wichtig, da der Router von [Nuxt] selbst und nicht vom Entwickler definiert wird. Diese Eigenschaft ermöglicht es dem Entwickler, den Router zu ändern;
Die Liste der [context.route]-Eigenschaften lautet wie folgt:
Die Route [context.route] beim Start des Servers lautet wie folgt:
- Zeile 2: Wir sehen, dass die nächste Seite auf dem Server [index] ist und dass ihr Pfad [/] lautet (Zeile 10);
- Zeile 22: Mit der Eigenschaft [meta] können Sie Routen Eigenschaften hinzufügen;
Die Eigenschaften von [context.app.router] des Servers lauten wie folgt:
Die verschiedenen Routen der Anwendung befinden sich in der Eigenschaft [context.app.router.options.routes]:
Und schließlich das zweite Argument:
10.4. Die [index]-Seite des Servers
Die [index]-Seite sieht wie folgt aus:
<!-- page principale -->
<template>
<Layout :left="true" :right="true">
<!-- navigation -->
<Navigation slot="left" />
<!-- message-->
<b-alert slot="right" show variant="warning">
Home
</b-alert>
</Layout>
</template>
<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */
import Navigation from '@/components/navigation'
import Layout from '@/components/layout'
export default {
name: 'Home',
// components used
components: {
Layout,
Navigation
},
data() {
return {
who: process.server ? 'server' : 'client'
}
},
// life cycle
beforeCreate() {
// client and server
console.log('[home beforeCreate]')
},
created() {
// client and server
console.log('[home ' + this.who + ' created]')
this.dumpkeys('[home ' + this.who + ' created], this.$nuxt', this.$nuxt)
this.dumpkeys('[home ' + this.who + ' created], this.$nuxt.context', this.$nuxt.context)
},
beforeMount() {
// customer only
console.log('[home ' + this.who + ' beforeMount]')
},
mounted() {
// customer only
console.log('[home ' + this.who + ' mounted]')
},
methods: {
dumpkeys(message, object) {
// list of [object] keys
const ligne = 'Liste des clés [' + message + ']'
console.log(ligne)
if (object) {
console.log(Object.keys(object))
}
}
}
}
</script>
- Zeile 43: Wir haben bereits gesehen, dass der Kontext einer Seite in [this.$nuxt.context] zu finden ist;
- Zeile 42: Wir zeigen auch die Eigenschaften des Objekts [this.$nuxt] an;
Bei der Ausführung durch den Server generiert diese Seite die folgenden Protokolleinträge:
Die Serverkontext-Eigenschaften auf der [index]-Seite lauten wie folgt:
Dies sind dieselben Eigenschaften wie im [context]-Objekt des Plugins.
10.5. Das vom Client ausgeführte Plugin
Sobald der Server die [index]-Seite an den Browser des Clients gesendet hat, übernehmen die clientseitigen Skripte. Das [main.js]-Plugin wird dann ausgeführt. Diese Protokolle lauten wie folgt:
Wir finden Eigenschaften, die denen auf der Serverseite ähneln, wobei einige Eigenschaften fehlen und andere hinzukommen. In Zeile 4 fehlen beispielsweise die Eigenschaften [req, res] – die HTTP-Anfragen des Client-Browsers und die HTTP-Antwort des Servers.
10.6. Die [index]-Seite des Clients
Die [index]-Seite des Clients erzeugt die folgenden Protokolle:
- Zeile 4: die Eigenschaften des Objekts [this.$nuxt]. Es handelt sich um ein umfangreiches Objekt mit 51 Eigenschaften;
- Zeile 6: die Eigenschaften des Objekts [this.$nuxt.context]. Dies sind dieselben Eigenschaften, die im Objekt [context] des Client-Plugins zu finden sind;