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 11:27:28673parcourir
Afin de répondre au mode de vie trépidant des gens modernes, de plus en plus de restaurants ont commencé à mettre en œuvre des services de commande en ligne, permettant aux clients de réserver, de commander et de payer plus facilement et plus rapidement. Cet article explique comment utiliser Node.js pour implémenter un projet Web de commande en ligne simple et fournit des exemples de code.
- Configuration de l'environnement
Vous devez d'abord installer Node.js et le gestionnaire de packages npm. Vous pouvez télécharger le package d'installation depuis le site officiel ou utiliser le gestionnaire de packages pour l'installer. Une fois l'installation terminée, ouvrez l'outil de ligne de commande et entrez la commande suivante pour confirmer la version.
node -v //输出node版本号 npm -v //输出npm版本号
- Initialisation du projet
Utilisez le gestionnaire de packages npm pour initialiser le projet et générer le fichier package.json.
npm init -y
- Installer les modules dépendants
Dans le répertoire racine du projet, utilisez npm pour installer le framework Express et les autres modules nécessaires.
npm install express body-parser ejs --save
Parmi eux, Express est un framework d'application Web couramment utilisé dans Node.js, qui peut créer facilement et rapidement un serveur Web ; l'analyseur de corps est utilisé pour traiter les corps des requêtes HTTP, y compris la chaîne de requête, les données de formulaire, etc. ; ejs est un moteur de modèles, utilisé pour le rendu de pages dynamiques.
- Créer un serveur
Pour que les utilisateurs puissent accéder à notre application Web, nous devons créer un serveur. Dans le répertoire racine du projet, créez un nouveau fichier server.js et écrivez le code suivant :
const express = require('express');
const app = express();
const port = 3000;
app.listen(port, function() {
console.log(`listening on port ${port}`);
});Ce code crée une application Express et écoute le port 3000. Exécutez la commande suivante pour démarrer le serveur.
node server.js
Entrez http://localhost:3000 dans le navigateur, vous devriez voir une page "Cannot GET /", indiquant que le serveur a été démarré.
- Pages d'écriture
Afin de permettre aux utilisateurs de commander de la nourriture, certaines pages Web doivent être créées. Dans le répertoire racine du projet, créez un nouveau dossier de vues pour stocker les pages. Créez le fichier index.ejs et écrivez le code suivant :
<!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>Ce code utilise le moteur de modèle ejs pour afficher une page de menu. Parmi eux, le menu est une variable dynamique et les données seront obtenues du serveur lors de l'exécution du code.
- Traitement d'itinéraire
Pour que la page affiche les données de menu, vous devez écrire une fonction de traitement d'itinéraire. Dans server.js, ajoutez le code suivant :
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});
});Ce code lie la fonction de gestionnaire de route à la requête GET Lors de l'accès à la route racine /, le serveur enverra les données du menu, restituera le modèle index.ejs et convertira. les données transmises au moteur de template, la page HTML est finalement générée.
- Ajouter des styles CSS
Afin d'embellir la page, vous devez ajouter des styles CSS. Créez un nouveau dossier public dans le répertoire racine et créez un fichier style.css. Ajoutez le code suivant :
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;
}Ce code définit la couleur d'arrière-plan, la police, l'alignement et d'autres styles pour rendre la page plus belle.
- Modifier le fichier modèle
Pour que la page HTML soit liée au fichier de style CSS, le fichier modèle doit être modifié. Ajoutez le code suivant au fichier index.ejs :
<link rel="stylesheet" href="/style.css" />
Ce code indique au navigateur de référencer le fichier style.css dans le dossier public et d'ajouter des styles de page.
- Résumé
Cet article explique comment utiliser le moteur de modèles Node.js, Express et ejs pour mettre en œuvre un projet Web de commande en ligne et fournit des exemples de code. Grâce à cet article, les lecteurs peuvent apprendre à initialiser le projet, installer des modules dépendants, créer des serveurs, écrire des pages, gérer le routage, ajouter des styles CSS et d'autres opérations. Les lecteurs peuvent développer davantage un système de commande en ligne plus complet basé sur ces codes.
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!