C-Shopping基于Next.js,开源电商平台全新亮相

C-Shopping基于Next.js,开源电商平台全新亮相_第1张图片

嗨,大家好!欢迎来到C-Shopping,这是一场揭开科技面纱的电商之旅。我是C-Shopping开源作者“继小鹏”,今天将为你介绍一款基于最新技术的开源电商平台。让我们一同探索吧!

在线体验:http://shop.huanghanlian.com/

项目传送门:https://github.com/huanghanzhilian/c-shopping

如果你觉得有帮助,请给我一个Star,这会给我更大的鼓励。


项目背景

C-Shopping基于Next.js,开源电商平台全新亮相_第2张图片

背景:

  • 一直以来前端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基于Next.js,开源电商平台全新亮相_第3张图片

管理端

C-Shopping基于Next.js,开源电商平台全新亮相_第4张图片


项目结构

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=
    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,这将授予您访问所有管理仪表板功能的权限

    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仓库中找到项目源码,提出建议或者一同参与开发。

如果你对项目感兴趣,欢迎加入我们的社区,一同为项目添砖加瓦。

你可能感兴趣的:(C-Shopping基于Next.js,开源电商平台全新亮相)