Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion-js-Tutorial-php.cn

Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion

王林

Freigeben： 2023-11-08 11:27:28

Original

671 Leute haben es durchsucht

Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion

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版本号

Nach dem Login kopieren

Projektinitialisierung

Verwenden Sie den npm-Paketmanager, um das Projekt zu initialisieren und die Datei package.json zu generieren.

npm init -y

Nach dem Login kopieren

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

Nach dem Login kopieren

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}`);
});

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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" />

Nach dem Login kopieren

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!