Heim >Web-Frontend >js-Tutorial >Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion
Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion
- 王林Original
- 2023-11-08 15:42:271226Durchsuche
Ein Webprojekt, das Node.js verwendet, um die Online-Bestellfunktion für Lebensmittel zu implementieren
Mit der Popularität des Internets und der Entwicklung mobiler Geräte bevorzugen viele Menschen, Lebensmittel lieber online zu bestellen, anstatt in ein physisches Geschäft zu gehen. Um den Bedürfnissen der Nutzer gerecht zu werden, haben viele Restaurants auch damit begonnen, Online-Bestellplattformen einzuführen.
In diesem Artikel wird erläutert, wie Sie mit Node.js ein einfaches Webprojekt mit einer Online-Bestellfunktion für Lebensmittel erstellen, und es werden spezifische Codebeispiele bereitgestellt.
-
Vorbereitung der Entwicklungsumgebung
Stellen Sie zunächst sicher, dass Sie die neueste Version von Node.js installiert haben. Sie können überprüfen, ob die Installation erfolgreich war, indem Sie den folgenden Befehl in einem Terminal- oder Befehlszeilenfenster ausführen:node -v
Dadurch wird die Versionsnummer Ihres aktuell installierten Node.js angezeigt. Wenn es nicht installiert ist, können Sie es auf der offiziellen Website von Node.js herunterladen und installieren.
Stellen Sie zweitens sicher, dass Sie einen geeigneten Code-Editor installiert haben, z. B. Visual Studio Code oder Atom.
-
Projektordner erstellen
Wählen Sie einen geeigneten Speicherort auf Ihrem Computer und erstellen Sie einen Ordner speziell zum Speichern von Projektcode. Gehen Sie in der Befehlszeile oder im Terminal in den Ordner und führen Sie den folgenden Befehl aus, um das Projekt zu initialisieren:npm init -y
Dadurch wird eine Datei mit dem Namen
package.jsonerstellt, die die grundlegenden Informationen des Projekts und enthält Abhängigkeiten.package.json的文件，其中包含了项目的基本信息和依赖项。 -
安装必要的依赖项
在项目文件夹中，执行以下命令来安装所需的依赖项：npm install express body-parser ejs --save
这将安装Express、body-parser和ejs模块，并将其添加到
package.json文件中的dependencies中。 -
创建项目文件结构
在项目文件夹中，创建以下目录和文件结构：- public - css - main.css - views - index.ejs - server.js在
server.js中，添加以下代码：const express = require('express'); const bodyParser = require('body-parser'); const ejs = require('ejs'); const app = express(); app.use(express.static('public')); app.use(bodyParser.urlencoded({ extended: true })); app.set('view engine', 'ejs'); app.get('/', (req, res) => { res.render('index'); }); app.post('/order', (req, res) => { const { name, items } = req.body; // 处理订单逻辑 res.send('订单提交成功！'); }); app.listen(3000, () => { console.log('服务器已启动，监听端口3000'); });完成上述操作后，你的项目文件结构应该如下所示：
- public - css - main.css - views - index.ejs - server.js - package.json -
编写前端页面
打开index.ejs文件，在其中编写HTML和CSS代码，创建一个简单的订单页面。示例代码如下：<!DOCTYPE html> <html> <head> <title>在线订餐</title> <link rel="stylesheet" type="text/css" href="/css/main.css"> </head> <body> <h1>在线订餐</h1> <form action="/order" method="post"> <input type="text" name="name" placeholder="姓名"> <input type="checkbox" name="items" value="item1"> 餐点1 <input type="checkbox" name="items" value="item2"> 餐点2 <input type="checkbox" name="items" value="item3"> 餐点3 <button type="submit">提交订单</button> </form> </body> </html> -
运行项目
在终端或命令行中，进入项目文件夹，并执行以下命令来启动服务器：node server.js
如果一切正常，你应该在终端中看到服务器已启动的提示信息。
然后，打开浏览器，在地址栏中输入
Installieren Sie die erforderlichen Abhängigkeitenhttp://localhost:3000Führen Sie im Projektordner den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren:
Dadurch werden die Express-, Body-Parser- und EJS-Module installiert und zu <code>dependencies hinzugefügt in der package.json-Datei.
Erstellen Sie im Projektordner das folgende Verzeichnis und die folgende Dateistruktur:
rrreee🎜Fügen Sie inserver.js den folgenden Code hinzu: 🎜rrreee🎜Nachdem Sie die oben genannten Schritte ausgeführt haben, Die Struktur Ihrer Projektdatei sollte wie folgt aussehen: 🎜rrreee🎜🎜🎜Schreiben der Frontend-Seite🎜Öffnen Sie die Datei index.ejs und schreiben Sie den HTML- und CSS-Code hinein, um eine einfache Bestellseite zu erstellen. Der Beispielcode lautet wie folgt: 🎜rrreee🎜🎜🎜Führen Sie das Projekt aus🎜Gehen Sie im Terminal oder in der Befehlszeile zum Projektordner und führen Sie den folgenden Befehl aus, um den Server zu starten:🎜rrreee🎜Wenn alles in Ordnung ist, sollten Sie das sehen Der Server wurde im Terminal gestartet. Prompt-Informationen. 🎜🎜Öffnen Sie dann den Browser und geben Sie http://localhost:3000 in die Adressleiste ein, um auf die Bestellseite zuzugreifen. 🎜🎜Geben Sie Ihren Namen ein und wählen Sie die gewünschte Mahlzeit aus. Nachdem Sie auf die Schaltfläche „Bestellung senden“ geklickt haben, wird auf der Seite eine Meldung angezeigt, dass die Bestellung erfolgreich übermittelt wurde. 🎜🎜🎜🎜An diesem Punkt haben Sie mit Node.js erfolgreich ein einfaches Webprojekt mit Online-Bestellfunktion erstellt. 🎜🎜Zusammenfassung🎜In diesem Artikel wird detailliert beschrieben, wie Sie mit Node.js ein einfaches Webprojekt mit Online-Bestellfunktion erstellen. Durch Erstellen der Projektdateistruktur, Installieren von Abhängigkeiten und Schreiben grundlegender Routing- und Front-End-Seiten kann eine einfache Online-Bestellfunktion implementiert werden. Natürlich handelt es sich hier nur um ein Einstiegsbeispiel, das Sie noch weiter ausbauen und optimieren können. 🎜🎜Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die Webentwicklung von Node.js zu verstehen und die Online-Bestellfunktion zu implementieren. Ich wünsche Ihnen viel Erfolg bei der Entwicklung von Webprojekten mit Node.js! 🎜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!