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.
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.
npm install express express-session body-parser ejs --save
Diese Abhängigkeitspakete umfassen Express Framework, Express-Session, Body Parser und EJS Template Engine.
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.
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.
<!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.
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.
<!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.
<!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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
