suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie mehrere Seitensprünge in Node.js

So implementieren Sie mehrere Seitensprünge in Node.js

PHPz
PHPzOriginal
2023-04-06 08:53:16971Durchsuche

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.

  1. 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

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.

  1. 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

Dieser Befehl installiert Express.js und fügt es zu unseren Projektabhängigkeiten hinzu.

  1. 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>

Dies ist eine sehr einfache Seite mit nur einem Titel und etwas Text. Wir werden diese Seite in den nächsten Schritten verwenden.

  1. 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()

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

Sobald Sie fertig sind, fügen Sie den folgenden Code oben in app.js hinzu: 

app.set('view engine', 'ejs')

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'))

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')
})

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.

  1. 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>

Fügen Sie dann den folgenden Code in app.js hinzu: 

app.get('/about', (req, res) => {
  res.render('about')
})

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.

  1. 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>

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!

JavaScript node.js 中间件 json html express public JS 样式表 http
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So installieren Sie Node.js auf dem Laufwerk D und legen die NPM-Quelle auf den Taobao-Spiegel festNächster Artikel：So installieren Sie Node.js auf dem Laufwerk D und legen die NPM-Quelle auf den Taobao-Spiegel fest

In Verbindung stehende Artikel

Mehr sehen