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

Inhaltsverzeichnis

在线订餐

Heim

Web-Frontend

js-Tutorial

Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion

Nov 08, 2023 pm 03:42 PM

nodejs 在线订餐 Webprojekt

Webprojekt mit Node.js zur Implementierung der Online-Bestellfunktion

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
```
Nach dem Login kopieren
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
```
Nach dem Login kopieren
Dadurch wird eine Datei mit dem Namen package.json erstellt, die die grundlegenden Informationen des Projekts und enthält Abhängigkeiten. package.json的文件，其中包含了项目的基本信息和依赖项。
安装必要的依赖项
在项目文件夹中，执行以下命令来安装所需的依赖项：
```
npm install express body-parser ejs --save
```
Nach dem Login kopieren
这将安装Express、body-parser和ejs模块，并将其添加到package.json文件中的dependencies中。

创建项目文件结构
在项目文件夹中，创建以下目录和文件结构：

- public
  - css
    - main.css
- views
  - index.ejs
- server.js

Nach dem Login kopieren

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

Nach dem Login kopieren

完成上述操作后，你的项目文件结构应该如下所示：

- public
  - css
    - main.css
- views
  - index.ejs
- server.js
- package.json

Nach dem Login kopieren

编写前端页面
打开index.ejs文件，在其中编写HTML和CSS代码，创建一个简单的订单页面。示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>在线订餐</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css">
  </head>
  <body>
    <h1 id="在线订餐">在线订餐</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>

Nach dem Login kopieren

运行项目
在终端或命令行中，进入项目文件夹，并执行以下命令来启动服务器：
```
node server.js
```
Nach dem Login kopieren
如果一切正常，你应该在终端中看到服务器已启动的提示信息。

然后，打开浏览器，在地址栏中输入http://localhost:3000

Installieren Sie die erforderlichen Abhängigkeiten

rrreee

Dadurch werden die Express-, Body-Parser- und EJS-Module installiert und zu <code>dependencies hinzugefügt in der package.json-Datei.

Projektdateistruktur erstellen

Erstellen Sie im Projektordner das folgende Verzeichnis und die folgende Dateistruktur:

rrreee🎜Fügen Sie in server.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!

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