Heim > Artikel > Web-Frontend > Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion
Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion
- 王林Original
- 2023-11-08 11:27:28618Durchsuche
Um dem schnelllebigen Lebensstil moderner Menschen gerecht zu werden, haben immer mehr Restaurants damit begonnen, Online-Bestelldienste einzuführen, die es den Kunden ermöglichen, bequemer und schneller zu buchen, zu bestellen und zu bezahlen. In diesem Artikel wird erläutert, wie Sie mit Node.js ein einfaches Online-Bestell-Webprojekt implementieren und Codebeispiele bereitstellen.
- Umgebungskonfiguration
Zuerst müssen Sie Node.js und den NPM-Paketmanager installieren. Sie können das Installationspaket von der offiziellen Website herunterladen oder den Paketmanager verwenden, um es zu installieren. Öffnen Sie nach Abschluss der Installation das Befehlszeilentool und geben Sie den folgenden Befehl ein, um die Version zu bestätigen.
node -v //输出node版本号 npm -v //输出npm版本号
- Projektinitialisierung
Verwenden Sie den npm-Paketmanager, um das Projekt zu initialisieren und die Datei package.json zu generieren.
npm init -y
- Abhängige Module installieren
Verwenden Sie im Projektstammverzeichnis npm, um das Express-Framework und andere erforderliche Module zu installieren.
npm install express body-parser ejs --save
Express ist ein häufig verwendetes Webanwendungs-Framework in Node.js, das einfach und schnell einen Webserver erstellen kann, der zum Verarbeiten von HTTP-Anforderungskörpern, einschließlich Abfragezeichenfolgen, Formulardaten usw., verwendet wird. ejs ist eine Template-Engine, die zum Rendern dynamischer Seiten verwendet wird.
- Server erstellen
Damit Benutzer auf unsere Webanwendung zugreifen können, müssen wir einen Server erstellen. Erstellen Sie im Stammverzeichnis des Projekts eine neue server.js-Datei und schreiben Sie den folgenden Code:
const express = require('express');
const app = express();
const port = 3000;
app.listen(port, function() {
console.log(`listening on port ${port}`);
});Dieser Code erstellt eine Express-Anwendung und lauscht auf Port 3000. Führen Sie den folgenden Befehl aus, um den Server zu starten.
node server.js
Geben Sie http://localhost:3000 in den Browser ein. Sie sollten die Seite „Cannot GET /“ sehen, die anzeigt, dass der Server gestartet wurde.
- Seiten schreiben
Damit Benutzer Essen bestellen können, müssen einige Webseiten erstellt werden. Erstellen Sie im Stammverzeichnis des Projekts einen neuen Ansichtsordner zum Speichern der Seiten. Erstellen Sie die Datei index.ejs und schreiben Sie den folgenden Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线点餐</title>
</head>
<body>
<h1>欢迎来到我们的餐厅</h1>
<h2>我们的菜单如下：</h2>
<ul>
<% for(var i = 0; i < menu.length; i++) { %>
<li><%= menu[i].name %> - <%= menu[i].price %>元</li>
<% } %>
</ul>
</body>
</html>Dieser Code verwendet die EJS-Vorlagen-Engine, um eine Menüseite zu rendern. Unter diesen ist das Menü eine dynamische Variable, und Daten werden vom Server abgerufen, wenn der Code ausgeführt wird.
- Routenverarbeitung
Damit die Seite Menüdaten anzeigt, müssen Sie eine Routing-Verarbeitungsfunktion schreiben. Fügen Sie in server.js den folgenden Code hinzu:
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
const menu = [
{name: '鸡蛋炒饭', price: 12},
{name: '牛肉面', price: 15},
{name: '鱼香肉丝', price: 18},
{name: '红烧肉', price: 30},
];
res.render('index', {menu: menu});
});Dieser Code bindet die Route-Handler-Funktion an die GET-Anfrage. Wenn auf die Root-Route / zugegriffen wird, sendet der Server die Menüdaten, rendert die index.ejs-Vorlage und konvertiert Die Daten werden an die Template-Engine übergeben und schließlich wird die HTML-Seite generiert.
- CSS-Stile hinzufügen
Um die Seite zu verschönern, müssen Sie einige CSS-Stile hinzufügen. Erstellen Sie einen neuen öffentlichen Ordner im Stammverzeichnis und erstellen Sie eine style.css-Datei. Fügen Sie den folgenden Code hinzu:
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
}Dieser Code definiert die Hintergrundfarbe, Schriftart, Ausrichtung und andere Stile, um die Seite schöner zu machen.
- Ändern Sie die Vorlagendatei
Damit die HTML-Seite mit der CSS-Stildatei verknüpft werden kann, muss die Vorlagendatei geändert werden. Fügen Sie den folgenden Code zur Datei index.ejs hinzu:
<link rel="stylesheet" href="/style.css" />
Dieser Code weist den Browser an, auf die Datei style.css im öffentlichen Ordner zu verweisen und Seitenstile hinzuzufügen.
- Zusammenfassung
In diesem Artikel wird die Verwendung der Node.js-, Express- und EJS-Vorlagen-Engine zur Implementierung eines Online-Bestell-Webprojekts vorgestellt und Codebeispiele bereitgestellt. In diesem Artikel können Leser lernen, wie man das Projekt initialisiert, abhängige Module installiert, Server erstellt, Seiten schreibt, Routing handhabt, CSS-Stile hinzufügt und andere Vorgänge durchführt. Leser können auf Basis dieser Codes ein umfassenderes Online-Bestellsystem weiterentwickeln.
Das obige ist der detaillierte Inhalt vonWebprojekt mit Node.js zur Implementierung der Online-Bestellfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!