首頁 >web前端 >js教程 >如何使用Node.js開發一個線上商城的購物車功能

如何使用Node.js開發一個線上商城的購物車功能

WBOY原創: 2023-11-08 09:18:271295瀏覽

在當今網路時代，電子商務已經成為了人們購物的主要方式之一。而一個完善的購物車功能對於線上商城來說是非常重要的，它能夠為用戶提供方便的購物體驗並提高用戶轉換率。本文將介紹如何使用Node.js開發一個線上商城的購物車功能，並提供具體的程式碼範例。

環境準備
首先，確保你的電腦已經安裝了Node.js和npm。你可以在官方網站 https://nodejs.org/ 下載並安裝最新的Node.js版本。
建立專案
開啟你的命令列工具，進入一個你喜歡的目錄，然後執行以下指令來建立一個新的Node.js專案：

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

這些命令將建立一個名為online-store的資料夾，並在其中產生一個package.json文件，用於記錄專案的依賴以及其他相關資訊。

安裝依賴
在專案根目錄下執行以下命令來安裝我們需要的依賴套件：

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

這些依賴套件包含了Express框架、Express- Session、Body Parser以及EJS模板引擎。

建立伺服器
在專案根目錄下建立一個名為app.js的文件，並新增以下程式碼：

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

這段程式碼使用了Express框架創建了一個簡單的伺服器，並設定了EJS模板引擎以及靜態檔案的目錄。

建立路由
在app.js檔案中加入以下程式碼來建立購物車相關的路由：

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

這段程式碼定義了四個路由，分別用於顯示首頁、處理新增商品到購物車的邏輯、顯示購物車頁面、結算購物車中的商品。

寫視圖範本
在專案根目錄下建立一個名為views的資料夾，並在其中建立一個名為index.ejs的檔案。新增以下程式碼：

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

這個檢視範本用於顯示首頁，並提供了新增商品到購物車、查看購物車以及結算購物車的連結。

實作購物車功能
在app.js檔案中加入以下程式碼實現購物車功能：

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

這段程式碼透過請求的方式將商品添加到購物車，並在購物車頁面和結算頁面中顯示購物車中的商品。

寫購物車視圖
在views資料夾中建立一個名為cart.ejs的文件，並加入以下程式碼：

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

這個檢視範本用於顯示購物車中的商品列表，並提供結算購物車的連結。

寫結算視圖
在views資料夾中建立一個名為checkout.ejs的文件，並新增下列程式碼：

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

這個檢視範本用於顯示結算購物車後的頁面，並提供付款連結。

執行專案
在命令列工具中進入專案根目錄，執行下列命令來啟動伺服器：

node app.js

然後在瀏覽器中存取http:/ /localhost:3000 ，你會看到一個簡單的線上商城頁面。你可以點擊「Add to Cart」按鈕將商品加入購物車，並在購物車頁面和結算頁面中查看購物車中的商品。

總結
本文介紹如何使用Node.js開發一個線上商城的購物車功能。透過使用Express框架，我們能夠快速建立一個簡單的伺服器，並使用EJS模板引擎來渲染視圖。購物車功能則透過使用Express-Session來實現，並使用了節點會話來儲存購物車資料。希望這篇文章對你理解如何使用Node.js開發線上商城的購物車功能有所幫助。

以上是如何使用Node.js開發一個線上商城的購物車功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

json npm express Session JS http https

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Node.js開發：如何實作使用者權限管理功能下一篇：Node.js開發：如何實作使用者權限管理功能

看更多