動態

詳情 返回 返回

C-Shopping基於Next.js，開源電商平台全新亮相 - 動態 詳情

嗨，大家好！歡迎來到C-Shopping，這是一場揭開科技面紗的電商之旅。我是C-Shopping開源作者“繼小鵬”，今天將為你介紹一款基於最新技術的開源電商平台。讓我們一同探索吧！

在線體驗：http://shop.huanghanlian.com/

項目傳送門：https://github.com/huanghanzhilian/c-shopping

如果你覺得有幫助，請給我一個Star，這會給我更大的鼓勵。

項目背景

背景：

  • 一直以來前端UI框架被固定形式佔據（受限於傳統的UI框架），導致視覺疲勞，在開發一些高度自定義的項目時，往往力不從心；
  • 多設備適配的web優秀項目很少，學習和維護成本較高；
  • 當項目複雜後，在組件需要調用多個 api 時會變得複雜起來，比如需要管理多個 loading 和 error 狀態，這會導致產生非常多的 state 聲明，還有請求取消、請求競態等可能存在的問題也容易被忽略；
  • 隨着項目複雜，樣式的開發與維護變得龐大且臃腫；

意圖：

改進背景中提到的問題。

目的：

打造一個完整的，適合web端的良好生態。

首先，讓我們瞭解一下C-Shopping的技術背後。我採用了一系列最前沿的技術，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query、JWT和Docker等。這確保了此項目不僅高效，而且具備強大的可擴展性。我們致力於解決傳統電商平台的一些痛點：不美觀、不適配不同設備、界面單一，等等。C-Shopping通過採用最新的技術和設計理念，為用户打造了一場全響應式技術開發體驗。

C-Shopping關注用户體驗。我們的界面不僅僅美觀，更是響應式設計，讓用户可以在任何設備上輕鬆愉悦地購物。個人中心和訂單管理功能也讓你的購物更加個性化和方便。

項目亮點

C-Shopping的亮點之一是我們採用了一系列先進的技術，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query等，為用户提供了極致的性能和體驗。不僅注重美觀，更追求技術上的卓越。

Next.js 驅動的極速體驗

C-Shopping採用了 Next.js，這不僅意味着網頁加載速度飛快，而且還支持服務端渲染，讓你體驗到前所未有的流暢度。

🎨 Tailwind CSS 的時尚設計

採用 Tailwind CSS，為 C-Shopping 注入了時尚感。每一次的界面都如同藝術品般精緻，讓購物成為一場視覺的盛宴。

🔧 Headless UI 自由而靈活

C-Shopping 選擇了 Headless UI 風格，讓用户可以在購物過程中擁有更多自由。不再受限於傳統的UI框架，為你打開了更多定製的大門。

🔐 JWT 安全無憂

安全至上！採用 JWT 進行用户身份驗證，為你的購物行為提供了最強有力的保障，讓你可以放心盡情購物。

🐳 Docker 容器化的完美部署

C-Shopping 擁抱 Docker，使得項目的部署變得前所未有的簡單。容器化技術讓整個項目在不同環境中都能如魚得水地運行。

🔄 Redux Toolkit 和 RTK Query 的狀態管理藝術

C-Shopping 使用 Redux Toolkit 和 RTK Query，讓狀態管理變得更加輕鬆愉快。你可以更好地追蹤應用中的數據流，確保購物體驗的穩定性。

功能演示

現在，讓我們來看看C-Shopping的一些基本功能。從清晰的導航和商品展示，到方便的搜索和購物車功能，每一個細節都經過精心設計，為用户提供愉悦的購物體驗。

用户端

管理端

項目結構

🏗️ C-Shopping 項目結構：

📂 c-shopping
  ├── 📁 app
  │   ├── 📁 main
  │   │   ├── 📁 client-layout
  │   │   ├── 📁 empty-layout
  │   │   ├── 📁 admin
  │   │   ├── 📄 layout.js
  │   │   └── 📁 profile
  │   ├── 📄 StoreProvider.js
  │   ├── 📁 api
  │   │   ├── 📁 auth
  │   │   ├── 📁 banner
  │   │   ├── 📁 category
  │   │   ├── 📁 details
  │   │   ├── 📁 order
  │   │   ├── 📁 products
  │   │   ├── 📁 reviews
  │   │   ├── 📁 slider
  │   │   ├── 📁 upload
  │   │   └── 📁 user
  │   ├── 📄 layout.js
  │   └── 📄 not-found.js
  ├── 📄 commitlint.config.js
  ├── 📁 components
  ├── 📄 docker-compose.yml
  ├── 📁 helpers
  │   ├── 📁 api
  │   ├── 📄 auth.js
  │   ├── 📁 db-repo
  │   ├── 📄 db.js
  │   ├── 📄 getQuery.js
  │   └── 📄 index.js
  ├── 📁 hooks
  ├── 📄 jsconfig.json
  ├── 📁 models
  ├── 📄 next.config.js
  ├── 📄 package-lock.json
  ├── 📄 package.json
  ├── 📄 postcss.config.js
  ├── 📂 public
  ├── 📁 store
  ├── 📁 styles
  ├── 📄 tailwind.config.js
  └── 📁 utils

主要結構解釋：

  • 📁 app: 應用程序的主要代碼

    • 📁 main: 主要應用程序組件

      • 📁 client-layout: 用户端通用佈局頁面
      • 📁 empty-layout: 通用空白布局頁面
      • 📁 admin: 管理端頁面
      • 📄 layout.js: 主要佈局配置
      • 📁 profile: 用户個人資料頁面
    • 📄 StoreProvider.js: 全局狀態管理提供者

    • 📁 api: API 請求相關路由

      • 📁 auth: 用户認證 API
      • 📁 banner: 廣告橫幅 API
      • 📁 category: 商品分類 API
      • ...
  • 📁 components: 可複用的 React 組件

  • 📁 helpers: 輔助函數和工具

    • 📁 api: API 請求相關的輔助函數
    • 📄 auth.js: 用户認證相關的輔助函數
    • ...
  • 📁 hooks: 自定義 React hooks
  • 📁 models: 數據模型定義
  • 📁 public: 靜態資源，如圖片、字體等

  • 📁 store: Redux 狀態管理相關配置

    • 📁 services: RTK Query
    • 📁 slices: Redux Toolkit
  • 📁 styles: 樣式文件
  • 📁 utils: 通用工具
  • ...

這個結構旨在使項目組織有序，易於維護和擴展。每個部分都按照功能和職責進行劃分，使團隊成員更容易理解和協作。

部署與使用

開發環境

  1. 通過在終端運行以下命令克隆或下載存儲庫:

    git clone https://github.com/huanghanzhilian/c-shopping.git

  2. 使用npm或yarn安裝項目依賴項:

    npm install

    or

    yarn

  3. 修改.env的文件，在項目根目錄，定義所需的環境變量。這個步驟是重要的（圖片上傳OSS）:

    NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
  4. 在本地機器上安裝MongoDB

  5. 運行項目

    npm run dev

  6. 註冊一個賬户

    http://localhost:3000/register

  7. 創建帳户後，在數據庫中找到您的帳户，並將root字段修改為true。role字段修改為admin，這將授予您訪問所有管理儀表板功能的權限

    http://localhost:3000/admin

  8. 操作MongoDB，創建根分類

    mongo
    use choiceshop
    db.categories.insert({
    "name" : "精選好物",
    "slug" : "choiceshop",
    "image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
    "colors" : {
        "start" : "#EF394E",
        "end" : "#EF3F55"
    },
    "level" : 0
})

docker 部署

項目根目錄已經配置好docker compose，在安裝docker環境後，直接運行部署

docker compose up -d --build

許可證

Apache License 2.0

MIT License

Copyright (c) 2024 Jipeng Huang

呼籲行動

C-Shopping是一個開源項目，歡迎更多的開發者加入我們的社區。你可以在我們的GitHub倉庫中找到項目源碼，提出建議或者一同參與開發。

如果你對項目感興趣，歡迎加入我們的社區，一同為項目添磚加瓦。

redux , node.js , tailwind-css , next.js , mongodb
點贊

Add a new 評論

Some HTML is okay.