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

这篇具有很好参考价值的文章主要介绍了C-Shopping基于Next.js,开源电商平台全新亮相。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

嗨,大家好!欢迎来到C-Shopping,这是一场揭开科技面纱的电商之旅。我是C-Shopping开源作者“继小鹏”,今天将为你介绍一款基于最新技术的开源电商平台。让我们一同探索吧!

点击 这里,http://shop.huanghanlian.com/,即刻踏上C-Shopping 体验之旅!

项目传送门:点击 这里,https://github.com/huanghanzhilian/c-shopping,

如果你觉得有帮助,请给我一个Star,这会给我更大的鼓励。


项目背景

背景:

  • 一直以来前端UI框架被固定形式占据(受限于传统的UI框架),导致视觉疲劳,在开发一些高度自定义的项目时,往往力不从心;
  • 多设备适配的web优秀项目很少,学习和维护成本较高;
  • 当项目复杂后,在组件需要调用多个 api 时会变得复杂起来,比如需要管理多个 loading 和 error 状态,这会导致产生非常多的 state 声明,还有请求取消、请求竞态等可能存在的问题也容易被忽略;
  • 随着项目复杂,样式的开发与维护变得庞大且臃肿;

意图:

改进背景中提到的问题。

目的:

打造一个完整的,适合web端的良好生态。


首先,让我们了解一下C-Shopping的技术背后。我采用了一系列最前沿的技术,包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query、JWT和Docker等。这确保了此项目不仅高效,而且具备强大的可扩展性。我们致力于解决传统电商平台的一些痛点:不美观、不适配不同设备、界面单一,等等。C-Shopping通过采用最新的技术和设计理念,为用户打造了一场全响应式技术开发体验。

C-Shopping关注用户体验。我们的界面不仅仅美观,更是响应式设计,让用户可以在任何设备上轻松愉悦地购物。个人中心和订单管理功能也让你的购物更加个性化和方便。


项目亮点

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,让状态管理变得更加轻松愉快。你可以更好地追踪应用中的数据流,确保购物体验的稳定性。


功能演示

现在,让我们来看看C-Shopping的一些基本功能。从清晰的导航和商品展示,到方便的搜索和购物车功能,每一个细节都经过精心设计,为用户提供愉悦的购物体验。

用户端

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

管理端

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


项目结构

🏗️ 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: 应用程序的主要代码

    • 📁 main: 主要应用程序组件
      • 📁 client-layout: 用户端通用布局页面
      • 📁 empty-layout: 通用空白布局页面
      • 📁 admin: 管理端页面
      • 📄 layout.js: 主要布局配置
      • 📁 profile: 用户个人资料页面
    • 📄 StoreProvider.js: 全局状态管理提供者
    • 📁 api: API 请求相关路由
      • 📁 auth: 用户认证 API
      • 📁 banner: 广告横幅 API
      • 📁 category: 商品分类 API
      • ...
  • 📁 components: 可复用的 React 组件

  • 📁 helpers: 辅助函数和工具

    • 📁 api: API 请求相关的辅助函数
    • 📄 auth.js: 用户认证相关的辅助函数
    • ...
  • 📁 hooks: 自定义 React hooks

  • 📁 models: 数据模型定义

  • 📁 public: 静态资源,如图片、字体等

  • 📁 store: Redux 状态管理相关配置

    • 📁 services: RTK Query
    • 📁 slices: Redux Toolkit
  • 📁 styles: 样式文件

  • 📁 utils: 通用工具

  • ...

这个结构旨在使项目组织有序,易于维护和扩展。每个部分都按照功能和职责进行划分,使团队成员更容易理解和协作。


部署与使用

开发环境

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

    git clone https://github.com/huanghanzhilian/c-shopping.git
    
  2. 使用npm或yarn安装项目依赖项:

    npm install
    

    or

    yarn
    
  3. 修改.env的文件,在项目根目录,定义所需的环境变量。这个步骤是重要的(图片上传OSS):

    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,这将授予您访问所有管理仪表板功能的权限

    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 部署

项目根目录已经配置好docker compose,在安装docker环境后,直接运行部署

docker compose up -d --build

公众号

关注公众号获得更多资讯,有任何意见或建议都欢迎提issue,或者到公众号。


许可证

Apache License 2.0

MIT License

Copyright (c) 2024 Jipeng Huang


呼吁行动

C-Shopping是一个开源项目,欢迎更多的开发者加入我们的社区。你可以在我们的GitHub仓库中找到项目源码,提出建议或者一同参与开发。

如果你对项目感兴趣,欢迎加入我们的社区,一同为项目添砖加瓦。文章来源地址https://www.toymoban.com/news/detail-794278.html

到了这里,关于C-Shopping基于Next.js,开源电商平台全新亮相的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实用的开源应用全新开源源码Vue3+TS的前后台分离的开发平台源码开源技术社区平台

    开源全新开源源码Vue3+TS的前后台分离的开发平台源码。创意、新奇、有趣、实用的开源应用、系统、软件、硬件及技术,一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区,共建开源新生态! 功能简介 个人办公:待办事项、抄送传阅、

    2024年02月13日
    浏览(56)
  • 前端(五)——从 Vue.js 到 UniApp:开启一次全新的跨平台开发之旅

    🙂博主:小猫娃来啦 🙂文章核心:从 Vue.js 到 UniApp:开启一次全新的跨平台开发之旅 UniApp是一种基于Vue.js的跨平台应用开发框架。它是 由DCloud(数字天堂)开发和维护 的,旨在帮助开发者使用一套代码构建同时运行在多个平台(包括iOS、Android、Web等)的应用程序。 UniA

    2024年02月16日
    浏览(72)
  • 基于Next14+Auth5实现Github、Google、Gitee平台授权登录和邮箱密码登录

    后面打算自己做一个独立产品,产品需要用到服务端渲染,而我比较擅长React,所以最近在学Next14。 刚开始学的时候,因为自己英文不好,中文文档又特别少,踩了不少坑。后面买了冴羽大佬的Next小册跟着学习,很快就上手了,小册质量很高,个人觉得很适合新手入门。 学

    2024年04月15日
    浏览(43)
  • 基于容器技术和服务发现的全新大数据平台弹性伸缩方法

    随着科技的不断发展,各个行业都在不断地数字化和智能化。在这个过程中,大数据技术成为了许多行业的重要支撑。而随着大数据技术的普及,行业分类和设备装置的不断更新换代,弹性伸缩成为了一个不可避免的问题。本文将介绍基于服务发现和容器技术的大数据平台弹

    2024年02月06日
    浏览(45)
  • 毕业设计-基于协同过滤算法的电商平台推荐系统

    目录 前言 课题背景和意义 实现技术思路 一、文献综述 二、基于用户协同过滤推荐系统算法 三、实证分析 四、总结 实现效果图样例 最后     📅大四是整个大学期间最忙碌的时光,一边要忙着备考或实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。近几

    2024年02月08日
    浏览(49)
  • 基于微信小程序的农产品电商平台精准营销模式创新研究

    目 前在农产品销售过程出现一个非常严重的问题─滞销, 我们时不时的能在新闻报道看到某地区农产品大量上市却少有客商前来收购, 甚至一度出现大量新鲜的农产品烂在地头无人问津, 被当作垃圾一样扔掉。 客商在收购农产品过程中, 将产品的收购价格压的极低, 随着

    2024年02月10日
    浏览(65)
  • ssm基于微信小程序的二手电商平台设计与实现(程序+开题)

    本系统(程序 + 源码)带文档 lw 万字以上 文末可获取一份本项目的 java 源码和数据库参考。 研究背景: 随着互联网的普及和电子商务的快速发展,二手交易市场也逐渐兴起。然而,传统的二手交易平台存在着信息不对称、交易安全性低等问题,给买卖双方带来了困扰。因此

    2024年01月16日
    浏览(46)
  • 基于SpringBoot+Dubbo构建的电商平台-微服务架构、商城、电商、微服务、高并发、kafka、Elasticsearc+源代码+文档说明

    项目基于springboot2.1.6.RELEASE+Dubbo2.7.3 来构建微服务。 业务模块划分,尽量贴合互联网公司的架构体系。所以,除了业务本身的复杂度不是很高之外,整体的架构基本和实际架构相差无几。 但实际上,真实的生产级的项目由于用户量以及业务的复杂度,会变得非常复杂。 所以

    2024年02月20日
    浏览(50)
  • 基于Java+SpringBoot+Vue前后端分离农产品电商平台设计和实现

    博主介绍 : ✌ 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流 ✌ 主要内容: SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、P

    2024年02月20日
    浏览(47)
  • 【附源码】基于flask框架基于微信小程序的二手电商平台设计与实现 (python+mysql+论文)

    本系统(程序 + 源码)带文档 lw 万字以上   文末可获取本课题的源码和程序 选题背景: 随着互联网的高速发展,电子商务已经成为人们生活中不可或缺的一部分。特别是近年来,微信小程序以其便捷性和高效性,迅速在电商领域崭露头角。然而,尽管电商平台如雨后春笋般

    2024年04月13日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包