Heim > Artikel > Web-Frontend > So entwickeln Sie mit Node.js eine Warenkorbfunktion für ein Online-Einkaufszentrum

So entwickeln Sie mit Node.js eine Warenkorbfunktion für ein Online-Einkaufszentrum

WBOYOriginal: 2023-11-08 09:18:271279Durchsuche

So verwenden Sie Node.js, um die Warenkorbfunktion eines Online-Einkaufszentrums zu entwickeln

Im heutigen Internetzeitalter ist E-Commerce zu einer der wichtigsten Einkaufsmöglichkeiten für Menschen geworden. Eine vollständige Warenkorbfunktion ist für Online-Einkaufszentren sehr wichtig. Sie kann den Benutzern ein komfortables Einkaufserlebnis bieten und die Konversionsraten der Benutzer verbessern. In diesem Artikel wird erläutert, wie Sie mit Node.js eine Warenkorbfunktion für ein Online-Einkaufszentrum entwickeln, und es werden spezifische Codebeispiele bereitgestellt.

Umgebungsvorbereitung
Stellen Sie zunächst sicher, dass Node.js und npm auf Ihrem Computer installiert sind. Sie können die neueste Node.js-Version von der offiziellen Website https://nodejs.org/ herunterladen und installieren.
Projekt erstellen
Öffnen Sie Ihr Befehlszeilentool, gehen Sie in ein Verzeichnis Ihrer Wahl und führen Sie die folgenden Befehle aus, um ein neues Node.js-Projekt zu erstellen:

mkdir online-store
cd online-store
npm init -y

Diese Befehle erstellen einen Ordner namens online-store und generieren eine package.json-Datei darin, um die Abhängigkeiten des Projekts und andere zugehörige Informationen aufzuzeichnen.

Abhängigkeiten installieren
Führen Sie den folgenden Befehl im Projektstammverzeichnis aus, um die von uns benötigten Abhängigkeitspakete zu installieren:

npm install express express-session body-parser ejs --save

Diese Abhängigkeitspakete umfassen Express Framework, Express-Session, Body Parser und EJS Template Engine.

Server erstellen
Erstellen Sie eine Datei namens app.js im Stammverzeichnis des Projekts und fügen Sie den folgenden Code hinzu:

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');
});

Dieser Code verwendet das Express-Framework, um einen einfachen Server zu erstellen und richtet die EJS-Vorlagen-Engine und ein Verzeichnis dafür ein statische Dateien.

Routen erstellen
Fügen Sie den folgenden Code in der app.js-Datei hinzu, um Einkaufswagen-bezogene Routen zu erstellen:

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('/');
});

Dieser Code definiert vier Routen, die zum Anzeigen der Homepage und zum Verarbeiten der Logik zum Hinzufügen von Artikeln zur verwendet werden Klicken Sie auf „Warenkorb“, rufen Sie die Seite „Warenkorb“ auf und sehen Sie sich die Artikel im Warenkorb an.

Ansichtsvorlagen schreiben
Erstellen Sie einen Ordner mit dem Namen „views“ im Stammverzeichnis des Projekts und erstellen Sie darin eine Datei mit dem Namen „index.ejs“. Fügen Sie den folgenden Code hinzu:

<!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>

Diese Ansichtsvorlage wird zum Anzeigen der Startseite verwendet und bietet Links zum Hinzufügen von Artikeln zum Warenkorb, zum Anzeigen des Warenkorbs und zum Auschecken des Warenkorbs.

Implementieren Sie die Warenkorbfunktion.
Fügen Sie den folgenden Code in die Datei app.js ein, um die Warenkorbfunktion zu implementieren:

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 });
});

Dieser Code fügt Artikel über Anfragen zum Warenkorb hinzu und zeigt sie auf der Warenkorbseite und an der Kasse an Seite Artikel im Warenkorb.

Warenkorbansicht schreiben
Erstellen Sie eine Datei mit dem Namen „cart.ejs“ im Ordner „Ansichten“ und fügen Sie den folgenden Code hinzu:

<!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>

Diese Ansichtsvorlage wird verwendet, um die Liste der Artikel im Warenkorb anzuzeigen und einen Checkout-Einkauf bereitzustellen Warenkorb-Link.

Schreiben der Checkout-Ansicht
Erstellen Sie eine Datei namens checkout.ejs im Ansichtenordner und fügen Sie den folgenden Code hinzu:

<!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>

Diese Ansichtsvorlage wird verwendet, um die Seite nach dem Checkout-Warenkorb anzuzeigen und den Zahlungslink bereitzustellen.

Führen Sie das Projekt aus
Geben Sie das Stammverzeichnis des Projekts in das Befehlszeilentool ein und führen Sie den folgenden Befehl aus, um den Server zu starten:

node app.js

Dann besuchen Sie http://localhost:3000 im Browser. Sie sehen ein einfaches Online-Fenster Mall-Seite. Sie können auf die Schaltfläche „In den Warenkorb“ klicken, um Artikel zum Warenkorb hinzuzufügen und die Artikel im Warenkorb auf der Warenkorbseite und der Checkout-Seite anzuzeigen.

Zusammenfassung
In diesem Artikel wird erläutert, wie Sie mit Node.js eine Warenkorbfunktion für ein Online-Einkaufszentrum entwickeln. Durch die Verwendung des Express-Frameworks können wir schnell einen einfachen Server erstellen und die EJS-Vorlagen-Engine zum Rendern der Ansicht verwenden. Die Warenkorbfunktion wird über Express-Session implementiert und Knotensitzungen werden zum Speichern von Warenkorbdaten verwendet. Ich hoffe, dieser Artikel hilft Ihnen zu verstehen, wie Sie mit Node.js die Warenkorbfunktion eines Online-Einkaufszentrums entwickeln.

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie mit Node.js eine Warenkorbfunktion für ein Online-Einkaufszentrum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json npm express Session JS http https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Node.js-Entwicklung: So implementieren Sie BenutzerrechteverwaltungsfunktionenNächster Artikel：Node.js-Entwicklung: So implementieren Sie Benutzerrechteverwaltungsfunktionen

In Verbindung stehende Artikel

Mehr sehen