Maison > Article > interface Web > 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

WBOYoriginal: 2023-11-08 09:18:271263parcourir

Comment utiliser Node.js pour développer une fonction de panier dachat 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>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>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>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!

json npm express Session JS http https

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：Développement Node.js : Comment implémenter les fonctions de gestion des droits des utilisateursArticle suivant：Développement Node.js : Comment implémenter les fonctions de gestion des droits des utilisateurs

Articles Liés

Voir plus