如何使用Node.js開發一個線上商城的購物車功能-js教程-PHP中文網

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Nov 08, 2023 am 09:18 AM

nodejs網路商城購物車功能

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

在當今網路時代，電子商務已經成為了人們購物的主要方式之一。而一個完善的購物車功能對於線上商城來說是非常重要的，它能夠為用戶提供方便的購物體驗並提高用戶轉換率。本文將介紹如何使用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 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>

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

實作購物車功能
在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 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>

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

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

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

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

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

node app.js

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

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

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

陳述

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

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。