C-Shopping基于Next.js，開源電商平臺全新亮相

[圖片上傳失敗...(image-9a1eff-1705383480534)]

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

點擊 這里，http://shop.huanghanlian.com/，即刻踏上C-Shopping 體驗之旅！

項目傳送門：點擊 這里，https://github.com/huanghanzhilian/c-shopping，

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

項目背景

[圖片上傳失敗...(image-60e155-1705383480534)]

背景：

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

意圖：

改進背景中提到的問題。

目的：

打造一個完整的，適合web端的良好生態(tài)。

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

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

項目亮點

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

Next.js 驅(qū)動的極速體驗

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

?? Tailwind CSS 的時尚設計

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

?? Headless UI 自由而靈活

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

?? JWT 安全無憂

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

?? Docker 容器化的完美部署

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

?? Redux Toolkit 和 RTK Query 的狀態(tài)管理藝術

C-Shopping 使用 Redux Toolkit 和 RTK Query，讓狀態(tài)管理變得更加輕松愉快。你可以更好地追蹤應用中的數(shù)據(jù)流，確保購物體驗的穩(wěn)定性。

功能演示

現(xiàn)在，讓我們來看看C-Shopping的一些基本功能。從清晰的導航和商品展示，到方便的搜索和購物車功能，每一個細節(jié)都經(jīng)過精心設計，為用戶提供愉悅的購物體驗。

用戶端

1705374022441.png

管理端

1705374043204.png

項目結(jié)構(gòu)

??? C-Shopping 項目結(jié)構(gòu)：

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

主要結(jié)構(gòu)解釋：

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

    • ?? main: 主要應用程序組件
      • ?? client-layout: 用戶端通用布局頁面
      • ?? empty-layout: 通用空白布局頁面
      • ?? admin: 管理端頁面
      • ?? layout.js: 主要布局配置
      • ?? profile: 用戶個人資料頁面
    • ?? StoreProvider.js: 全局狀態(tài)管理提供者
    • ?? api: API 請求相關路由
      • ?? auth: 用戶認證 API
      • ?? banner: 廣告橫幅 API
      • ?? category: 商品分類 API
      • ...

  • ?? components: 可復用的 React 組件

  • ?? helpers: 輔助函數(shù)和工具

    • ?? api: API 請求相關的輔助函數(shù)
    • ?? auth.js: 用戶認證相關的輔助函數(shù)
    • ...

  • ?? hooks: 自定義 React hooks

  • ?? models: 數(shù)據(jù)模型定義

  • ?? public: 靜態(tài)資源，如圖片、字體等

  • ?? store: Redux 狀態(tài)管理相關配置

    • ?? services: RTK Query
    • ?? slices: Redux Toolkit

  • ?? styles: 樣式文件

  • ?? utils: 通用工具

  • ...

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

部署與使用

開發(fā)環(huán)境

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

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

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

    npm install

    or

    yarn

  3. 修改.env的文件，在項目根目錄，定義所需的環(huán)境變量。這個步驟是重要的（圖片上傳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. 創(chuàng)建帳戶后，在數(shù)據(jù)庫中找到您的帳戶，并將root字段修改為true。role字段修改為admin，這將授予您訪問所有管理儀表板功能的權限

    http://localhost:3000/admin

  8. 操作MongoDB，創(chuàng)建根分類

    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 部署

項目根目錄已經(jīng)配置好docker compose，在安裝docker環(huán)境后，直接運行部署

docker compose up -d --build

許可證

Apache License 2.0

MIT License

Copyright (c) 2024 Jipeng Huang

呼吁行動

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

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

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容