c-shopping：精美的web电商系统

c-shopping是一款致力于解决传统前端UI框架固化形式导致的视觉疲劳和多设备适配挑战的精美Web电商系统。它采用了NextJs、TailwindCss、Headless UI、MongoDB、Redux Toolkit、RTK Query、JWT和Docker等先进技术，为用户提供了优质的使用体验和高效的开发环境。

github_case_c_shopping_1

项目介绍

背景与意图

传统前端UI框架的固定形式导致了视觉疲劳，并且难以应对高度自定义项目需求。同时，多设备适配的web项目学习和维护成本较高，复杂项目中的组件调用多个API时会变得复杂，样式开发与维护也变得庞大臃肿。

目的与使用技术

旨在改善以上问题，打造适合web端的完整生态。使用的技术包括：

NextJs
TailwindCss
Headless UI
MongoDB
Redux Toolkit及RTK Query
JWT
Docker

功能

用户端

登录与注册（JWT认证）
首页展示（包含分类、banner、特价、hot商品等）
商品搜索
分类浏览（二级、三级分类）
商品详情与购物车
支付流程
个人中心（订单、评论、地址管理等）

管理端

登录与注册（JWT认证）
用户、分类、规格、商品、订单、评论、滑块、banner等管理功能

环境搭建与部署

开发环境

克隆或下载存储库，并安装依赖：

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

创建.env文件，定义所需环境变量：

    
    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

访问注册页面，创建账户，然后在数据库中将账户权限修改为管理员：

    
    mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})

管理员入口：http://localhost:3000/admin

创建根分类：

    
    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

以上是关于C-Shopping v1.0.0的详细介绍和部署说明。