interface Web
js tutoriel
Comment utiliser Node.js pour développer une fonction de panier d'achat pour un centre commercial en ligne
Comment utiliser Node.js pour développer une fonction de panier d'achat pour un centre commercial en ligne
Comment utiliser Node.js pour développer une fonction de panier d'achat pour un centre commercial en ligne
À l'ère d'Internet d'aujourd'hui, le commerce électronique est devenu l'un des principaux moyens permettant aux gens de faire leurs achats. Une fonction de panier complète est très importante pour les centres commerciaux en ligne. Elle peut offrir aux utilisateurs une expérience d'achat pratique et améliorer les taux de conversion des utilisateurs. Cet article explique comment utiliser Node.js pour développer une fonction de panier d'achat pour un centre commercial en ligne et fournit des exemples de code spécifiques.
- Préparation de l'environnement
Tout d'abord, assurez-vous que Node.js et npm sont installés sur votre ordinateur. Vous pouvez télécharger et installer la dernière version de Node.js depuis le site officiel https://nodejs.org/. - Créer un projet
Ouvrez votre outil de ligne de commande, accédez à un répertoire de votre choix et exécutez les commandes suivantes pour créer un nouveau projet Node.js :
mkdir online-store cd online-store npm init -y
Ces commandes créeront un dossier appelé boutique en ligne et généreront un fichier package.json pour enregistrer les dépendances du projet et d'autres informations connexes.
- Installer les dépendances
Exécutez la commande suivante dans le répertoire racine du projet pour installer les packages de dépendances dont nous avons besoin :
npm install express express-session body-parser ejs --save
Ces packages de dépendances incluent le framework Express, Express-Session, Body Parser et le moteur de modèles EJS.
- Créer un serveur
Créez un fichier nommé app.js dans le répertoire racine du projet et ajoutez le code suivant :
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({
secret: 'my-secret-key',
resave: false,
saveUninitialized: true
}));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});Ce code utilise le framework Express pour créer un serveur simple et configure le moteur de modèle EJS et un répertoire pour fichiers statiques.
- Créer des itinéraires
Ajoutez le code suivant dans le fichier app.js pour créer des itinéraires liés au panier :
app.get('/', (req, res) => {
res.render('index', { message: req.session.message });
});
app.post('/add-to-cart', (req, res) => {
// 处理添加商品到购物车的逻辑
});
app.get('/cart', (req, res) => {
// 显示购物车页面
});
app.get('/checkout', (req, res) => {
// 结算购物车中的商品
});
app.get('/success', (req, res) => {
req.session.message = '订单支付成功！';
res.redirect('/');
});Ce code définit quatre itinéraires, qui sont utilisés pour afficher la page d'accueil et traiter la logique d'ajout d'articles au panier. , affichez la page du panier et consultez les articles présents dans le panier.
- Écriture de modèles de vue
Créez un dossier nommé vues dans le répertoire racine du projet et créez-y un fichier nommé index.ejs. Ajoutez le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Online Store</title>
</head>
<body>
<h1 id="Welcome-to-Online-Store">Welcome to Online Store!</h1>
<% if (message) { %>
<p><%= message %></p>
<% } %>
<form action="/add-to-cart" method="post">
<input type="hidden" name="product" value="Product A">
<button type="submit">Add to Cart</button>
</form>
<a href="/cart">View Cart</a>
<a href="/checkout">Checkout</a>
</body>
</html>Ce modèle de vue est utilisé pour afficher la page d'accueil et fournit des liens pour ajouter des articles au panier, afficher le panier et consulter le panier.
- Implémentez la fonction de panier
Ajoutez le code suivant dans le fichier app.js pour implémenter la fonction de panier :
app.post('/add-to-cart', (req, res) => {
const product = req.body.product;
req.session.cart = req.session.cart || [];
req.session.cart.push(product);
res.redirect('/');
});
app.get('/cart', (req, res) => {
const cart = req.session.cart || [];
res.render('cart', { cart });
});
app.get('/checkout', (req, res) => {
const cart = req.session.cart || [];
req.session.cart = [];
res.render('checkout', { cart });
});Ce code ajoute des articles au panier via des requêtes et les affiche sur la page du panier et lors du paiement. page Articles dans le panier.
- Écriture de la vue du panier
Créez un fichier appelé cart.ejs dans le dossier des vues et ajoutez le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shopping Cart</title>
</head>
<body>
<h1 id="Your-Shopping-Cart">Your Shopping Cart</h1>
<% if (cart.length > 0) { %>
<ul>
<% cart.forEach(product => { %>
<li><%= product %></li>
<% }) %>
</ul>
<% } else { %>
<p>Your shopping cart is empty.</p>
<% } %>
<a href="/checkout">Checkout</a>
</body>
</html>Ce modèle de vue permet d'afficher la liste des articles dans le panier et de proposer un paiement en ligne. lien du panier.
- Écriture de la vue de paiement
Créez un fichier appelé checkout.ejs dans le dossier des vues et ajoutez le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkout</title>
</head>
<body>
<h1 id="Checkout">Checkout</h1>
<% if (cart.length > 0) { %>
<ul>
<% cart.forEach(product => { %>
<li><%= product %></li>
<% }) %>
</ul>
<p>Thank you for your order!</p>
<% } else { %>
<p>Your shopping cart is empty.</p>
<% } %>
<a href="/success">Pay Now</a>
</body>
</html>Ce modèle de vue est utilisé pour afficher la page après le panier de paiement et fournir le lien de paiement.
- Exécutez le projet
Entrez le répertoire racine du projet dans l'outil de ligne de commande, exécutez la commande suivante pour démarrer le serveur :
node app.js
Puis visitez http://localhost:3000 dans le navigateur, vous verrez un simple message en ligne page du centre commercial. Vous pouvez cliquer sur le bouton « Ajouter au panier » pour ajouter des articles au panier et afficher les articles dans le panier sur la page du panier et sur la page de paiement.
Résumé
Cet article explique comment utiliser Node.js pour développer une fonction de panier d'achat pour un centre commercial en ligne. En utilisant le framework Express, nous pouvons rapidement créer un serveur simple et utiliser le moteur de modèle EJS pour restituer la vue. La fonction de panier d'achat est implémentée à l'aide d'Express-Session et les sessions de nœuds sont utilisées pour stocker les données du panier d'achat. J'espère que cet article vous aidera à comprendre comment utiliser Node.js pour développer la fonction de panier d'achat d'un centre commercial en ligne.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
La différence entre nodejs et tomcat
Apr 21, 2024 am 04:16 AM
Les principales différences entre Node.js et Tomcat sont : Runtime : Node.js est basé sur le runtime JavaScript, tandis que Tomcat est un conteneur de servlet Java. Modèle d'E/S : Node.js utilise un modèle asynchrone non bloquant, tandis que Tomcat est un modèle de blocage synchrone. Gestion de la concurrence : Node.js gère la concurrence via une boucle d'événements, tandis que Tomcat utilise un pool de threads. Scénarios d'application : Node.js convient aux applications en temps réel, gourmandes en données et à forte concurrence, et Tomcat convient aux applications Web Java traditionnelles.
La différence entre nodejs et vuejs
Apr 21, 2024 am 04:17 AM
Node.js est un environnement d'exécution JavaScript côté serveur, tandis que Vue.js est un framework JavaScript côté client permettant de créer des interfaces utilisateur interactives. Node.js est utilisé pour le développement côté serveur, comme le développement d'API de service back-end et le traitement des données, tandis que Vue.js est utilisé pour le développement côté client, comme les applications monopage et les interfaces utilisateur réactives.
Nodejs est-il un framework backend ?
Apr 21, 2024 am 05:09 AM
Node.js peut être utilisé comme framework backend car il offre des fonctionnalités telles que des performances élevées, l'évolutivité, la prise en charge multiplateforme, un écosystème riche et une facilité de développement.
Comment connecter Nodejs à la base de données MySQL
Apr 21, 2024 am 06:13 AM
Pour vous connecter à une base de données MySQL, vous devez suivre ces étapes : Installez le pilote mysql2. Utilisez mysql2.createConnection() pour créer un objet de connexion contenant l'adresse de l'hôte, le port, le nom d'utilisateur, le mot de passe et le nom de la base de données. Utilisez connection.query() pour effectuer des requêtes. Enfin, utilisez connection.end() pour mettre fin à la connexion.
Quelles sont les variables globales dans nodejs
Apr 21, 2024 am 04:54 AM
Les variables globales suivantes existent dans Node.js : Objet global : global Module principal : processus, console, nécessiter Variables d'environnement d'exécution : __dirname, __filename, __line, __column Constantes : undefined, null, NaN, Infinity, -Infinity
Quelle est la différence entre les fichiers npm et npm.cmd dans le répertoire d'installation de nodejs ?
Apr 21, 2024 am 05:18 AM
Il existe deux fichiers liés à npm dans le répertoire d'installation de Node.js : npm et npm.cmd. Les différences sont les suivantes : différentes extensions : npm est un fichier exécutable et npm.cmd est un raccourci de fenêtre de commande. Utilisateurs Windows : npm.cmd peut être utilisé à partir de l'invite de commande, npm ne peut être exécuté qu'à partir de la ligne de commande. Compatibilité : npm.cmd est spécifique aux systèmes Windows, npm est disponible multiplateforme. Recommandations d'utilisation : les utilisateurs Windows utilisent npm.cmd, les autres systèmes d'exploitation utilisent npm.
Y a-t-il une grande différence entre nodejs et java ?
Apr 21, 2024 am 06:12 AM
Les principales différences entre Node.js et Java résident dans la conception et les fonctionnalités : Piloté par les événements ou piloté par les threads : Node.js est piloté par les événements et Java est piloté par les threads. Monothread ou multithread : Node.js utilise une boucle d'événements monothread et Java utilise une architecture multithread. Environnement d'exécution : Node.js s'exécute sur le moteur JavaScript V8, tandis que Java s'exécute sur la JVM. Syntaxe : Node.js utilise la syntaxe JavaScript, tandis que Java utilise la syntaxe Java. Objectif : Node.js convient aux tâches gourmandes en E/S, tandis que Java convient aux applications de grande entreprise.
Nodejs est-il un langage de développement back-end ?
Apr 21, 2024 am 05:09 AM
Oui, Node.js est un langage de développement backend. Il est utilisé pour le développement back-end, notamment la gestion de la logique métier côté serveur, la gestion des connexions à la base de données et la fourniture d'API.
