Skip to content

Latest commit

 

History

History
320 lines (264 loc) · 14.1 KB

README.zh_CN.md

File metadata and controls

320 lines (264 loc) · 14.1 KB
Raw

logo

C-Shopping v1.0.0

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

README.md

前言

c-shopping是一个精美的web电商系统，支持响应式交互，界面优雅，功能丰富，小巧迅速，包含一个电商平台MVP完整功能，具备良好的审美风格与编码设计。

希望来的人，有所收获。故事不结束，青春不散场。

项目在线演示

项目在线演示地址：

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

React Native 移动app应用:

项目传送门: 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=<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>

  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

关于我

I am a technology explorer, a eager learner, and a problem solver.
我是一个技术的探索者，一个渴望学习的人，一个解决问题的人。

公众号｜我的微信

关注公众号获得更多资讯，有任何意见或建议都欢迎提issue，或者到公众号留言；也欢迎加我微信交流。

我的公众号 我的微信
继小鹏公众号 我的微信

License

MIT

Copyright (c) 2024 Jipeng Huang