Rumah > Artikel > hujung hadapan web > Cara menggunakan Node.js untuk membangunkan fungsi troli beli-belah untuk pusat membeli-belah dalam talian
Cara menggunakan Node.js untuk membangunkan fungsi troli beli-belah untuk pusat membeli-belah dalam talian
- WBOYasal
- 2023-11-08 09:18:271263semak imbas
Cara menggunakan Node.js untuk membangunkan fungsi troli beli-belah pusat beli-belah dalam talian
Dalam era Internet hari ini, e-dagang telah menjadi salah satu cara utama orang ramai untuk membeli-belah. Fungsi troli beli-belah yang lengkap adalah sangat penting untuk pusat beli-belah dalam talian Ia boleh memberikan pengguna pengalaman membeli-belah yang mudah dan meningkatkan kadar penukaran pengguna. Artikel ini akan memperkenalkan cara menggunakan Node.js untuk membangunkan fungsi troli beli-belah untuk pusat membeli-belah dalam talian dan memberikan contoh kod khusus.
- Persediaan alam sekitar
Pertama, pastikan Node.js dan npm dipasang pada komputer anda. Anda boleh memuat turun dan memasang versi Node.js terkini dari tapak web rasmi https://nodejs.org/. - Buat Projek
Buka alat baris arahan anda, pergi ke direktori pilihan anda dan laksanakan arahan berikut untuk mencipta projek Node.js baharu:
mkdir online-store cd online-store npm init -y
Arahan ini akan mencipta folder yang dipanggil kedai dalam talian dan menjana fail package.json di dalamnya untuk merekodkan kebergantungan projek dan maklumat lain yang berkaitan.
- Pasang kebergantungan
Laksanakan arahan berikut dalam direktori akar projek untuk memasang pakej kebergantungan yang kami perlukan:
npm install express express-session body-parser ejs --save
Pakej kebergantungan ini termasuk rangka kerja Express, Express-Session, Body Parser dan enjin templat EJS.
- Buat pelayan
Buat fail bernama app.js dalam direktori akar projek dan tambahkan kod berikut:
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');
});Kod ini menggunakan rangka kerja Express untuk mencipta pelayan ringkas dan menyediakan enjin templat EJS dan direktori untuk fail statik.
- Buat laluan
Tambahkan kod berikut dalam fail app.js untuk mencipta laluan berkaitan troli beli-belah:
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('/');
});Kod ini mentakrifkan empat laluan, yang digunakan untuk memaparkan halaman utama dan memproses logik menambah item pada troli beli-belah, paparkan halaman troli beli-belah dan lihat item dalam troli beli-belah.
- Menulis Templat Paparan
Buat folder bernama pandangan dalam direktori akar projek dan buat fail bernama index.ejs di dalamnya. Tambahkan kod berikut:
<!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>Templat paparan ini digunakan untuk memaparkan halaman utama dan menyediakan pautan untuk menambah item pada troli beli-belah, lihat troli beli-belah dan lihat troli beli-belah.
- Laksanakan fungsi troli beli-belah
Tambahkan kod berikut dalam fail app.js untuk melaksanakan fungsi troli beli-belah:
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 });
});Kod ini menambahkan item ke troli beli-belah melalui permintaan dan memaparkannya pada halaman troli beli-belah dan daftar keluar halaman Item dalam troli beli-belah.
- Menulis paparan troli beli-belah
Buat fail yang dipanggil cart.ejs dalam folder pandangan dan tambah kod berikut:
<!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>Templat paparan ini digunakan untuk memaparkan senarai item dalam troli beli-belah dan menyediakan daftar keluar beli-belah pautan troli.
- Menulis paparan pembayaran
Buat fail yang dipanggil checkout.ejs dalam folder pandangan dan tambah kod berikut:
<!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>Templat paparan ini digunakan untuk memaparkan halaman selepas troli beli-belah daftar keluar dan menyediakan pautan pembayaran.
- Jalankan projek
Masukkan direktori akar projek dalam alat baris arahan, jalankan arahan berikut untuk memulakan pelayan:
node app.js
Kemudian lawati http://localhost:3000 dalam penyemak imbas, anda akan melihat dalam talian yang mudah halaman pusat membeli-belah. Anda boleh mengklik butang "Tambah ke Troli" untuk menambah item ke troli beli-belah dan melihat item dalam troli beli-belah pada halaman troli beli-belah dan halaman daftar keluar.
Ringkasan
Artikel ini memperkenalkan cara menggunakan Node.js untuk membangunkan fungsi troli beli-belah untuk pusat beli-belah dalam talian. Dengan menggunakan rangka kerja Express, kami boleh membina pelayan ringkas dengan cepat dan menggunakan enjin templat EJS untuk memaparkan paparan. Fungsi troli beli-belah dilaksanakan menggunakan Express-Session, dan sesi nod digunakan untuk menyimpan data troli beli-belah. Saya harap artikel ini akan membantu anda memahami cara menggunakan Node.js untuk membangunkan fungsi troli beli-belah pusat membeli-belah dalam talian.
Atas ialah kandungan terperinci Cara menggunakan Node.js untuk membangunkan fungsi troli beli-belah untuk pusat membeli-belah dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!