從零到店面：我的電子商務網站建立之旅

內容

1. 簡介
2. 技術堆疊
3. 快速概述
4. API
5. 前端
6. 管理儀表板
7. 資源

原始碼：https://github.com/aelassas/wexcommerce

示範：https://wexcommerce.dynv6.net:8002

介紹

對於重視創意自由和技術控制的開發者來說，Shopify 等傳統電子商務平台可能會感到受限。雖然 Shopify 的模板提供了快速設置，並且其 Storefront API 提供了一定的靈活性，但這兩種解決方案都沒有提供現代開發人員渴望的完整架構自由。

這個想法源自於建立無邊界的願望 - 一個完全可自訂的電子商務網站，其中每個方面都在您的控制之下：

• 擁有 UI/UX：設計獨特的客戶體驗，而無需克服模板限制
• 控制後端：實現完美匹配需求的自訂業務邏輯和資料結構
• 掌握 DevOps：使用首選工具和工作流程部署、擴展和監控應用程式
• 自由擴充：增加新功能和集成，無需平台限製或額外費用

技術堆疊

這是使其成為可能的技術堆疊：

• Node.js
• Next.js
• MongoDB
• MUI
• 打字稿
• 條紋
• 碼頭工人

由於 TypeScript 具有眾多優點，因此做出了使用 TypeScript 的關鍵設計決定。 TypeScript 提供強大的類型、工具和集成，從而產生高品質、可擴展、更具可讀性和可維護性的程式碼，並且易於調試和測試。

我選擇Next.js是因為它強大的渲染功能，MongoDB是為了靈活的資料建模，而Stripe是為了安全的支付處理。

選擇此堆疊，您不僅僅是在建立一個商店 - 您正在投資一個可以根據您的需求不斷發展的基礎，並得到強大的開源技術和不斷發展的開發者社群的支持。

使用 Next.js 建立網站為擴展業務奠定了堅實的基礎。專注於效能、安全性和使用者體驗，同時維護程式碼品質和文件。定期更新和監控將確保平台保持競爭力和可靠性。

Next.js 因其以下優點而成為絕佳選擇：

• 卓越效能：內建最佳化，可實現快速頁面載入和無縫使用者體驗
• SEO 優勢：伺服器端渲染功能，確保您的產品易於被發現
• 可擴充性：隨您的業務一起成長的企業就緒架構
• 豐富的生態系統：用於快速開發的大量程式庫和工具
• 開發者體驗：直覺的開發工作流程，具有熱重載和自動路由

快速概覽

前端

從前端，使用者可以搜尋可用產品、將產品加入購物車並結帳。

以下是前端的登陸頁：

以下是前端的搜尋頁面：

以下是範例產品頁面：

以下是產品圖片的全螢幕視圖：

以下是購物車頁面：

以下是結帳頁：

以下是登入頁面：

以下是註冊頁面：

以下是使用者可以看到他的訂單的頁面：

就是這樣！這些是前端的主要頁面。

管理儀表板

透過管理儀表板，管理員可以管理類別、產品、使用者和訂單。

管理員也可以管理以下設定：

• 區域設定：平台語言（英語或法語）和貨幣
• 配送設定：啟用的配送方式以及每種方式的費用
• 付款設定：啟用付款方式（信用卡、貨到付款或電匯）
• 銀行設定：電匯的銀行資訊（IBAN 和其他資訊）

以下是登入頁面：

以下是管理員可以查看和管理訂單的儀表板頁面：

以下是管理員管理類別的頁面：

以下是管理員可以檢視和管理產品的頁面：

以下是管理員編輯產品的頁面：

以下是產品圖片的全螢幕視圖：

以下是設定頁：

就是這樣。這些是管理儀表板的主要頁面。

應用程式介面

API 是一個 Node.js 伺服器應用程序，它使用 Express 公開 RESTful API，從而可以存取 MongoDB 資料庫。

API 由前端、管理儀表板使用，也將由行動應用程式使用。

API 公開了管理儀表板和前端所需的所有功能。該API遵循MVC設計模式。 JWT 用於身份驗證。有些功能需要身份驗證，例如與管理產品和訂單相關的功能，而其他功能則不需要身份驗證，例如為未經過身份驗證的用戶檢索類別和可用產品：

• ./api/src/models/ 資料夾包含 MongoDB 模型。
• ./api/src/routes/ 資料夾包含 Express 路線。
• ./api/src/controllers/ 資料夾包含控制器。
• ./api/src/middlewares/ 資料夾包含中間件。
• ./api/src/app.ts 是載入路由的主伺服器。
• ./api/src/index.ts 是 api 的主要入口點。

index.ts 在主伺服器中：

這是一個使用 Node.js 和 Express 啟動伺服器的 TypeScript 檔案。它導入了多個模組，包括 dotenv、process、fs、http、https、mongoose 和 app。然後它與 MongoDB 資料庫建立連接。然後，它檢查 HTTPS 環境變數是否設為 true，如果是，則使用 https 模組以及提供的私密金鑰和憑證建立 HTTPS 伺服器。否則，它使用 http 模組建立一個 HTTP 伺服器。伺服器監聽 PORT 環境變數中指定的連接埠。

close 函數被定義為在收到終止訊號時優雅地停止伺服器。它關閉伺服器和 MongoDB 連接，然後以狀態碼 0 退出進程。最後，它註冊當進程收到 SIGINT、SIGTERM 或 SIGQUIT 訊號時要呼叫的 close 函數。

app.ts 是 api 的主要入口點：

首先，我們建立一個 Express 應用並載入 cors、compression、helmet 和 nocache 等中間件。我們使用頭盔中間件庫設置了各種安全措施。我們也為應用程式的不同部分匯入各種路由文件，例如productRoutes、orderRoutes、categoryRoutes、notificationRoutes、userRoutes。最後，我們載入 Express 路線並匯出應用程式。

api中有11條路由。每條路線都有自己的控制器，遵循 MVC 設計模式和 SOLID 原則。主要路線如下：

• userRoutes：提供與使用者相關的REST功能
• categoryRoutes：提供與類別相關的REST函數
• productRoutes：提供與產品相關的REST功能
• cartRoutes：提供與購物車相關的REST功能
• wishlistRoutes：提供與願望清單相關的REST功能
• deliveryTypeRoutes：提供與配送方式相關的REST功能
• paymentTypeRoutes：提供與支付方式相關的REST函數
• orderRoutes：提供與訂單相關的REST函數
• notificationRoutes：提供與通知相關的REST功能
• settingRoutes：提供與設定相關的REST功能
• stripeRoutes：提供與Stripe支付網關相關的REST功能

我們不會一一解釋每條路線。我們將以categoryRoutes為例，看看它是如何製作的：

首先，我們建立一個 Express Router。然後，我們使用它的名稱、方法、中間件和控制器來建立路由。

routeNames 包含categoryRoutes 路線名稱：

categoryController 包含有關類別的主要業務邏輯。我們不會看到控制器的所有原始程式碼，因為它相當大，但我們將以創建控制器函數為例。

以下是類別模型：

一個類別有多個值。每種語言一個值。預設支援英語和法語。

以下是價值模型：

值具有語言代碼 (ISO 639-1) 和字串值。

以下是建立控制器函數：

在此函數中，我們檢索請求的正文，迭代正文中提供的值（每種語言一個值）並建立一個值。最後，我們根據建立的值和圖像檔案建立類別。

前端

前端是一個使用 Next.js 和 MUI 建立的 Web 應用程式。從前端，用戶可以搜尋可用產品，將其添加到購物車，然後根據可用的交付和付款方式繼續結帳。

• ./frontend/public/ 資料夾包含公共資源。
• ./frontend/src/styles/ 資料夾包含 CSS 樣式。
• ./frontend/src/components/ 資料夾包含 React 元件。
• ./frontend/src/lang/ 包含語言環境檔案。
• ./frontend/src/app/ 資料夾包含 Next.js 頁面。
• ./frontend/src/lib/ 包含伺服器操作。
• ./frontend/next.config.ts 是前端的主要設定檔。

前端是使用 create-next-app 建立的：

在Next.js中，頁面是從pages目錄中的.js、.jsx、.ts或.tsx檔案匯出的React元件。每個頁面都根據其檔案名稱與一條路徑相關聯。

預設情況下，Next.js 預先渲染每個頁面。這意味著 Next.js 提前為每個頁面產生 HTML，而不是全部由客戶端 JavaScript 完成。預渲染可以帶來更好的效能和 SEO。

每個產生的 HTML 都與該頁面所需的最少 JavaScript 程式碼相關聯。當瀏覽器載入頁面時，其 JavaScript 程式碼就會運作並使頁面完全互動。 （這個過程稱為水合作用。）

前端使用伺服器端渲染進行SEO最佳化，以便產品可以被搜尋引擎索引。

管理儀表板

管理儀表板是一個使用 Next.js 和 MUI 建立的 Web 應用程式。透過管理儀表板，管理員可以管理類別、產品、訂單和使用者。建立新訂單時，管理員使用者會收到通知並收到電子郵件。

• ./backend/public/ 資料夾包含公共資產。
• ./backend/src/styles/ 資料夾包含 CSS 樣式。
• ./backend/src/components/ 資料夾包含 React 元件。
• ./backend/src/lang/ 包含語言環境檔案。
• ./backend/src/app/ 資料夾包含 Next.js 頁面。
• ./backend/src/lib/ 包含伺服器操作。
• ./backend/next.config.ts 是後端的主要設定檔。

管理儀表板也是使用 create-next-app 建立的：

資源

1. 概述
2. 安裝（自架）
3. 安裝（Docker）
   1. Docker 映像
   2. SSL
4. 設定條紋
5. 從源頭運行
6. 演示資料庫
   1. Windows、Linux 和 macOS
   2. 碼頭工人
7. 更改語言和貨幣
8. 新增語言
9. 單元測試和覆蓋率
10. 日誌

就是這樣！我希望你喜歡閱讀。

以上是從零到店面：我的電子商務網站建立之旅的詳細內容。更多資訊請關注PHP中文網其他相關文章！