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

陈继武 發表於 2024-1-16 14:56:00

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

<img src="https://www.cheerspublishing.com/uploads/article/d8fa50fe-f73a-4b00-88b5-9cc1d4786dca.png">
嗨，大家好！欢迎来到C-Shopping，这是一场揭开科技面纱的电商之旅。我是C-Shopping开源作者“继小鹏”，今天将为你介绍一款基于最新技术的开源电商平台。让我们一同探索吧！
点击这里，http://shop.huanghanlian.com/，即刻踏上C-Shopping 体验之旅！
项目传送门：点击这里，https://github.com/huanghanzhilian/c-shopping，
如果你觉得有帮助，请给我一个Star，这会给我更大的鼓励。
<hr>
<h2 id="项目背景">项目背景</h2>
<img src="https://www.cheerspublishing.com/uploads/article/2a34d3aa-90c1-4e96-a851-6b85d0566c26.jpeg">
背景：
<ul>
<li>一直以来前端UI框架被固定形式占据（受限于传统的UI框架），导致视觉疲劳，在开发一些高度自定义的项目时，往往力不从心；</li>
<li>多设备适配的web优秀项目很少，学习和维护成本较高；</li>
<li>当项目复杂后，在组件需要调用多个 api 时会变得复杂起来，比如需要管理多个 loading 和 error 状态，这会导致产生非常多的 state 声明，还有请求取消、请求竞态等可能存在的问题也容易被忽略；</li>
<li>随着项目复杂，样式的开发与维护变得庞大且臃肿；</li>
</ul>
意图：
改进背景中提到的问题。
目的：
打造一个完整的，适合web端的良好生态。
<hr>
首先，让我们了解一下C-Shopping的技术背后。我采用了一系列最前沿的技术，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query、JWT和Docker等。这确保了此项目不仅高效，而且具备强大的可扩展性。我们致力于解决传统电商平台的一些痛点：不美观、不适配不同设备、界面单一，等等。C-Shopping通过采用最新的技术和设计理念，为用户打造了一场全响应式技术开发体验。
C-Shopping关注用户体验。我们的界面不仅仅美观，更是响应式设计，让用户可以在任何设备上轻松愉悦地购物。个人中心和订单管理功能也让你的购物更加个性化和方便。
<hr>
<h2 id="项目亮点">项目亮点</h2>
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，让状态管理变得更加轻松愉快。你可以更好地追踪应用中的数据流，确保购物体验的稳定性。
<hr>
<h2 id="功能演示">功能演示</h2>
现在，让我们来看看C-Shopping的一些基本功能。从清晰的导航和商品展示，到方便的搜索和购物车功能，每一个细节都经过精心设计，为用户提供愉悦的购物体验。
用户端
<img src="https://img2024.cnblogs.com/blog/1623319/202401/1623319-20240116145227072-1970337852.png">
管理端
<img src="https://img2024.cnblogs.com/blog/1623319/202401/1623319-20240116145245804-1590142273.png">
<hr>
<h2 id="项目结构">项目结构</h2>
🏗️ C-Shopping 项目结构：
<pre><code>📂 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
</code></pre>
主要结构解释：
<ul>
<li>
📁 app: 应用程序的主要代码
<ul>
<li>📁 main: 主要应用程序组件
<ul>
<li>📁 client-layout: 用户端通用布局页面</li>
<li>📁 empty-layout: 通用空白布局页面</li>
<li>📁 admin: 管理端页面</li>
<li>📄 layout.js: 主要布局配置</li>
<li>📁 profile: 用户个人资料页面</li>
</ul>
</li>
<li>📄 StoreProvider.js: 全局状态管理提供者</li>
<li>📁 api: API 请求相关路由
<ul>
<li>📁 auth: 用户认证 API</li>
<li>📁 banner: 广告横幅 API</li>
<li>📁 category: 商品分类 API</li>
<li>...</li>
</ul>
</li>
</ul>
</li>
<li>
📁 components: 可复用的 React 组件
</li>
<li>
📁 helpers: 辅助函数和工具
<ul>
<li>📁 api: API 请求相关的辅助函数</li>
<li>📄 auth.js: 用户认证相关的辅助函数</li>
<li>...</li>
</ul>
</li>
<li>
📁 hooks: 自定义 React hooks
</li>
<li>
📁 models: 数据模型定义
</li>
<li>
📁 public: 静态资源，如图片、字体等
</li>
<li>
📁 store: Redux 状态管理相关配置
<ul>
<li>📁 services: RTK Query</li>
<li>📁 slices: Redux Toolkit</li>
</ul>
</li>
<li>
📁 styles: 样式文件
</li>
<li>
📁 utils: 通用工具
</li>
<li>
...
</li>
</ul>
这个结构旨在使项目组织有序，易于维护和扩展。每个部分都按照功能和职责进行划分，使团队成员更容易理解和协作。
<hr>
<h2 id="部署与使用">部署与使用</h2>
开发环境
<ol>
<li>
通过在终端运行以下命令克隆或下载存储库:
<pre><code>git clone https://github.com/huanghanzhilian/c-shopping.git
</code></pre>
</li>
<li>
使用npm或yarn安装项目依赖项:
<pre><code>npm install
</code></pre>
or
<pre><code>yarn
</code></pre>
</li>
<li>
修改.env的文件，在项目根目录，定义所需的环境变量。这个步骤是重要的（图片上传OSS）:
<pre><code>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>
</code></pre>
</li>
<li>
在本地机器上安装MongoDB
</li>
<li>
运行项目
<pre><code>npm run dev
</code></pre>
</li>
<li>
注册一个账户
<pre><code>http://localhost:3000/register
</code></pre>
</li>
<li>
创建帐户后，在数据库中找到您的帐户，并将root字段修改为true。role字段修改为admin，这将授予您访问所有管理仪表板功能的权限
<pre><code>http://localhost:3000/admin
</code></pre>
</li>
<li>
操作MongoDB，创建根分类
<pre><code>mongo
</code></pre>
<pre><code>use choiceshop
</code></pre>
<pre><code>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
})
</code></pre>
</li>
</ol>
docker 部署
项目根目录已经配置好docker compose，在安装docker环境后，直接运行部署
<pre><code>docker compose up -d --build
</code></pre>
<hr>
<h2 id="公众号">公众号</h2>
关注公众号获得更多资讯，有任何意见或建议都欢迎提issue，或者到公众号。
<img src="https://www.cheerspublishing.com/uploads/article/4632461d-0d43-4378-bcf7-bb32bf0de950.jpeg">
<hr>
<h2 id="许可证">许可证</h2>
Apache License 2.0
MIT License
Copyright (c) 2024 Jipeng Huang
<hr>
<h2 id="呼吁行动">呼吁行动</h2>
C-Shopping是一个开源项目，欢迎更多的开发者加入我们的社区。你可以在我们的GitHub仓库中找到项目源码，提出建议或者一同参与开发。
如果你对项目感兴趣，欢迎加入我们的社区，一同为项目添砖加瓦。 
来源：https://www.cnblogs.com/huanghanzhilian/p/17967669

頁: [1]

琼殿技术论坛's Archiver

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