同步操作将从 Gitee 极速下载/c-shopping 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
c-shopping
是一个精美的web电商系统,支持响应式交互,界面优雅,功能丰富,小巧迅速,包含一个电商平台MVP完整功能,具备良好的审美风格与编码设计。
希望来的人,有所收获。故事不结束,青春不散场。
项目在线演示地址:
项目传送门: https://github.com/huanghanzhilian/c-shopping
React Native 移动app应用:
项目传送门: https://github.com/huanghanzhilian/c-shopping-rn
背景:
意图:
改进背景中提到的问题。
目的:
打造一个完整的,适合web端的良好生态。
用户端:
管理端:
模块 | 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: 应用程序的主要代码
📁 components: 可复用的 React 组件
📁 helpers: 辅助函数和工具
📁 hooks: 自定义 React hooks
📁 models: 数据模型定义
📁 public: 静态资源,如图片、字体等
📁 store: Redux 状态管理相关配置
📁 styles: 样式文件
📁 utils: 通用工具
...
这个结构旨在使项目组织有序,易于维护和扩展。每个部分都按照功能和职责进行划分,使团队成员更容易理解和协作。
通过在终端运行以下命令克隆或下载存储库:
git clone https://github.com/huanghanzhilian/c-shopping.git
使用npm或yarn安装项目依赖项:
npm install
or
yarn
查看.env.example
内容,创建新的.env
的文件,在项目根目录,定义所需的环境变量。这个步骤是重要的(图片上传OSS):
NEXT_PUBLIC_ACCESS_TOKEN_SECRET=
NEXT_PUBLIC_ALI_REGION=
NEXT_PUBLIC_ALI_BUCKET_NAME=
NEXT_PUBLIC_ALI_ACCESS_KEY=
NEXT_PUBLIC_ALI_SECRET_KEY=
NEXT_PUBLIC_ALI_ACS_RAM_NAME=
NEXT_PUBLIC_ALI_FILES_PATH=
4. 在本地机器上安装MongoDB 5. 运行项目
npm run dev
6. 注册一个账户
http://localhost:3000/register
7. 创建帐户后,在数据库中找到您的帐户,并将root字段修改为true。role字段修改为admin,这将授予您访问所有管理仪表板功能的权限
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 compose,在安装docker环境后,直接运行部署
docker compose up -d --build
关注公众号获得更多资讯,有任何意见或建议都欢迎提issue,或者到公众号。
MIT License
Copyright (c) 2024 Jipeng Huang
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。