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.
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.
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.
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.
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Online Store</title>
</head>
<body>
<h1>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.
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shopping Cart</title>
</head>
<body>
<h1>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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkout</title>
</head>
<body>
<h1>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.
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!
qu'est-ce que nodejs
Nodejs implémente le robot d'exploration
ps supprimer la zone sélectionnée
Comment créer un index bitmap dans MySQL
Quelle est la différence entre xls et xlsx
Objectif principal du système de fichiers
Comment configurer la redirection de nom de domaine
propriété de gradient linéaire
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
