本文最后更新于 2024-05-14，

若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我删除。

本站只有Telegram群组为唯一交流群组，点击加入

文章内容有误？申请成为本站文章修订者或作者？向站长提出申请

项目地址

https://github.com/huanghanzhilian/c-shopping?tab=readme-ov-file

项目亮点

C-Shopping的一大亮点是采用了一系列先进技术，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query等，为用户提供极致的性能和体验。不仅注重美学，更在技术上精益求精。

Next.js 驱动的闪电般的快速体验

C-Shopping使用Next.js，这意味着不仅网页加载速度快得惊人，而且它还支持服务器端渲染，提供前所未有的流畅度。

🎨 Tailwind CSS 时尚设计

通过使用 Tailwind CSS，C-Shopping 注入了一种风格感。每个界面都精美绝伦，让购物成为一场视觉盛宴。

🔧无头 UI 自由和灵活性

C-Shopping选择了Headless UI风格，让用户在购物过程中拥有更多的自由度。不再局限于传统的 UI 框架，它为定制打开了更多的大门。

🔐智威汤逊安全无忧

安全至上！采用JWT进行用户认证，为您的购物行为提供最强保障，让您放心购物。

🐳 Docker完美部署

C-Shopping拥抱Docker，使项目部署变得异常简单。容器化使得整个项目能够在不同的环境中无缝运行。

🔄 Redux 工具包和 RTK 查询状态管理艺术

C-Shopping使用Redux Toolkit和RTK Query，让状态管理更加轻松愉快。您可以更好地跟踪应用程序中的数据流向，确保购物体验的稳定性。

功能演示

客户端	web浏览	手机浏览
主页
类别
三级菜单
产品详情
登录
注册
搜索
购物车
详情
用户资料
我的订单
我的评价
地址管理
足迹

管理端	web浏览	手机浏览
登录
管理中心
用户管理
分类管理
类别树
规范管理
产品管理
订单管理
审核管理
滑块管理
横幅管理

部署与使用

开发环境

通过在终端中运行以下命令来克隆或下载存储库：
```
git clone https://github.com/huanghanzhilian/c-shopping.git
```
使用npm或yarn安装项目依赖项：
```
npm install
```
或者
```
yarn
```

请从项目根目录中的文件创建一个新 .env文件来定义所需的环境变量。.env.example这一步很关键（对于图片上传到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为admin。这将授予您访问所有管理仪表板功能的权限：
```
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 后，只需运行部署即可：

docker compose up -d --build

反向代理

参考教程：安装及使用

⚠️Nginx Proxy Manager（以下简称NPM）会用到80、443端口，所以本机不能占用（比如原来就有Nginx）

互联网使用请确保完成了域名解析

管理端	web浏览	手机浏览
登录
管理中心
用户管理
分类管理
类别树
规范管理
产品管理
订单管理
审核管理
滑块管理
横幅管理