Mit der rasanten Entwicklung der Frontend-Entwicklung sind moderne Webanwendungen keine Single Page Applications (SPA) mehr. Stattdessen werden sie komplexer und umfassen viele Seiten und Komponenten. Um solche Webanwendungen zu unterstützen, benötigen wir ein flexibles und leistungsstarkes Webframework, das die Navigation und Reaktionsfähigkeit mehrerer Seiten unterstützen kann. Node.js bietet hierfür viele hervorragende Frameworks, wie Express.js, Koa.js usw. In diesem Artikel erfahren Sie, wie Sie das Node.js-Framework verwenden, um die Multi-Page-Jump-Funktionalität zu implementieren.
- Erstellen Sie ein neues Node.js-Projekt
Zuerst müssen wir ein neues Node.js-Projekt erstellen. Wenn Sie bereits über ein bestehendes Projekt verfügen, können Sie diesen Schritt überspringen. Geben Sie in der Befehlszeile den folgenden Befehl ein:
mkdir myproject
cd myproject
npm init
Nach dem Login kopieren
Nachdem Sie diesen Befehl ausgeführt haben, werden eine Reihe von Eingabeaufforderungen angezeigt, in denen Sie aufgefordert werden, den Projektnamen, die Versionsnummer, die Beschreibung und andere Informationen einzugeben. Nach Abschluss erhalten wir eine package.json-Datei, eine Datei, in der Projektinformationen gespeichert sind. In der Datei package.json sehen wir alle Abhängigkeiten, die wir installiert haben.
- Express.js installieren
Wie bereits erwähnt, ist Express.js ein häufig verwendetes Node.js-Webanwendungsframework, das eine schnelle und flexible Möglichkeit zum Erstellen von Webanwendungen bietet. Wir werden Express.js verwenden, um die mehrseitige Sprungfunktion zu implementieren. Die Installation von Express.js ist einfach. Geben Sie einfach den folgenden Befehl ein:
npm install express --save
Nach dem Login kopieren
Dieser Befehl installiert Express.js und fügt es zu unseren Projektabhängigkeiten hinzu.
- Erstellen Sie eine Seite
Jetzt müssen wir eine einfache Seite erstellen, um unsere mehrseitige Sprungfunktion zu testen. Erstellen Sie im Stammverzeichnis des Projekts eine Datei mit dem Namen „index.html“ und fügen Sie den folgenden Inhalt hinzu:
<!DOCTYPE html>
<html>
<head>
<title>Express.js Multiple Pages</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to my Express.js app.</p>
</body>
</html>
Nach dem Login kopieren
Dies ist eine sehr einfache Seite mit nur einem Titel und etwas Text. Wir werden diese Seite in den nächsten Schritten verwenden.
- Express.js-Anwendung erstellen
Erstellen Sie im Stammverzeichnis des Projekts eine Datei mit dem Namen „app.js“, in die wir unsere Anwendung schreiben.
Zuerst müssen wir die erforderlichen Express.js-Module einbinden:
const express = require('express')
const app = express()Nach dem Login kopieren
Als nächstes müssen wir unsere View-Engine angeben. Die View Engine hilft uns beim Rendern von HTML-Seiten auf der Serverseite. Wir werden EJS (Embedded JavaScript) als unsere Ansichts-Engine verwenden. Bitte beachten Sie, dass wir EJS vor der Verwendung installieren müssen. EJS kann mit dem folgenden Befehl installiert werden:
npm install ejs --save
Nach dem Login kopieren
Sobald Sie fertig sind, fügen Sie den folgenden Code oben in app.js hinzu:
app.set('view engine', 'ejs')Nach dem Login kopieren
Jetzt müssen wir der Express.js-Anwendung mitteilen, wie sie mit statischen Dateien wie Stylesheets und Skripten umgehen soll . Dazu verwenden wir die integrierte Middleware von Express.js. Fügen Sie den folgenden Code oben in Ihrer app.js-Datei hinzu:
app.use(express.static('public'))Nach dem Login kopieren
Dieser Code weist Express.js an, den öffentlichen Ordner als statischen Ressourcenordner zu behandeln. Auf alle darin gespeicherten Dateien kann über einen HTTP-Server zugegriffen werden.
Jetzt müssen wir unsere erste Route erstellen. Das Routing bestimmt, was passiert, wenn wir eine bestimmte URL besuchen. Wir erstellen eine Route, die unsere index.html-Seite auf der Serverseite rendert, wenn ein Benutzer die Stamm-URL besucht.
Fügen Sie den folgenden Code in app.js hinzu:
app.get('/', (req, res) => {
res.render('index')
})Nach dem Login kopieren
Dieser Code weist Express.js an, eine GET-Route zu erstellen, die eine Ansicht mit dem Namen „index“ auf der Serverseite rendert, wenn der Benutzer die Stamm-URL besucht.
- Weitere Seiten hinzufügen
Jetzt haben wir unsere erste Seite und erste Route fertiggestellt. Als Nächstes fügen wir weitere Seiten und Routen hinzu.
Erstellen Sie eine Datei mit dem Namen „about.html“, die Informationen zu unserer Anwendung enthält. Fügen Sie Folgendes hinzu:
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body>
<h1>About Us</h1>
<p>We are a team of Node.js developers.</p>
</body>
</html>
Nach dem Login kopieren
Fügen Sie dann den folgenden Code in app.js hinzu:
app.get('/about', (req, res) => {
res.render('about')
})Nach dem Login kopieren
Dieser Code weist Express.js an, eine GET-Route zu erstellen, die den Namen „about“-Ansicht wiedergibt.
Wir können auch weitere Seiten hinzufügen. Erstellen Sie einfach eine HTML-Datei für jede Seite und eine Route für jede Seite.
- Links zu anderen Seiten
Da wir nun mehrere Seiten und Routen erstellt haben, müssen wir Links hinzufügen, damit Benutzer zu anderen Seiten navigieren können. Fügen Sie in index.html den folgenden Code vor dem Text ein:
<a href="/about">About Us</a>
Nach dem Login kopieren
Dieser Link führt den Benutzer zur Seite „Über uns“. Fügen Sie weitere Seiten hinzu.
Jetzt haben wir die mehrseitige Sprungfunktion implementiert. Wenn der Benutzer auf den Link klickt, navigiert er zu einer anderen Seite und die Anwendung rendert die HTML-Seite serverseitig.
Zusammenfassung
In diesem Artikel haben wir gelernt, wie man das Node.js-Framework (insbesondere Express.js) verwendet, um die mehrseitige Sprungfunktion zu implementieren. Wir haben mehrere Seiten und Routen erstellt und Links für die Benutzernavigation bereitgestellt. Dies ist eine sehr einfache Implementierung, die Ihnen jedoch dabei helfen kann, schnell mehrseitige Anwendungen zu erstellen. Probieren Sie diesen und andere Codes aus, um besser zu verstehen, wie Sie Webanwendungen mit dem Node.js-Framework entwickeln.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie mehrere Seitensprünge in Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
