介绍一个开源电商网站Vue的VueStorefront的购物车添加功能的实现。作为Spartacus开源项目的开发成员之一，今天通过本文向大家介绍一下我们平时购物时最常用的功能之一，将商品添加到购物车的技术实现。即使是没有太多Angular开发经验的前端程序员，在阅读本文后也能对Spartacus电商网站的购物车添加商品功能有一个基本的了解。我们将Github上的Spartacus代码仓库的代码clone到本地并运行后，我们可以通过https://localhost:4299访问电商页面的UI：可以看到红色shopping显示的数字右上角的购物车图标为0，表示当前用户JerryWang还没有添加任何商品到购物车。我们在店内随机挑选一款电子设备，进入商品详情页，点击AddToCart，将其加入购物车：在上图中商品详情页的url中可以找到它的商品编号1377492。点击AddToAfterCart，在Chrome开发者工具的网络选项卡中观察到一个HTTPPOST请求：上图POST请求的payload中包含ID为1377492的商品信息，这个HTTPPOST请求调用购物车更新RestfulAPI，用于将客户选择的产品添加到购物车。请求响应字段的statusCode为success，如下图，表示API调用成功。添加成功的购物车界面列表：店铺管理员可以登录电商后台管理页面，根据购物车编号找到我刚刚添加的商品的购物车2357：前端实现详解添加到购物车按钮介绍如下。使用Chrome开发者工具，可以快速找到按钮所在的Angular组件的选择器：cx-add-to-cart，然后找到该组件的实现：从上面代码第21行可以看出，AddToCart按钮本身显示的条件是该商品必须有货。当客户输入的采购数量小于等于0，或大于最大库存数量时，该按钮将被禁用。点击按钮后，执行了什么逻辑？在第23行，button元素的type字段的值为submit，button标签包裹在一个form标签中。我们查看了该Component对应的模板文件头部，发现提交事件处理函数为addToCart：在addToCart内部，将添加商品到购物车的执行逻辑交付给该Component注入的服务类，ActiveCartService的addEntry方法。最后，我们利用NgRx的状态管理框架，将添加购物车的动作抽象为一个名为CartActions.CartAddEntry的Action类，通过NgRxStore的dispatch方法进行下发。根据NgRx的架构图，这些传递的Action最终会被Effects接收，Effects会调用RestfulAPI与后台服务器通信。下图是负责接收CartActions.CartAddEntry的Effects实现，后者将添加购物车的请求传递给CartEntryConnector.Spartacus与后台服务器的交互设计如下图：Connector将请求转发到在Adapter中添加购物车（即下图中第18行的this.adapter），后者调用HTTPRestfulAPI。但是CartEntryAdapter本身和它的add方法前面都有abstract关键字，那么具体实现在哪里呢？答案可以在对应的NgModule定义中找到：OccCartEntryAdapter实现了这个抽象类。最后我们在OccCartEntryAdapter的实现代码中找到这个类，从配置信息中读取并在后台生成对应的购物车更新API端点，然后使用注入的HttpClient的post方法（图中第35行代码）下面），根据生成的endpoint调用该接口，最终完成购物车更新操作。总结本文通过最常用的将产品添加到购物车的例子之一，分析了开源电子商务商店应用解决方案Spartacus的原理，其中前端通过RestfulAPI调用与后端进行交互。欢迎大家访问Spartacus项目的Github主页，试用该应用程序并提供您的反馈。更多Jerry原创文章在这里：《王子熙》：
