【实用github项目】c-shopping网上购物系统(易购)

PO￦ER

项目地址

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浏览	手机浏览
登录
管理 中心
用户 管理
分类 管理
类别树
规范 管理
产品 管理
订单 管理
审核 管理
滑块 管理
横幅 管理

部署与使用

开发环境

1. 通过在终端中运行以下命令来克隆或下载存储库：

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

2. 使用npm或yarn安装项目依赖项：

   npm install

   或者

   yarn

3. 请从项目根目录中的文件创建一个新 .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>

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" : "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）

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

版权声明

1、转载或引用本网站内容(【实用github项目】c-shopping网上购物系统(易购))须注明原网址及作者(PO￦ER)，并标明本网站网址(https://pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://pixtech.cc/thread-133-1-1.html