Projet Web utilisant Node.js pour implémenter la fonction de commande en ligne-js tutoriel-php.cn

Projet Web utilisant Node.js pour implémenter la fonction de commande en ligne

王林

Libérer： 2023-11-08 15:42:27

original

1216 Les gens l'ont consulté

Projet Web utilisant Node.js pour implémenter la fonction de commande en ligne

Un projet Web utilisant Node.js pour implémenter la fonction de commande de nourriture en ligne

Avec la popularité d'Internet et le développement des appareils mobiles, de nombreuses personnes ont commencé à préférer commander de la nourriture en ligne plutôt que d'aller dans un magasin physique. Afin de répondre aux besoins des utilisateurs, de nombreux restaurants ont également commencé à lancer des plateformes de commande en ligne.

Cet article expliquera comment utiliser Node.js pour créer un projet Web simple de fonction de commande de nourriture en ligne et fournira des exemples de code spécifiques.

Préparation de l'environnement de développement
Tout d'abord, assurez-vous que la dernière version de Node.js est installée. Vous pouvez vérifier si l'installation a réussi en exécutant la commande suivante dans un terminal ou une fenêtre de ligne de commande :
```
node -v
```
Copier après la connexion
Cela affichera le numéro de version de votre Node.js actuellement installé. S'il n'est pas installé, vous pouvez vous rendre sur le site officiel de Node.js pour le télécharger et l'installer.
Deuxièmement, assurez-vous d'avoir installé un éditeur de code approprié, tel que Visual Studio Code ou Atom.
Créer un dossier de projet
Choisissez un emplacement approprié sur votre ordinateur et créez un dossier spécifiquement pour stocker le code du projet. Dans la ligne de commande ou le terminal, allez dans le dossier et exécutez la commande suivante pour initialiser le projet :
```
npm init -y
```
Copier après la connexion
Cela créera un fichier nommé package.json, qui contient les informations de base du projet et Dépendances. package.json的文件，其中包含了项目的基本信息和依赖项。
安装必要的依赖项
在项目文件夹中，执行以下命令来安装所需的依赖项：
```
npm install express body-parser ejs --save
```
Copier après la connexion
这将安装Express、body-parser和ejs模块，并将其添加到package.json文件中的dependencies中。

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

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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

编写前端页面
打开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>

Copier après la connexion

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

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

Installez les dépendances nécessaires

rrreee

Cela installera les modules express, body-parser et ejs et les ajoutera aux dépendances <code> dans le fichier package.json.

Créer la structure des fichiers du projet

Dans le dossier du projet, créez la structure de répertoires et de fichiers suivante :

rrreee🎜Dans server.js, ajoutez le code suivant : 🎜rrreee🎜Après avoir terminé ce qui précède, La structure de votre fichier de projet devrait ressembler à ceci : 🎜rrreee🎜🎜🎜Écrire la page frontale🎜Ouvrez le fichier index.ejs et écrivez-y le code HTML et CSS pour créer une page de commande simple. L'exemple de code est le suivant : 🎜rrreee🎜🎜🎜Exécutez le projet🎜Dans le terminal ou la ligne de commande, accédez au dossier du projet et exécutez la commande suivante pour démarrer le serveur :🎜rrreee🎜Si tout va bien, vous devriez voir le le serveur a démarré dans les informations d'invite du terminal. 🎜🎜Ensuite, ouvrez le navigateur et saisissez http://localhost:3000 dans la barre d'adresse pour accéder à la page de commande. 🎜🎜Remplissez votre nom et sélectionnez le repas souhaité. Après avoir cliqué sur le bouton Soumettre la commande, la page affichera un message indiquant que la commande a été soumise avec succès. 🎜🎜🎜🎜À ce stade, vous avez réussi à créer un projet Web simple avec une fonction de commande en ligne à l'aide de Node.js. 🎜🎜Résumé🎜Cet article présente en détail comment utiliser Node.js pour créer un projet Web simple avec une fonction de commande en ligne. En créant la structure des fichiers du projet, en installant les dépendances et en écrivant des pages de routage de base et des pages frontales, une simple fonction de commande en ligne peut être implémentée. Bien sûr, il ne s’agit que d’un exemple d’entrée de gamme et vous pouvez l’étendre et l’optimiser davantage. 🎜🎜J'espère que cet article pourra vous être utile pour comprendre le développement Web Node.js et implémenter la fonction de commande en ligne. Je vous souhaite du succès dans le développement de projets web avec Node.js ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!