【推荐】Github上获star最多的8个电商开源项目

于 2024-09-04 11:27:55 发布
阅读量7.9k 收藏 13
点赞数 1
文章标签： github 开源
原文链接：https://zhuanlan.zhihu.com/p/508784376
版权
电商开发一直是网站开发中一个重要的组成部分，诸如淘宝、京东、拼多多等电商平台就价值百亿，更别说各大主流品牌都需要自己的电商商城。
除了这种大型电商以外，小微企业乃至个人，对电商系统的需求也是十分强烈的，在主流的IT外包网站上，最多看到的就是电商开发需求；
今天，老K从github上整理了8个比较优秀的电商框架，涵盖了几乎所有主流编程语言，一起来看看吧！

1. mall

地址: https://github.com/macrozheng/mall

  • star: 57400
  • watch: 2200
  • fork: 24400
一套基于 SpringBoot MyBatis 电子商务系统包括前台商场系统和 后台管理系统。完整的功能是学习和实践电子商务的好项目。项目结构： 
mall
├── mall-common -- 工具类及通用代码
├── mall-mbg -- MyBatisGenerator 生成的数据库操作代码
├── mall-admin -- 后台商城管理系统接口
├── mall-search -- 基于 Elasticsearch 的商品搜索系统
├── mall-portal -- 前台商城系统接口
└── mall-demo -- 框架搭建时的测试代码

2. saleor

地址: https://github.com/saleor/saleor

  • star: 15600
  • watch: 385
  • fork: 4500
用 Python 开发的 电子商务平台。Django GraphQL API React 建设，支持移动终端、订单、商品、用户管理等。在线体验

3. spree

地址: https://github.com/spree/spree

  • star: 11800
  • watch: 73
  • fork: 4900
基于 Ruby on Rails 实现了大而完整的电子商城 开源项目。工程结构清晰：> spree_api：REST API 接口> spree_frontend：移动优先，可定制的商店> spree_backend：功能丰富的管理面板> spree_cmd：开发人员的命令行工具> spree_core：数据层、服务和电子邮件

4. newbee-mall

地址: https://github.com/newbee-ltd/newbee-mall

  • star: 8700
  • watch: 219
  • fork: 2300
一基于 Spring Boot 2.X 及相关技术堆栈开发电子商务系统。包括商场系统和商场背景管理系统，支持商场的共同功能。项目代码开源，功能齐全，流程齐全，对新手开发者非常友好，只需要很短的时间就可以启动这个完整的商场项目。这是一个完整的 电子商务项目，也推荐 Java 开发人员学习或为项目贡献代码

5. nopCommerce

地址: https://github.com/nopSolutions/nopCommerce

  • star: 7100
  • watch: 634
  • fork: 4100
免费开源的  http://ASP.NET 电子商城平台。该项目始于 2008 年，由专业团队开发和维护。Windows、Linux、macOS 平台还支持 开箱即用 Docker 部署方式

6. PrestaShop

地址: https://github.com/PrestaShop/PrestaShop

  • star: 6400
  • watch: 471
  • fork: 4400
PHP 开源电子商务平台。功能齐全，部署方便，适应移动终端。虽然前端支持高度自定义，但现成的前端模板需要付费

7. CRMEB

地址: https://github.com/crmeb/CRMEB

  • star: 3600
  • watch: 123
  • fork: 1000
基于 ThinkPhp5.0 Vue EasyWeChat 开发一套开源、免费的新零售商城系统(客户关系管理 营销电商系统)。可以帮助企业基于微信微信官方账号、 小程序、PC、APP 实现会员管理、数据分析、精准营销的 电子商务管理系统。满足新零售、预约、O2O、多店等各种业务需求，无论如何都是功能强大、适合各种场景的商场系统

8. newbee-mall-vue3-app

地址: https://github.com/newbee-ltd/newbee-mall-vue3-app

  • star: 3500
  • watch: 57
  • fork: 922
基于 Vue 3.0 技术堆栈电子商务网站前端开源项目。虽然麻雀很小，但它有所有的内脏，包括模块：主页、类型分类、搜索、地址管理、登录注册等，基本上都涉及到。对新手友好，熟悉 Vue 3.x 的朋友也可以来看看

博客
《Pinia实战》10.手册
04-25 315
手册。
博客
《Pinia实战》9.服务端渲染 (SSR)
04-25 670
你可以根据你的需要使用 @nuxt/devalue 的其他替代品，例如，你也可以用 JSON.stringify()/JSON.parse() 来序列化和解析你的 state，这样你可以把性能提高很多。默认情况下，@pinia/nuxt 会暴露一个自动引入的方法：usePinia()，它类似于 getActivePinia()，但在 Nuxt 中效果更好。Pinia 会将自己作为 $pinia 添加到你的应用中，所以你可以在 serverPrefetch() 等函数中使用它。
博客
《Pinia实战》8.核心概念 更真实的示例
04-25 472
这是一个更完整的 Pinia API 示例，在 JavaScript 中也使用了类型提示。对于某些开发者来说，可能足以在不进一步阅读的情况下直接开始阅读本节内容，但我们仍然建议你先继续阅读文档的其余部分，甚至跳过此示例，在阅读完所有核心概念之后再回来。// 接受任何数量的参数，返回一个 Promise 或不返回。// 调用其他带有自动补全的 getters ✨。// 类型将自动推断为 number。// 你可以直接变更该状态。
博客
《Pinia实战》7.核心概念 组件外的 Store
04-25 503
Pinia store 依靠 pinia 实例在所有调用中共享同一个 store 实例。实际上，useStore() 给你的 app 自动注入了 pinia 实例。这意味着，如果 pinia 实例不能自动注入，你必须手动提供给 useStore() 函数。为确保 pinia 实例被激活，最简单的方法就是将 useStore() 的调用放在 pinia 安装后才会执行的函数中。// ✅ 这样做是可行的，因为路由器是在其被安装之后开始导航的，// ❌ 失败，因为它是在创建 pinia 之前被调用的。
博客
《Pinia实战》6.核心概念 插件
04-25 603
当添加新的 state 属性(包括 store 和 store.$state )时，你需要将类型添加到 PiniaCustomStateProperties 中。注意上面的例子使用的是 TypeScript。需要注意的是，在一个插件中， state 变更或添加(包括调用 store.$patch())都是发生在 store 被激活之前，因此不会触发任何订阅函数。值得注意的是，每个 store 都被 reactive包装过，所以可以自动解包任何它所包含的 Ref(ref()、computed()...)。
博客
《Pinia实战》5.核心概念 Action
04-25 558
默认情况下，action 订阅器会被绑定到添加它们的组件上(如果 store 在组件的 setup() 内)。类似 getter，action 也可通过 this 访问整个 store 实例，并支持完整的类型标注(以及自动补全✨)。不同的是，action 可以是异步的，你可以在它们里面 await 调用任何 API，以及其他 action！Action 相当于组件中的 method。如果你不喜欢使用组合式 API，你也可以使用 mapActions() 辅助函数将 action 属性映射为你组件中的方法。
博客
《Pinia实战》4.核心概念 Getter
04-25 994
因此，即使在使用常规函数定义 getter 时，我们也可以通过 this 访问到整个 store 实例，但(在 TypeScript 中)必须定义返回类型。这是为了避免 TypeScript 的已知缺陷，不过这不影响用箭头函数定义的 getter，也不会影响不使用 this 的 getter。它们只是一个被你调用的函数。// 你可以在 JavaScript 中使用 JSDoc (https://jsdoc.app/tags-returns.html)// 你也可以写一个函数来获得对 store 的访问权。
博客
《Pinia实战》3.核心概念 State
04-25 1180
如果你使用的是 Vue 2，你在 state 中创建的数据与 Vue 实例中的 data 遵循同样的规则，即 state 对象必须是清晰的，当你想向其添加新属性时，你需要调用 Vue.set()。对于像数组这样的集合，你并不一定需要使用 mapWritableState()，mapState() 也允许你调用集合上的方法，除非你想用 cartItems = [] 替换整个数组。但是，你可以 patch 它。如果你愿意，你可以用一个接口定义 state，并添加 state() 的返回值的类型。
博客
《Pinia实战》2.核心概念 定义 Store
04-25 1218
你可以定义任意多的 store，但为了让使用 pinia 的益处最大化 (比如允许构建工具自动进行代码分割以及 TypeScript 推断)，你应该在不同的文件中去定义 store。你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
博客
《Pinia实战》1. 介绍
04-25 825
我基于自己开发应用的经验，同时通过阅读其他人的代码，为使用 Pinia 的用户工作，以及在 Discord 上回答问题等方式验证了一些想法。与 Vuex 相比，Pinia 不仅提供了一个更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。现在 Pinia 已经成为推荐的状态管理解决方案，它和 Vue 生态系统中的其他核心库一样，都要经过 RFC 流程，它的 API 也已经进入稳定状态。Pinia 的官方课程是。
博客
《Vue Router实战教程》23.动态路由
04-11 537
它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。上面的例子有两个假设：第一，新添加的路由记录将与 to 位置相匹配，实际上导致与我们试图访问的位置不同。而在实际场景中，添加路由的行为更有可能发生在导航守卫之外，例如，当一个视图组件挂载时，它会注册新的路由。
博客
《Vue Router实战教程》22.导航故障
04-11 597
如果导航被阻止，导致用户停留在同一个页面上，由 router.push 返回的 Promise 的解析值将是 Navigation Failure。正如我们在一开始所说的，有不同的情况会导致导航的中止，所有这些情况都会导致不同的 Navigation Failure。Navigation Failure 是带有一些额外属性的 Error 实例，这些属性为我们提供了足够的信息，让我们知道哪些导航被阻止了以及为什么被阻止了。当在导航守卫中返回一个新的位置时，我们会触发一个新的导航，覆盖正在进行的导航。
博客
《Vue Router实战教程》21.扩展 RouterLink
04-11 593
RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// 如果使用 TypeScript，请添加 @ts-ignore。
博客
《Vue Router实战教程》20.路由懒加载
04-11 759
component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。如果你使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 正确地解析语法。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。// 或在路由定义里直接使用它。
博客
《Vue Router实战教程》19.滚动行为
04-11 757
要做到这一点，你可以返回一个 Promise，它可以返回所需的位置描述符。使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。我们可以将其与页面级过渡组件的事件挂钩，以使滚动行为与你的页面过渡很好地结合起来，但由于使用场景可能存在的差异和复杂性，我们只是提供了这个基础来实现特定的用户场景。如果返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动。// 始终滚动到顶部。
博客
《Vue Router实战教程》18.过渡动效
04-11 624
上面的用法会对所有的路由使用相同的过渡。Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡。幸运的是，可以添加一个 key 属性来强制过渡。我们可以添加一个 after navigation hook，根据路径的深度动态添加信息到 meta 字段。也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。-- 使用任何自定义过渡和回退到 `fade` -->Transition 的 API 在这里同样适用。-- 使用动态过渡名称 -->
博客
《Vue Router实战教程》17.命名路由
04-11 466
当在处理 KeepAlive 组件时，我们通常想要保持路由组件活跃，而不是 RouterView 本身。实践中通常不会这么做，因为这样会导致所有路由组件都使用相同的 props 和插槽。请查阅传递 props 给路由组件获取其他传递 props 的方式。而如果我们将引用放在 <router-view> 上，那引用将会被 RouterView 的实例填充，而不是路由组件本身。上面的代码等价于不带插槽的 <router-view />，但是当我们想要获得其他功能时，插槽提供了额外的扩展性。
博客
《Vue Router实战教程》16.组合式 API
04-11 926
请注意，在模板中我们仍然可以访问 $router 和 $route，所以如果你只在模板中使用这些对象的话，是不需要 useRouter 或 useRoute 的。Vue 的组合式 API 的引入开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。组合式 API 守卫也可以用在任何由 <router-view> 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。// 用在链接里的 href。// 导航至该链接的函数。
博客
《Vue Router实战教程》15.数据获取
04-11 740
当你使用这种方式时，我们会马上导航和渲染组件，然后在组件中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。// 用获取数据的工具函数 / API 包裹器替换 `getPost`// 用获取数据的工具函数 / API 包裹器替换 `getPost`// 侦听路由的参数，以便再次获取数据。// 侦听路由的参数，以便再次获取数据。
博客
《Vue Router实战教程》14.路由元信息
04-11 971
我们需要遍历这个数组来检查路由记录中的 meta 字段，但是 Vue Router 还为你提供了一个 route.meta 方法，它是一个非递归合并所有 meta 字段（从父字段到子字段）的方法。这意味着你可以简单地写。例如，根据上面的路由配置，/posts/new 这个 URL 将会匹配父路由记录 (path: '/posts') 以及子路由记录 (path: 'new')。// 这段可以直接添加到你的任何 `.ts` 文件中，例如 `router.ts`// 也可以添加到一个 `.d.ts` 文件中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值