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

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

王林original: 2023-11-08 15:42:271230parcourir

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
```
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
```
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
```
这将安装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
```
如果一切正常，你应该在终端中看到服务器已启动的提示信息。

然后，打开浏览器，在地址栏中输入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!

json css html express JS visual studio visual studio code http atom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Projet Web de visualisation de données à l'aide de Node.jsArticle suivant：Projet Web de visualisation de données à l'aide de Node.js

Articles Liés

Voir plus