c shopping下載c shopping源代碼下載

c shopping

Ai源碼

Minimum MVP Publishing

下載

c-shopping v1.0.0

readme.md

en英語
zh_cn簡化中文

大家好！歡迎來到C-Shopping，這是進入電子商務世界的旅程，揭示了技術奇觀。我是C-Shopping的開源作者“ Ji Xiaopeng”，今天，我將根據最新技術向您介紹一個開源的電子商務平台。讓我們一起探索！

項目實時演示鏈接：

Docker部署地址：http：//shop.huanghanlian.com/
Vercel地址：https：//c-shopping-three.vercel.app/

項目網關：https：//github.com/huanghanzhilian/c-shopping。

React Native移動應用程序應用程序：

項目網關：https：//github.com/huanghanzhilian/c-shopping-rn。

如果您覺得這很有幫助，請給我一個明星。這將是一個很大的鼓勵。

項目背景

背景：

長期以來，傳統的前端UI框架一直受到固定形式（受傳統UI框架的限制）的約束，從而導致視覺疲勞。在開發高度定制的項目時，通常會有一種無能為力的感覺。
具有多個設備適應的出色網絡項目很少見，並且具有高度的學習和維護成本。
隨著項目變得複雜，處理組件中多個API調用可能變得複雜。例如，管理多個加載和錯誤狀態可以導致眾多狀態的聲明。諸如取消請求和要求比賽條件之類的問題也容易被忽視。
隨著項目複雜性的增長，樣式的開發和維護變得廣泛而繁瑣。

意圖：

解決背景中提到的問題。

客觀的：

構建一個適合Web的完整，精心設計的生態系統。

首先，讓我們深入研究C-Shopping背後的技術。我採用了一系列尖端技術，包括Next.js，Tailwind CSS，Headless UI，Redux-Toolkit-RTK查詢，JWT和Docker等。這樣可以確保該項目不僅有效，而且是高度可擴展的。我們致力於解決傳統電子商務平台的一些痛點：缺乏美學，對不同設備的適應不足以及單調界面等。通過採用最新技術和設計原則，C-Shopping為用戶創造了完全響應的技術開發經驗。

C-Shopping優先考慮用戶體驗。我們的界面不僅美麗，而且響應迅速，使用戶可以輕鬆在任何設備上購物。個人中心和訂單管理功能還使您的購物體驗更具個性化和方便。

項目亮點

C-shopping的亮點之一是採用了一系列高級技術，包括Next.js，Tailwind CSS，無頭UI，Redux-Toolkit-RTK查詢等，從而為用戶提供最終的性能和經驗。我們不僅專注於美學，而且還致力於卓越的技術。

next.js驅動閃電的體驗

C-Shopping使用Next.js，這不僅意味著網頁加載速度非常快，而且還支持服務器端渲染，從而提供了前所未有的光滑度。

？尾風CSS時尚設計

通過使用Tailwind CSS，C-shopping注入了一種風格感。每個界面都是精美的，使購物成為視覺盛宴。

？無頭UI自由和靈活性

C-Shopping選擇了無頭UI風格，在購物過程中為用戶提供了更多的自由。它不再局限於傳統的UI框架，它為自定義打開了更多的門。

？ JWT安全無擔心

安全是最重要的！ JWT用於用戶身份驗證，為您的購物行為提供了最強大的保證，使您可以自信地購物。

？ Docker完美部署

C-Shopping擁抱Docker，使項目部署變得非常簡單。容器化允許整個項目在不同的環境中無縫運行。

Redux工具包和RTK查詢州管理藝術

C-Shopping使用Redux工具包和RTK查詢，使國家管理更加放鬆和愉快。您可以更好地跟踪應用程序中的數據流，從而確保購物體驗的穩定性。

功能演示

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

用戶端

模塊	桌面設備	行動裝置
家
次要類別
第三級類別
產品詳細信息
登入
登記
搜尋
購物車
查看
用戶配置文件
我的命令
我的評論
地址管理
最近的訪問

管理端

模塊	桌面設備	行動裝置
登入
管理中心
用戶管理
類別管理
類別管理樹
規範管理
產品管理
訂單管理
評論管理
滑塊管理
橫幅管理

項目結構

c-shoping項目結構：

關鍵結構解釋：

？應用：應用程序的主要代碼
- ？主：主應用程序組件
  - ？客戶端：用戶端的通用佈局頁面
  - ？空路：常見的空白佈局頁面
  - ？管理員：管理頁面
  - ？ layout.js ：主佈局配置
  - ？個人資料：用戶配置文件頁面
- ？ StoreProvider.js ：全球國家管理提供商
- ？ API ：與API請求相關的路線
  - ？ Auth ：用戶身份驗證API
  - ？橫幅：廣告橫幅API
  - ？類別：產品類別API
  - ...
？組件：可重複使用的反應組件
？幫助者：助手功能和工具
- ？ API ：與API請求相關的助手功能
- ？ auth.js ：與用戶身份驗證有關的輔助功能
- ...
？鉤子：自定義式鉤子
？模型：數據模型定義
？公共：靜態資源，例如圖像，字體等。
？商店：與REDUX狀態管理有關的配置
- ？服務：RTK查詢
- ？切片：Redux工具包
？樣式：樣式文件
？ UTILS ：通用公用事業
...

該結構旨在使該項目組織起來，易於維護和可擴展。每個部分根據

功能和職責，使團隊成員更容易理解和協作。

部署和用法

發展環境

克隆或通過在終端中運行以下命令下載存儲庫：

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

使用NPM或紗線安裝項目依賴性：
```
 npm install
```
或者
```
 yarn
```

請在項目根目錄中的.env.example文件中創建一個新的.env文件，以定義所需的環境變量。此步驟至關重要（用於上傳到OSS）：

 NEXT_PUBLIC_ACCESS_TOKEN_SECRET=<your token secret>
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>

在您的本地機器上安裝mongoDB。
運行項目：
```
 npm run dev 
```
註冊帳戶：
```
 http://localhost:3000/register
```
創建帳戶後，在數據庫中查找您的帳戶，然後將root字段修改為true和role字段進行管理。授予您訪問所有管理儀表板功能：
```
 mongo
```
```
 use choiceshop
```
```
 db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
```
管理員入口：http：// localhost：3000/admin

在MongoDB中，創建根類別：

 mongo

 use choiceshop

 db.categories.insert({
    "name" : "Featured Items",
    "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後，只需運行部署：