目前电商畛域有两款比拟闻名的开源电商网站解决方案，别离是基于 Angular 开发框架，代号为 Spartacus 的开源我的项目，以及基于 Vue 的 Vue Storefront.

作为 Spartacus 开源我的项目的开发成员之一，明天我想通过本文，给大家介绍一下咱们平时购物时最常应用到的性能之一，增加产品到购物车的技术实现。

即便没有多少 Angular 开发教训的前端程序员，浏览本文之后，也能对 Spartacus 电商网站增加商品到购物车的性能实现，有一个最根底的理解。

咱们将 Github 上 Spartacus 代码仓库的代码克隆到本地并运行后，通过 https://localhost:4299 能够拜访电商页面的 UI：

能够看到此时右上角红色的购物车图标显示的数字为 0，意思是以后用户 Jerry Wang，还没有增加任意的商品到购物车里。

咱们轻易在店铺上抉择一台电子设备，进入商品明细页面，点击 Add To Cart，将其增加到购物车：

能够在上图产品明细页面的 url 里，找到其产品编号为 1377492.

点击了 Add To Cart 后，在 Chrome 开发者工具 network 标签页里察看到一个 HTTP POST 申请：

上图展现的该 POST 申请的负载里，蕴含 ID 为 1377492 的产品信息。这个 HTTP POST 申请调用购物车更新的 Restful API , 将客户选中的产品增加到购物车里。

该申请响应字段的 statusCode 为 success，如下图所示，阐明 API 调用胜利。

增加胜利的购物车界面一览：

店铺管理员能够登录电商后盾治理页面，依据购物车编号 2357 查到我刚刚增加了商品的购物车：

上面介绍 Add To Cart 按钮的前端实现细节。

应用 Chrome 开发者工具，很快就能找到这个按钮所在的 Angular Component 的 selector：cx-add-to-cart

进而找到该 Component 的实现：

从上图代码第 21 行能够看出，Add To Cart 按钮自身的显示条件，是这个产品必须有库存。当客户输出的购买个数小于等于 0，或者大于最大库存数时，该按钮会被禁用。

点击该 button 之后，执行什么逻辑呢？第 23 行该 button 元素的类型 type 字段的值为 submit，而这个 button 标签，包裹在一个 form 标签内。

咱们到该 Component 对应的模板文件头部查看，发现了 submit 事件的处理函数为 addToCart：

在 addToCart 外部，增加商品到购物车的执行逻辑，投递到了该 Component 注入的服务类，ActiveCartService 的 addEntry 办法。

最终，咱们应用 NgRx 状态治理框架，将增加购物车这个动作，形象成一个名为 CartActions.CartAddEntry 的 Action 类，并通过 NgRx Store 的 dispatch 办法投递。

依据 NgRx 的架构图，这些投递出的 Action，最终会被 Effects 接管，后者会调用 Restful API 同后盾服务器通信。

下图就是负责接管 CartActions.CartAddEntry 的 Effects 实现，后者又会将这个增加购物车申请，投递给 CartEntryConnector.

Spartacus 与后盾服务器的交互设计如下图所示：

Connector 会把增加购物车的申请转发给 Adapter(即下图第 18 行的 this.adapter), 由后者调用 HTTP Restful API.

然而，这个 CartEntryAdapter 自身和其 add 办法，后面都加上了 abstract 关键字，那么具体的实现到底在哪里呢？

在对应的 NgModule 定义里能找到答案：OccCartEntryAdapter 实现了这个 abstract class.

最终，咱们在 OccCartEntryAdapter 的实现代码里，发现这个类，从配置信息里读取并生成后盾对应的购物车更新的 API endpoint，而后应用注入的 HttpClient 的 post 办法 (下图第 35 行代码)，依据生成的 endpoint 调用这个 API，最终实现购物车更新操作。

总结

本文通过一个最罕用的增加商品到购物车的例子，剖析了 Spartacus 这款开源电商店铺利用解决方案前端通过 Restful API 调用的形式同后端交互的原理。

欢送大家拜访 Spartacus 我的项目的 Github 主页, 试用这个利用，并提出您的宝贵意见。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: