logo

C-Shopping v1.0.0

基于Nextjs开发同时适配Desktop、Tablet、Phone多种设备的精美购物平台

## README.md - en [English](README.md) - zh_CN [简体中文](README.zh_CN.md) ## 前言 `c-shopping`是一个精美的web电商系统，支持响应式交互，界面优雅，功能丰富，小巧迅速，包含一个电商平台MVP完整功能，具备良好的审美风格与编码设计。 希望来的人，有所收获。故事不结束，青春不散场。 ## 项目在线演示 **项目在线演示地址：** - docker 部署地址：[http://shop.huanghanlian.com/](http://shop.huanghanlian.com/) - vercel 部署地址：[https://c-shopping-three.vercel.app/](https://c-shopping-three.vercel.app/) 项目传送门: [https://github.com/huanghanzhilian/c-shopping](https://github.com/huanghanzhilian/c-shopping) **React Native 移动app应用:** 项目传送门: [https://github.com/huanghanzhilian/c-shopping-rn](https://github.com/huanghanzhilian/c-shopping-rn) ## 项目介绍 **背景：** - 一直以来前端UI框架被固定形式占据（受限于传统的UI框架），导致视觉疲劳，在开发一些高度自定义的项目时，往往力不从心； - 多设备适配的web优秀项目很少，学习和维护成本较高； - 当项目复杂后，在组件需要调用多个 api 时会变得复杂起来，比如需要管理多个 loading 和 error 状态，这会导致产生非常多的 state 声明，还有请求取消、请求竞态等可能存在的问题也容易被忽略； - 随着项目复杂，样式的开发与维护变得庞大且臃肿； **意图：** 改进背景中提到的问题。 **目的：** 打造一个完整的，适合web端的良好生态。 ### 使用技术 - NextJs - TailwindCss - Headless UI - MongoDB - Redux - Toolkit - RTK Query - JWT - Docker ### 功能 用户端： - 登录 JWT认证 - 注册 - 首页（分类navBar、banner、slider、特价板块、hot板块、畅销板块） - 搜索 - 二级分类页（分类navBar、banner、slider、特价板块、hot板块、畅销板块） - 三级分类页（排序、筛选） - 商品详情（购物车） - 购物车页 - 支付页 - 个人中心 - 我的订单 - 我的评论 - 地址管理 - 近期访问 管理端： - 登录 JWT认证 - 注册 - 用户管理 - 分类管理 - 规格管理 - 商品管理 - 订单管理 - 评论管理 - 滑块管理 - banner管理 ### 演示图 #### 用户端 |模块|Desktop devices|Mobile devices| |--|------------|--| |首页||| |二级分类||| |三级分类||| |商品详情||| |登录||| |注册||| |搜索||| |购物车||| |支付页||| |个人中心||| |我的订单||| |我的评论||| |地址管理||| |近期访问||| #### 管理端 |模块|Desktop devices|Mobile devices| |--|------------|--| |登录||| |管理中心||| |用户管理||| |分类管理||| |分类管理树状||| |规格管理||| |商品管理||| |订单管理||| |评论管理||| |滑块管理||| |banner管理||| ### 项目结构 🏗️ **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.example`内容，创建新的`.env`的文件，在项目根目录，定义所需的环境变量。这个步骤是重要的（图片上传OSS）: ``` NEXT_PUBLIC_ACCESS_TOKEN_SECRET= NEXT_PUBLIC_ALI_REGION= NEXT_PUBLIC_ALI_BUCKET_NAME= NEXT_PUBLIC_ALI_ACCESS_KEY= NEXT_PUBLIC_ALI_SECRET_KEY= NEXT_PUBLIC_ALI_ACS_RAM_NAME= NEXT_PUBLIC_ALI_FILES_PATH= ``` 4. 在本地机器上安装MongoDB 5. 运行项目 ``` npm run dev ``` 6. 注册一个账户 ``` http://localhost:3000/register ``` 7. 创建帐户后，在数据库中找到您的帐户，并将root字段修改为true。role字段修改为admin，这将授予您访问所有管理仪表板功能的权限 ``` mongo ``` ``` use choiceshop ``` ``` db.users.update({name:"admin"},{$set:{role:"admin"}}) db.users.update({name:"admin"},{$set:{root:true}}) ``` 管理员入口：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 ```