內(nèi)容

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

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

示範(fàn)：https://wexcommerce.dynv6.net:8002

介紹

對(duì)於重視創(chuàng)意自由和技術(shù)控制的開(kāi)發(fā)者來(lái)說(shuō)，Shopify 等傳統(tǒng)電子商務(wù)平臺(tái)可能會(huì)感到受限。雖然 Shopify 的模板提供了快速設(shè)置，並且其 Storefront API 提供了一定的靈活性，但這兩種解決方案都沒(méi)有提供現(xiàn)代開(kāi)發(fā)人員渴望的完整架構(gòu)自由。

這個(gè)想法源自於建立無(wú)邊界的願(yuàn)望 - 一個(gè)完全可自訂的電子商務(wù)網(wǎng)站，其中每個(gè)方面都在您的控制之下：

• 擁有 UI/UX：設(shè)計(jì)獨(dú)特的客戶(hù)體驗(yàn)，而無(wú)需克服模板限制
• 控制後端：實(shí)現(xiàn)完美匹配需求的自訂業(yè)務(wù)邏輯和資料結(jié)構(gòu)
• 掌握 DevOps：使用首選工具和工作流程部署、擴(kuò)展和監(jiān)控應(yīng)用程式
• 自由擴(kuò)充：增加新功能和集成，無(wú)需平臺(tái)限製或額外費(fèi)用

技術(shù)堆疊

這是使其成為可能的技術(shù)堆疊：

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

由於 TypeScript 具有眾多優(yōu)點(diǎn)，因此做出了使用 TypeScript 的關(guān)鍵設(shè)計(jì)決定。 TypeScript 提供強(qiáng)大的類(lèi)型、工具和集成，從而產(chǎn)生高品質(zhì)、可擴(kuò)展、更具可讀性和可維護(hù)性的程式碼，並且易於調(diào)試和測(cè)試。

我選擇Next.js是因?yàn)樗鼜?qiáng)大的渲染功能，MongoDB是為了靈活的資料建模，而Stripe是為了安全的支付處理。

選擇此堆疊，您不僅僅是在建立一個(gè)商店 - 您正在投資一個(gè)可以根據(jù)您的需求不斷發(fā)展的基礎(chǔ)，並得到強(qiáng)大的開(kāi)源技術(shù)和不斷發(fā)展的開(kāi)發(fā)者社群的支持。

使用 Next.js 建立網(wǎng)站為擴(kuò)展業(yè)務(wù)奠定了堅(jiān)實(shí)的基礎(chǔ)。專(zhuān)注於效能、安全性和使用者體驗(yàn)，同時(shí)維護(hù)程式碼品質(zhì)和文件。定期更新和監(jiān)控將確保平臺(tái)保持競(jìng)爭(zhēng)力和可靠性。

Next.js 因其以下優(yōu)點(diǎn)而成為絕佳選擇：

• 卓越效能：內(nèi)建最佳化，可實(shí)現(xiàn)快速頁(yè)面載入和無(wú)縫使用者體驗(yàn)
• SEO 優(yōu)勢(shì)：伺服器端渲染功能，確保您的產(chǎn)品易於被發(fā)現(xiàn)
• 可擴(kuò)充性：隨您的業(yè)務(wù)一起成長(zhǎng)的企業(yè)就緒架構(gòu)
• 豐富的生態(tài)系統(tǒng)：用於快速開(kāi)發(fā)的大量程式庫(kù)和工具
• 開(kāi)發(fā)者體驗(yàn)：直覺(jué)的開(kāi)發(fā)工作流程，具有熱重載和自動(dòng)路由

快速概覽

前端

從前端，使用者可以搜尋可用產(chǎn)品、將產(chǎn)品加入購(gòu)物車(chē)並結(jié)帳。

以下是前端的登陸頁(yè)：

以下是前端的搜尋頁(yè)面：

以下是範(fàn)例產(chǎn)品頁(yè)面：

以下是產(chǎn)品圖片的全螢?zāi)灰晥D：

以下是購(gòu)物車(chē)頁(yè)面：

以下是結(jié)帳頁(yè)：

以下是登入頁(yè)面：

以下是註冊(cè)頁(yè)面：

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

就是這樣！這些是前端的主要頁(yè)面。

管理儀表板

透過(guò)管理儀表板，管理員可以管理類(lèi)別、產(chǎn)品、使用者和訂單。

管理員也可以管理以下設(shè)定：

• 區(qū)域設(shè)定：平臺(tái)語(yǔ)言（英語(yǔ)或法語(yǔ)）和貨幣
• 配送設(shè)定：?jiǎn)⒂玫呐渌头绞揭约懊糠N方式的費(fèi)用
• 付款設(shè)定：?jiǎn)⒂酶犊罘绞剑ㄐ庞每ā⒇浀礁犊罨螂妳R）
• 銀行設(shè)定：電匯的銀行資訊（IBAN 和其他資訊）

以下是登入頁(yè)面：

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

以下是管理員管理類(lèi)別的頁(yè)面：

以下是管理員可以檢視和管理產(chǎn)品的頁(yè)面：

以下是管理員編輯產(chǎn)品的頁(yè)面：

以下是產(chǎn)品圖片的全螢?zāi)灰晥D：

以下是設(shè)定頁(yè)：

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

應(yīng)用程式介面

API 是一個(gè) Node.js 伺服器應(yīng)用程序，它使用 Express 公開(kāi) RESTful API，從而可以存取 MongoDB 資料庫(kù)。

API 由前端、管理儀表板使用，也將由行動(dòng)應(yīng)用程式使用。

API 公開(kāi)了管理儀表板和前端所需的所有功能。該API遵循MVC設(shè)計(jì)模式。 JWT 用於身份驗(yàn)證。有些功能需要身份驗(yàn)證，例如與管理產(chǎn)品和訂單相關(guān)的功能，而其他功能則不需要身份驗(yàn)證，例如為未經(jīng)過(guò)身份驗(yàn)證的用戶(hù)檢索類(lèi)別和可用產(chǎn)品：

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

index.ts 在主伺服器中：

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

close 函數(shù)被定義為在收到終止訊號(hào)時(shí)優(yōu)雅地停止伺服器。它關(guān)閉伺服器和 MongoDB 連接，然後以狀態(tài)碼 0 退出進(jìn)程。最後，它註冊(cè)當(dāng)進(jìn)程收到 SIGINT、SIGTERM 或 SIGQUIT 訊號(hào)時(shí)要呼叫的 close 函數(shù)。

app.ts 是 api 的主要入口點(diǎn)：

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

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

• userRoutes：提供與使用者相關(guān)的REST功能
• categoryRoutes：提供與類(lèi)別相關(guān)的REST函數(shù)
• productRoutes：提供與產(chǎn)品相關(guān)的REST功能
• cartRoutes：提供與購(gòu)物車(chē)相關(guān)的REST功能
• wishlistRoutes：提供與願(yuàn)望清單相關(guān)的REST功能
• deliveryTypeRoutes：提供與配送方式相關(guān)的REST功能
• paymentTypeRoutes：提供與支付方式相關(guān)的REST函數(shù)
• orderRoutes：提供與訂單相關(guān)的REST函數(shù)
• notificationRoutes：提供與通知相關(guān)的REST功能
• settingRoutes：提供與設(shè)定相關(guān)的REST功能
• stripeRoutes：提供與Stripe支付網(wǎng)關(guān)相關(guān)的REST功能

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

首先，我們建立一個(gè) Express Router。然後，我們使用它的名稱(chēng)、方法、中間件和控制器來(lái)建立路由。

routeNames 包含categoryRoutes 路線名稱(chēng)：

categoryController 包含有關(guān)類(lèi)別的主要業(yè)務(wù)邏輯。我們不會(huì)看到控制器的所有原始程式碼，因?yàn)樗喈?dāng)大，但我們將以創(chuàng)建控制器函數(shù)為例。

以下是類(lèi)別模型：

一個(gè)類(lèi)別有多個(gè)值。每種語(yǔ)言一個(gè)值。預(yù)設(shè)支援英語(yǔ)和法語(yǔ)。

以下是價(jià)值模型：

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

以下是建立控制器函數(shù)：

在此函數(shù)中，我們檢索請(qǐng)求的正文，迭代正文中提供的值（每種語(yǔ)言一個(gè)值）並建立一個(gè)值。最後，我們根據(jù)建立的值和圖像檔案建立類(lèi)別。

前端

前端是一個(gè)使用 Next.js 和 MUI 建立的 Web 應(yīng)用程式。從前端，用戶(hù)可以搜尋可用產(chǎn)品，將其添加到購(gòu)物車(chē)，然後根據(jù)可用的交付和付款方式繼續(xù)結(jié)帳。

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

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

在Next.js中，頁(yè)面是從pages目錄中的.js、.jsx、.ts或.tsx檔案匯出的React元件。每個(gè)頁(yè)面都根據(jù)其檔案名稱(chēng)與一條路徑相關(guān)聯(lián)。

預(yù)設(shè)情況下，Next.js 預(yù)先渲染每個(gè)頁(yè)面。這意味著 Next.js 提前為每個(gè)頁(yè)面產(chǎn)生 HTML，而不是全部由客戶(hù)端 JavaScript 完成。預(yù)渲染可以帶來(lái)更好的效能和 SEO。

每個(gè)產(chǎn)生的 HTML 都與該頁(yè)面所需的最少 JavaScript 程式碼相關(guān)聯(lián)。當(dāng)瀏覽器載入頁(yè)面時(shí)，其 JavaScript 程式碼就會(huì)運(yùn)作並使頁(yè)面完全互動(dòng)。 （這個(gè)過(guò)程稱(chēng)為水合作用。）

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

管理儀表板

管理儀表板是一個(gè)使用 Next.js 和 MUI 建立的 Web 應(yīng)用程式。透過(guò)管理儀表板，管理員可以管理類(lèi)別、產(chǎn)品、訂單和使用者。建立新訂單時(shí)，管理員使用者會(huì)收到通知並收到電子郵件。

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

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

資源

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

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

以上是從零到店面：我的電子商務(wù)網(wǎng)站建立之旅的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！