Heim > Web-Frontend > Front-End-Fragen und Antworten > Erstellen Sie eine persönliche Website mit NodeJS

Erstellen Sie eine persönliche Website mit NodeJS

WBOY
Freigeben: 2023-05-25 19:11:06
Original
1779 Leute haben es durchsucht

Als Entwickler ist eine persönliche Website eine sehr wichtige Sache. Es kann nicht nur zur Präsentation Ihrer Fähigkeiten und Erfahrungen genutzt werden, sondern auch als Experimentierplattform zum Ausprobieren neuer Technologien und Konzepte dienen.

Heutzutage wird Node.js in der Webentwicklung immer beliebter und immer mehr Menschen entscheiden sich dafür, damit persönliche Websites zu erstellen. In diesem Artikel erfahren Sie, wie Sie mit Node.js und einigen beliebten npm-Paketen Ihre eigene persönliche Website erstellen.

1. Node.js installieren

Zuerst müssen wir Node.js installieren. Sie finden das Installationspaket auf der offiziellen Website von Node.js (https://nodejs.org/) und klicken dort auf die Schaltfläche „Herunterladen“. Der Installationsvorgang ist sehr einfach. Befolgen Sie einfach die Anweisungen.

2. Projekt erstellen

Sobald Node.js installiert ist, können wir mit der Erstellung unseres Projekts beginnen. Öffnen Sie einen leeren Ordner und geben Sie ihn in die Befehlszeile ein. Geben Sie dann den folgenden Befehl ein:

npm init
Nach dem Login kopieren

Dies führt Sie zum Erstellen eines neuen npm-Projekts. Während dieses Vorgangs müssen Sie Informationen zum Projekt angeben, z. B. Name, Versionsnummer usw. Nach Abschluss finden Sie im Projektordner eine package.json-Datei, die einige Metadaten zum Projekt enthält.

3. Abhängigkeiten installieren

Als nächstes müssen wir unsere Abhängigkeiten installieren. Geben Sie den folgenden Befehl in die Befehlszeile ein:

npm install express jade body-parser --save
Nach dem Login kopieren

Dadurch werden die Express-, Jade- und Body-Parser-Pakete installiert, damit wir Websites erstellen und den Datenfluss zwischen Websites ermöglichen können. Beachten Sie, dass wir die Option --save verwenden, um diese Pakete zu den Abhängigkeiten des Projekts hinzuzufügen. Das bedeutet, dass sie zusammen installiert werden, wenn wir den Befehl npm install verwenden.

4. Server erstellen

Jetzt können wir mit der Erstellung unseres Servers beginnen. Erstellen Sie eine neue Datei server.js und geben Sie den folgenden Code ein:

var express = require('express');
var app = express();

app.set('view engine', 'jade');

app.get('/', function(req, res) {
  res.render('index');
});

app.listen(3000, function() {
  console.log('Server started on port 3000');
});
Nach dem Login kopieren

Werfen wir einen kurzen Blick auf diesen Codeblock.

var express = require('express');
var app = express();
Nach dem Login kopieren

Zuerst verwenden wir die Funktion require, um das Express-Modul einzuführen und eine neue Express-Instanz zu erstellen. Wir speichern dies in einer Variablen namens app.

app.set('view engine', 'jade');
Nach dem Login kopieren

Als nächstes teilen wir Express mit, dass wir die Jade-Vorlagen-Engine zum Rendern unserer Ansichten verwenden werden. Wir verwenden die Methode app.set, um die Erweiterung der View Engine und der Vorlagendateien festzulegen.

app.get('/', function(req, res) {
  res.render('index');
});
Nach dem Login kopieren

Das ist unser Router. Es teilt Express mit, an welche URLs Antworten zurückgegeben werden sollen. In diesem Fall setzen wir es auf den Root-Pfad „/“. Wenn der Router die Anfrage empfängt, rendert er unsere Jade-Ansicht.

app.listen(3000, function() {
  console.log('Server started on port 3000');
});
Nach dem Login kopieren

Schließlich verwenden wir die app.listen-Methode von Express, um unseren Server zu starten. Wir setzen den Port auf 3000 und geben eine Meldung auf der Konsole aus, um anzuzeigen, dass der Server gestartet wurde.

5. Ansicht erstellen

Jetzt erstellen wir unsere Jade-Ansicht. Jade ist eine Template-Engine für HTML, die Einrückungen zum Organisieren von HTML-Code verwendet. Erstellen Sie einen neuen Ansichtsordner und erstellen Sie darin eine neue Datei namens index.jade. Geben Sie den folgenden Code ein:

html
  head
    title My Personal Website
  body
    h1 Hello, World!
Nach dem Login kopieren

Dies ist ein minimales Beispiel einer Jade-Ansicht. Es wird lediglich ein Titel auf der Seite angezeigt. Hier meinen wir nur, dass die Jade-Template-Engine HTML-Code generiert. Im Gegensatz zu HTML verwendet Jade Einrückungen anstelle von Tags.

6. Testen Sie die Website

Wir haben alle Bauschritte abgeschlossen. Jetzt ist es an der Zeit, unsere Website zu testen. Geben Sie den folgenden Befehl in die Befehlszeile ein:

node server.js
Nach dem Login kopieren

Dadurch wird unser Server gestartet und auf Port 3000 eingestellt. Öffnen Sie nun Ihren Browser und geben Sie „localhost:3000“ in die Adressleiste ein. Sie sehen die Seitenanzeige „Hello, World!“.

Herzlichen Glückwunsch, wir haben Node.js und einige beliebte npm-Pakete erfolgreich verwendet, um unsere persönliche Website zu erstellen!

Zusammenfassung

In diesem Artikel haben wir gelernt, wie wir Node.js und einige beliebte npm-Pakete verwenden, um unsere persönliche Website zu erstellen. Wir haben unsere Website Schritt für Schritt aufgebaut, angefangen bei der Installation von Node.js bis hin zur Erstellung eines einfachen Express-Servers und einer Jade-Ansicht.

Natürlich ist das erst der Anfang. Sie können fortschrittlichere Technologien und Pakete verwenden, um die Funktionalität und das Erscheinungsbild Ihrer Website zu erweitern. Aber jetzt wissen Sie, wie Sie mit der Erstellung Ihrer persönlichen Website beginnen können. Möge Ihre Website erfolgreich sein!

Das obige ist der detaillierte Inhalt vonErstellen Sie eine persönliche Website mit NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage