Express Tutorial Teil 2: Erstellen einer Website-Skelettstruktur

Übersicht

Dieser Artikel zeigt, wie Sie mit dem Express Application Generator-Tool eine "Skelett"-Website erstellen können, die Sie dann mit standortspezifischen Routen, Ansichten/Vorlagen und Datenbankaufrufen füllen können. In diesem Fall werden wir das Tool nutzen, um das Framework für unsere Local Library Website zu erstellen, zu dem wir später den gesamten Code hinzufügen werden, den die Website benötigt. Der Prozess ist äußerst einfach und erfordert lediglich, dass Sie den Generator mit einem neuen Projektnamen in der Befehlszeile aufrufen und optional auch die Vorlagen-Engine und den CSS-Generator der Website angeben.

In den folgenden Abschnitten wird gezeigt, wie Sie den Anwendungsgenerator aufrufen, und es wird eine kleine Erklärung zu den verschiedenen Ansichts-/CSS-Optionen gegeben. Wir erklären auch, wie die Website-Skelettstruktur aufgebaut ist. Am Ende zeigen wir, wie Sie die Website ausführen können, um zu überprüfen, ob sie funktioniert.

Den Anwendungsgenerator verwenden

Sie sollten den Generator bereits als Teil des Einrichtens einer Node-Entwicklungsumgebung installiert haben. Zur Erinnerung: Sie installieren das Generator-Tool allgemein mit dem npm-Paketmanager, wie gezeigt:

npm install express-generator -g

Der Generator hat eine Reihe von Optionen, die Sie über die Befehlszeile mit dem Befehl --help (oder -h) anzeigen können:

> express --help

    Usage: express [options] [dir]

  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain CSS)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information

Sie können express angeben, um ein Projekt im aktuellen Verzeichnis unter Verwendung der Jade Ansicht-Engine und plain CSS zu erstellen (wenn Sie einen Verzeichnisnamen angeben, wird das Projekt in einem Unterordner mit diesem Namen erstellt).

express

Sie können auch eine Ansichts- (Vorlagen-) Engine mit --view und/oder eine CSS-Generierungs-Engine mit --css wählen.

Welche View-Engine sollte ich verwenden?

Der Express Application Generator ermöglicht es Ihnen, eine Reihe beliebter Ansichts-/Vorlagen-Engines zu konfigurieren, darunter EJS, Hbs, Pug (Jade), Twig und Vash, obwohl er standardmäßig Jade auswählt, wenn Sie keine Ansichtsoption angeben. Express selbst kann auch eine große Anzahl anderer Vorlagensprachen out of the box unterstützen.

Allgemein gesprochen sollten Sie eine Vorlagen-Engine auswählen, die alle erforderlichen Funktionen bietet und Ihnen ermöglicht, schneller produktiv zu sein — oder, mit anderen Worten, in der gleichen Weise, wie Sie jede andere Komponente auswählen würden! Einige der Dinge, die Sie beim Vergleich von Vorlagen-Engines beachten sollten:

• Zeit zur Produktivität — Wenn Ihr Team bereits Erfahrung mit einer Vorlagen-Sprache hat, wird es wahrscheinlich schneller produktiv mit dieser Sprache sein. Andernfalls sollten Sie die relative Lernkurve für die potenziellen Vorlagen-Engines in Betracht ziehen.
• Beliebtheit und Aktivität — Überprüfen Sie die Beliebtheit der Engine und ob sie eine aktive Community hat. Es ist wichtig, Unterstützung zu erhalten, wenn während der Lebensdauer der Website Probleme auftreten.
• Stil — Einige Vorlagen-Engines verwenden spezifische Markups, um eingefügten Inhalt innerhalb von "gewöhnlichem" HTML anzuzeigen, während andere das HTML mit einer anderen Syntax konstruieren (zum Beispiel unter Verwendung von Einrückungen und Blocknamen).
• Leistung/Rendering-Zeit.
• Features — Sie sollten berücksichtigen, ob die betrachteten Engines über die folgenden Funktionen verfügen:
  • Layout-Erbschaft: Ermöglicht es Ihnen, eine Basistemplate zu definieren und dann nur die Teile davon zu "erben", die Sie für eine bestimmte Seite unterschiedlich gestalten möchten. Dies ist typischerweise ein besserer Ansatz als Vorlagen durch Einfügen einer Reihe erforderlicher Komponenten zu erstellen oder jedes Mal eine Vorlage von Grund auf neu zu erstellen.
  • "Include"-Unterstützung: Ermöglicht den Aufbau von Vorlagen durch Einfügen anderer Vorlagen.
  • Knackige Variablen- und Schleifenkontrollsyntax.
  • Möglichkeit zur Filterung von Variablenwerten auf Vorlagenebene, wie z.B. Variablen in Großbuchstaben zu setzen oder ein Datumsformat zu formatieren.
  • Fähigkeit zur Erzeugung von anderen Ausgabeformaten als HTML, wie JSON oder XML.
  • Unterstützung für asynchrone Operationen und Streaming.
  • Client-seitige Funktionen. Wenn eine Vorlagen-Engine clientseitig genutzt werden kann, besteht die Möglichkeit, dass das gesamte oder der Großteil des Renderings clientseitig durchgeführt wird.

Für dieses Projekt verwenden wir die Pug Vorlagen-Engine (früher "Jade" genannt), da dies eine der beliebtesten Express/JavaScript-Vorlagensprachen ist und vom Generator unterstützt wird.

Welche CSS Stylesheet Engine sollte ich verwenden?

Der Express Application Generator ermöglicht es Ihnen, ein Projekt zu erstellen, das für die Nutzung der gebräuchlichsten CSS Stylesheet Engines konfiguriert ist: LESS, SASS, Stylus.

Wie bei den Vorlagen-Engines sollten Sie die Stylesheet Engine verwenden, die es Ihrem Team ermöglicht, am produktivsten zu sein. Für dieses Projekt werden wir normales CSS (die Voreinstellung) verwenden, da unsere CSS-Anforderungen nicht kompliziert genug sind, um etwas anderes zu rechtfertigen.

Welche Datenbank sollte ich verwenden?

Der generierte Code verwendet/inklusive keine Datenbanken. Express-Anwendungen können jeden Datenbankmechanismus nutzen, der von Node unterstützt wird (Express selbst definiert keine spezifischen zusätzlichen Verhaltens- oder Erfordernisse für das Datenbankmanagement).

Wir werden in einem späteren Artikel besprechen, wie man eine Datenbank integriert.

Das Projekt erstellen

Für die Beispiel-App Local Library, die wir aufbauen werden, erstellen wir ein Projekt mit dem Namen express-locallibrary-tutorial unter Verwendung der Pug-Vorlagenbibliothek und ohne CSS-Engine.

Navigieren Sie zunächst zu dem Ort, an dem Sie das Projekt erstellen möchten, und starten Sie dann den Express Application Generator im Befehlsfenster, wie gezeigt:

express express-locallibrary-tutorial --view=pug

Der Generator erstellt (und listet) die Dateien des Projekts auf.

   create : express-locallibrary-tutorial\
   create : express-locallibrary-tutorial\public\
   create : express-locallibrary-tutorial\public\javascripts\
   create : express-locallibrary-tutorial\public\images\
   create : express-locallibrary-tutorial\public\stylesheets\
   create : express-locallibrary-tutorial\public\stylesheets\style.css
   create : express-locallibrary-tutorial\routes\
   create : express-locallibrary-tutorial\routes\index.js
   create : express-locallibrary-tutorial\routes\users.js
   create : express-locallibrary-tutorial\views\
   create : express-locallibrary-tutorial\views\error.pug
   create : express-locallibrary-tutorial\views\index.pug
   create : express-locallibrary-tutorial\views\layout.pug
   create : express-locallibrary-tutorial\app.js
   create : express-locallibrary-tutorial\package.json
   create : express-locallibrary-tutorial\bin\
   create : express-locallibrary-tutorial\bin\www

   change directory:
     > cd express-locallibrary-tutorial

   install dependencies:
     > npm install

   run the app (Bash (Linux or macOS))
     > DEBUG=express-locallibrary-tutorial:* npm start

   run the app (PowerShell (Windows))
     > $env:DEBUG = "express-locallibrary-tutorial:*"; npm start

   run the app (Command Prompt (Windows)):
     > SET DEBUG=express-locallibrary-tutorial:* & npm start

Am Ende der Ausgabe gibt der Generator Anweisungen, wie die Abhängigkeiten (wie in der package.json Datei aufgeführt) installiert und wie die Anwendung auf verschiedenen Betriebssystemen ausgeführt wird.

Die Website-Skelettstruktur ausführen

An diesem Punkt haben wir ein vollständiges Skelettprojekt. Die Website tut eigentlich noch nicht viel, aber es lohnt sich, sie auszuführen, um zu zeigen, dass sie funktioniert.

1. Installieren Sie zuerst die Abhängigkeiten (der install-Befehl ruft alle in der package.json des Projekts aufgelisteten Abhängigkeits-Pakete ab).

   bash

   cd express-locallibrary-tutorial
   npm install
   

2. Führen Sie dann die Anwendung aus.

   • Verwenden Sie auf der Windows CMD-Eingabeaufforderung diesen Befehl:

     batch

     SET DEBUG=express-locallibrary-tutorial:* & npm start
     

   • Verwenden Sie auf Windows PowerShell diesen Befehl:

     powershell

     $env:DEBUG = "express-locallibrary-tutorial:*"; npm start
     

     Hinweis: PowerShell-Befehle werden in diesem Tutorial nicht behandelt (die bereitgestellten "Windows"-Befehle gehen davon aus, dass Sie die Windows CMD-Eingabeaufforderung verwenden).

   • Verwenden Sie auf macOS oder Linux diesen Befehl:

     bash

     DEBUG=express-locallibrary-tutorial:* npm start
     

3. Laden Sie dann http://localhost:3000/ in Ihrem Browser, um auf die App zuzugreifen.

Sie sollten eine Browserseite sehen, die so aussieht:

Herzlichen Glückwunsch! Sie haben nun eine funktionierende Express-Anwendung, die über Port 3000 erreichbar ist.

SET DEBUG=express-locallibrary-tutorial:* & npm start

> express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
> node ./bin/www

  express-locallibrary-tutorial:server Listening on port 3000 +0ms
GET / 304 490.296 ms - -
GET /stylesheets/style.css 200 4.886 ms - 111

Serverneustart bei Dateiänderungen aktivieren

Jede Änderung, die Sie an Ihrer Express-Website vornehmen, ist derzeit erst sichtbar, nachdem Sie den Server neu gestartet haben. Es wird schnell sehr lästig, den Server jedes Mal anhalten und neu starten zu müssen, wenn Sie eine Änderung vornehmen. Deshalb lohnt es sich, die Zeit zu investieren, den Server bei Bedarf automatisch neu zu starten.

Ein praktisches Werkzeug dafür ist nodemon. Dies wird normalerweise global installiert (da es ein "Tool" ist), aber hier werden wir es lokal als Entwickler-Abhängigkeit installieren und verwenden, sodass alle Entwickler, die mit dem Projekt arbeiten, es automatisch erhalten, wenn sie die Anwendung installieren. Verwenden Sie den folgenden Befehl im Stammverzeichnis des Skelettprojekts:

npm install --save-dev nodemon

Wenn Sie sich trotzdem entscheiden, nodemon global auf Ihrem Rechner zu installieren und nicht nur in die package.json Datei Ihres Projekts:

npm install -g nodemon

Wenn Sie die package.json Datei Ihres Projekts öffnen, sehen Sie jetzt einen neuen Abschnitt mit dieser Abhängigkeit:

{
  "devDependencies": {
    "nodemon": "^3.1.10"
  }
}

Da das Tool nicht global installiert ist, können wir es nicht von der Befehlszeile aus starten (es sei denn, wir fügen es dem Pfad hinzu). Wir können es jedoch mit einem npm-Skript aufrufen, da npm weiß, welche Pakete installiert sind. Finden Sie den Abschnitt scripts Ihrer package.json. Anfänglich wird er eine Zeile enthalten, die mit "start" beginnt. Aktualisieren Sie ihn, indem Sie ein Komma am Ende dieser Zeile setzen und die Zeilen "devstart" und "serverstart" hinzufügen:

• Unter Linux und macOS sieht der Scripts-Abschnitt folgendermaßen aus:

  json

  {
    "scripts": {
      "start": "node ./bin/www",
      "devstart": "nodemon ./bin/www",
      "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
    }
  }
  

• In Windows würde der "serverstart"-Wert stattdessen so aussehen (bei Verwendung der Eingabeaufforderung):

  bash

  "serverstart": "SET DEBUG=express-locallibrary-tutorial:* & npm run devstart"
  

Wir können jetzt den Server fast genauso starten wie zuvor, aber mit dem devstart-Befehl.

Das generierte Projekt

Lassen Sie uns nun das Projekt ansehen, das wir gerade erstellt haben. Wir werden im Laufe der Zeit einige kleinere Änderungen daran vornehmen.

Verzeichnisstruktur

Das generierte Projekt hat die folgende Verzeichnisstruktur, nachdem Sie die Abhängigkeiten installiert haben (Dateien sind die Elemente, die nicht mit "/" beginnen). Die package.json-Datei definiert die Abhängigkeiten der Anwendung und andere Informationen. Sie definiert auch ein Startskript, das den Anwendungseintrittspunkt aufrufen wird, die JavaScript-Datei /bin/www. Diese richtet einige der Anwendungsfehlerbehandlungen ein und lädt dann app.js, um den Rest der Arbeit zu verrichten. Die Anwendungsrouten werden in separaten Modulen im routes/-Verzeichnis gespeichert. Die Vorlagen sind im /views-Verzeichnis gespeichert.

express-locallibrary-tutorial
    app.js
    /bin
        www
    package.json
    package-lock.json
    /node_modules
        [about 6700 subdirectories and files]
    /public
        /images
        /javascripts
        /stylesheets
            style.css
    /routes
        index.js
        users.js
    /views
        error.pug
        index.pug
        layout.pug

Die folgenden Abschnitte beschreiben die Dateien etwas genauer.

package.json

Die package.json Datei definiert die Abhängigkeiten der Anwendung und andere Informationen:

{
  "name": "express-locallibrary-tutorial",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  },
  "devDependencies": {
    "nodemon": "^3.1.10"
  }
}

Der Skriptabschnitt definiert zuerst ein "start"-Skript, das wir aufrufen, wenn wir npm start verwenden, um den Server zu starten (dieses Skript wurde vom Express Application Generator hinzugefügt). Aus der Skriptdefinition können Sie sehen, dass damit tatsächlich die JavaScript-Datei ./bin/www mit node gestartet wird.

Wir haben diesen Abschnitt bereits in Serverneustart bei Dateiänderungen aktivieren geändert, indem wir die devstart und serverstart Skripte hinzugefügt haben. Diese können verwendet werden, um dieselbe ./bin/www Datei mit nodemon statt node zu starten (diese Version der Skripte ist für Linux und macOS, wie oben besprochen).

{
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www",
    "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
  }
}

Die Abhängigkeiten umfassen das express-Paket und das Paket für unsere ausgewählte Vorlagen-Engine (pug). Zusätzlich haben wir folgende Pakete, die in vielen Webanwendungen nützlich sind:

• cookie-parser: Dient zum Parsen des Cookie-Headers und zur Befüllung von req.cookies (bietet im Wesentlichen eine bequeme Methode, um auf Cookie-Informationen zuzugreifen).
• debug: Ein kleines Node-Debugging-Tool, das nach dem Debugging-Verfahren des Node-Kerns modelliert ist.
• morgan: Eine HTTP-Anforderungs-Logger-Middleware für Node.
• http-errors: Erstellen von HTTP-Fehlern, wo nötig (für die Express-Fehlerbehandlung).

Die Standardversionen im generierten Projekt sind etwas veraltet. Ersetzen Sie den Abhängigkeitsabschnitt Ihrer package.json-Datei mit dem folgenden Text, der die neuesten Versionen dieser Bibliotheken zur Zeit des Schreibens angibt:

{
  "dependencies": {
    "cookie-parser": "^1.4.7",
    "debug": "^4.4.1",
    "express": "^5.1.0",
    "http-errors": "~2.0.0",
    "morgan": "^1.10.0",
    "pug": "3.0.3"
  }
}

Aktualisieren Sie dann Ihre installierten Abhängigkeiten mit dem Befehl:

npm install

npm update --save

www Datei

Die Datei /bin/www ist der Einstiegspunkt der Anwendung! Das allererste, was sie tut, ist, den "wirklichen" Einstiegspunkt der Anwendung (app.js im Projektstamm) zu require(), der das express()-Anwendungsobjekt einrichtet und zurückgibt. require() ist die CommonJS-Methode, um JavaScript-Code, JSON und andere Dateien in die aktuelle Datei zu importieren. Hier geben wir das app.js-Modul mit einem relativen Pfad an und lassen die optionale (.js) Dateierweiterung weg.

#!/usr/bin/env node

/**
 * Module dependencies.
 */

const app = require("../app");

Der Rest des Codes in dieser Datei richtet einen Node HTTP-Server ein, der app auf einen bestimmten Port setzt (definiert in einer Umgebungsvariable oder 3000, wenn die Variable nicht definiert ist), und beginnt mit dem Hören sowie dem Melden von Serverfehlern und Verbindungen. Für den Moment müssen Sie nichts Weiteres über den Code wissen (alles in dieser Datei ist "Boilerplate"), aber fühlen Sie sich frei, ihn zu überprüfen, wenn Sie interessiert sind.

app.js

Diese Datei erstellt ein express-Anwendungsobjekt (nach Konvention app genannt), richtet die Anwendung mit verschiedenen Einstellungen und Middleware ein und exportiert dann die App aus dem Modul. Der nachfolgende Code zeigt nur die Teile der Datei, die das App-Objekt erstellen und exportieren:

const express = require("express");

const app = express();
// …
module.exports = app;

Zurück in der obigen www-Einstiegspunktdatei ist es dieses module.exports-Objekt, das dem Anrufer bereitgestellt wird, wenn diese Datei importiert wird.

Lassen Sie uns die app.js-Datei im Detail durchgehen. Zuerst importieren wir einige nützliche Node-Bibliotheken in die Datei mittels require(), einschließlich http-errors, express, morgan und cookie-parser, die wir zuvor über npm für unsere Anwendung heruntergeladen haben; und path, eine Kern-Node-Bibliothek zum Parsen von Datei- und Verzeichnispfaden.

const createError = require("http-errors");
const express = require("express");
const path = require("path");
const cookieParser = require("cookie-parser");
const logger = require("morgan");

Dann require() wir Module aus unserem Routenverzeichnis. Diese Module/Dateien enthalten Code zur Behandlung spezifischer Gruppen von verwandten "Routen" (URL-Pfade). Wenn wir die Skelett-Anwendung erweitern, zum Beispiel um alle Bücher in der Bibliothek aufzulisten, fügen wir eine neue Datei zur Behandlung der buchbezogenen Routen hinzu.

const indexRouter = require("./routes/index");
const usersRouter = require("./routes/users");

Als Nächstes erstellen wir das app-Objekt mit unserem importierten express-Modul und verwenden es dann, um die View- (Vorlagen-)Engine einzurichten. Es gibt zwei Teile zur Einrichtung der Engine. Zuerst setzen wir den "views"-Wert, um den Ordner anzugeben, in dem die Vorlagen gespeichert werden (in diesem Fall der Unterordner /views). Dann setzen wir den "view engine"-Wert, um die Vorlagenbibliothek anzugeben (in diesem Fall "pug").

const app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");

Der nächste Abschnitt von Funktionen ruft app.use() auf, um die oben importierten Middleware-Bibliotheken in die Anforderungsverarbeitungskette einzufügen. Zum Beispiel sind express.json() und express.urlencoded() erforderlich, um req.body mit den Formularfeldern zu belegen. Nach diesen Bibliotheken verwenden wir auch die express.static-Middleware, die Express veranlasst, alle statischen Dateien im Verzeichnis /public im Projektstamm zu servieren.

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, "public")));

Da nun alle anderen Middleware eingerichtet sind, fügen wir unseren (zuvor importierten) Routen-Verarbeitungscode in die Anforderungsverarbeitungskette ein. Der importierte Code wird bestimmte Routen für die verschiedenen Teile der Website definieren:

app.use("/", indexRouter);
app.use("/users", usersRouter);

Die letzte Middleware in der Datei fügt Handler-Methoden für Fehler und HTTP 404-Antworten hinzu.

// catch 404 and forward to error handler
app.use((req, res, next) => {
  next(createError(404));
});

// error handler
app.use((err, req, res, next) => {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

Das Express-Anwendungsobjekt (app) ist nun vollständig konfiguriert. Der letzte Schritt besteht darin, es zu den Modul-Exports hinzuzufügen (das ist es, was es ermöglicht, dass es von /bin/www importiert wird).

module.exports = app;

Routen

Die Routendatei /routes/users.js ist unten gezeigt (Routendateien haben eine ähnliche Struktur, daher müssen wir nicht auch index.js zeigen). Zuerst wird das express-Modul geladen und verwendet, um ein express.Router-Objekt zu erhalten. Dann wird eine Route auf diesem Objekt angegeben und zuletzt wird der Router aus dem Modul exportiert (das ist es, was es ermöglicht, dass die Datei in app.js importiert wird).

const express = require("express");

const router = express.Router();

/* GET users listing. */
router.get("/", (req, res, next) => {
  res.send("respond with a resource");
});

module.exports = router;

Die Route definiert einen Callback, der aufgerufen wird, wann immer eine HTTP-GET-Anforderung mit dem richtigen Muster erkannt wird. Das übereinstimmende Muster ist die Route, die beim Importieren des Moduls angegeben wird ("/users") plus was auch immer in dieser Datei definiert ist ("/"). Mit anderen Worten, diese Route wird verwendet, wenn eine URL von /users/ empfangen wird.

Eine Sache von Interesse oben ist, dass die Callback-Funktion das dritte Argument next hat und daher eine Middleware-Funktion ist und kein einfacher Routen-Callback. Obwohl der Code derzeit das next-Argument nicht verwendet, könnte es in Zukunft nützlich sein, wenn Sie mehrere Routen-Handler zur '/'-Routen-Pfad hinzufügen möchten.

Ansichten (Vorlagen)

Die Ansichten (Vorlagen) werden im /views Verzeichnis gespeichert (wie in app.js angegeben) und haben die Dateiendung .pug. Die Methode Response.render() wird verwendet, um eine angegebene Vorlage zusammen mit den Werten von benannten Variablen, die in einem Objekt übergeben wurden, zu rendern und dann das Ergebnis als Antwort zurückzusenden. Im unten stehenden Code aus /routes/index.js können Sie sehen, wie diese Route eine Antwort unter Verwendung der Vorlage "index" rendert und die Template-Variable "title" übergibt.

/* GET home page. */
router.get("/", (req, res, next) => {
  res.render("index", { title: "Express" });
});

Die entsprechende Vorlage für die obenstehende Route ist unten angegeben (index.pug). Wir werden später mehr über die Syntax sprechen. Alles, was Sie jetzt wissen müssen, ist, dass die title-Variable (mit dem Wert 'Express') dort eingefügt wird, wo sie in der Vorlage angegeben ist.

extends layout

block content
  h1= title
  p Welcome to #{title}

Fordern Sie sich selbst heraus

Erstellen Sie eine neue Route in /routes/users.js, die den Text "You're so cool" bei der URL /users/cool/ anzeigt. Testen Sie es, indem Sie den Server starten und http://localhost:3000/users/cool/ in Ihrem Browser besuchen

Zusammenfassung

Sie haben nun ein Skelett-Website-Projekt für die Local Library erstellt und überprüft, dass es mit node läuft. Wichtiger noch, Sie verstehen auch, wie das Projekt strukturiert ist, sodass Sie eine gute Vorstellung davon haben, wo wir Änderungen vornehmen müssen, um Routen und Ansichten für unsere lokale Bibliothek hinzuzufügen.

Als nächstes werden wir das Skelett so modifizieren, dass es als Bibliothekswebsite funktioniert.

Siehe auch

• Express application generator (Express Dokumentation)
• Using template engines with Express (Express Dokumentation)

• Zurück
• Übersicht: Express Web-Framework (Node.js/JavaScript)
• Weiter