hujung hadapan web
tutorial js
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
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 id="Welcome-to-Online-Store">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 id="Your-Shopping-Cart">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 id="Checkout">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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Perbezaan antara nodejs dan tomcat
Apr 21, 2024 am 04:16 AM
Perbezaan utama antara Node.js dan Tomcat ialah: Runtime: Node.js adalah berdasarkan masa jalan JavaScript, manakala Tomcat ialah bekas Java Servlet. Model I/O: Node.js menggunakan model tidak menyekat tak segerak, manakala Tomcat menyekat segerak. Pengendalian konkurensi: Node.js mengendalikan konkurensi melalui gelung peristiwa, manakala Tomcat menggunakan kumpulan benang. Senario aplikasi: Node.js sesuai untuk aplikasi masa nyata, intensif data dan konkurensi tinggi, dan Tomcat sesuai untuk aplikasi web Java tradisional.
Perbezaan antara nodejs dan vuejs
Apr 21, 2024 am 04:17 AM
Node.js ialah masa jalan JavaScript bahagian pelayan, manakala Vue.js ialah rangka kerja JavaScript sisi klien untuk mencipta antara muka pengguna interaktif. Node.js digunakan untuk pembangunan bahagian pelayan, seperti pembangunan API perkhidmatan belakang dan pemprosesan data, manakala Vue.js digunakan untuk pembangunan sisi klien, seperti aplikasi satu halaman dan antara muka pengguna yang responsif.
Adakah nodejs rangka kerja bahagian belakang?
Apr 21, 2024 am 05:09 AM
Node.js boleh digunakan sebagai rangka kerja bahagian belakang kerana ia menawarkan ciri seperti prestasi tinggi, kebolehskalaan, sokongan merentas platform, ekosistem yang kaya dan kemudahan pembangunan.
Bagaimana untuk menyambungkan nodejs ke pangkalan data mysql
Apr 21, 2024 am 06:13 AM
Untuk menyambung ke pangkalan data MySQL, anda perlu mengikuti langkah berikut: Pasang pemacu mysql2. Gunakan mysql2.createConnection() untuk mencipta objek sambungan yang mengandungi alamat hos, port, nama pengguna, kata laluan dan nama pangkalan data. Gunakan connection.query() untuk melaksanakan pertanyaan. Akhir sekali gunakan connection.end() untuk menamatkan sambungan.
Apakah pembolehubah global dalam nodejs
Apr 21, 2024 am 04:54 AM
Pembolehubah global berikut wujud dalam Node.js: Objek global: modul Teras global: proses, konsol, memerlukan pembolehubah persekitaran Runtime: __dirname, __filename, __line, __column Constants: undefined, null, NaN, Infinity, -Infinity
Apakah perbezaan antara fail npm dan npm.cmd dalam direktori pemasangan nodejs?
Apr 21, 2024 am 05:18 AM
Terdapat dua fail berkaitan npm dalam direktori pemasangan Node.js: npm dan npm.cmd Perbezaannya adalah seperti berikut: sambungan berbeza: npm ialah fail boleh laku dan npm.cmd ialah pintasan tetingkap arahan. Pengguna Windows: npm.cmd boleh digunakan daripada command prompt, npm hanya boleh dijalankan dari baris arahan. Keserasian: npm.cmd adalah khusus untuk sistem Windows, npm tersedia merentas platform. Cadangan penggunaan: Pengguna Windows menggunakan npm.cmd, sistem pengendalian lain menggunakan npm.
Adakah terdapat perbezaan besar antara nodejs dan java?
Apr 21, 2024 am 06:12 AM
Perbezaan utama antara Node.js dan Java ialah reka bentuk dan ciri: Didorong peristiwa vs. didorong benang: Node.js dipacu peristiwa dan Java dipacu benang. Satu-benang vs. berbilang benang: Node.js menggunakan gelung acara satu-benang dan Java menggunakan seni bina berbilang benang. Persekitaran masa jalan: Node.js berjalan pada enjin JavaScript V8, manakala Java berjalan pada JVM. Sintaks: Node.js menggunakan sintaks JavaScript, manakala Java menggunakan sintaks Java. Tujuan: Node.js sesuai untuk tugas intensif I/O, manakala Java sesuai untuk aplikasi perusahaan besar.
Adakah nodejs bahasa pembangunan bahagian belakang?
Apr 21, 2024 am 05:09 AM
Ya, Node.js ialah bahasa pembangunan bahagian belakang. Ia digunakan untuk pembangunan bahagian belakang, termasuk mengendalikan logik perniagaan sebelah pelayan, mengurus sambungan pangkalan data dan menyediakan API.
