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后，只需运行部署：