c-shopping:精美的web电商系统
c-shopping是一个精美的web电商系统,旨在解决传统前端UI框架固化形式导致的视觉疲劳和多设备适配的挑战,同时简化复杂项目开发过程中可能遇到的问题,提高开发效率。
直达下载
回到上一页 介绍
c-shopping是一款致力于解决传统前端UI框架固化形式导致的视觉疲劳和多设备适配挑战的精美Web电商系统。它采用了NextJs、TailwindCss、Headless UI、MongoDB、Redux Toolkit、RTK Query、JWT和Docker等先进技术,为用户提供了优质的使用体验和高效的开发环境。
项目介绍
背景与意图
传统前端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的详细介绍和部署说明。
×
直达下载