Spartacus是SAP Commerce云产品的一个基于Angular的店面。对后端商务云的调用是通过OCC（REST）进行的。Spartacus也是一个单页应用程序（SPA）、渐进式Web应用程序（PWA）。Spartacus具有匿名同意、辅助服务模块、取消和退货、寄售跟踪、优惠券、I18n、心愿单等多种功能，Spartacus以库的形式发布，每两周发布一次。
商务云解决方案的系统景观由多个系统组成，通常在不同的应用程序层上进行编排，消费返利新模式，包括前端。Spartacus默认连接到SAP Commerce Cloud API，底层框架可以使用所谓的"连接器"与其他系统协同工作。下图描述了Spartacus的广泛架构：
Spartacus架构
如上所示有4个主要层：
UI组件：Spartacus使用Angular。在Angular中，UI在逻辑上被组织成许多UI组件。UI组件观察facade层提供的数据。Façade：顾名思义，Façade层的主要目的是隐藏底层内存数据存储的复杂性。NgRx（内存存储）：NgRx是UI"状态管理"工具。这对于Spartacus这样的复杂UI框架非常有用。连接器：这被称为NgRx商店的"效果"，行业大数据分析，与后端SAP Commerce云系统进行交互。连接器将控制委托给适配器，然后适配器调用转换器。适配器：适配器层负责向源系统加载和提交数据。转换器：用于将数据从后端转换到UI，反之亦然。有两种类型：规范化：将数据从后端转换为UI。序列化：将数据从UI转换到后端。
让我们以一个示例需求为例，在框架中进行一些新的特性开发。在店面中，"我的帐户->付款详细信息"，帐单地址应以红色矩形突出显示。这个地址是在购物车结账时设置的。
现在我们如何从技术上实现这一点？如上所述，Spartacus是使用Angular框架构建的，在这个框架中您有UI组件。因此，云服务器租用，我们必须为支付组件找到合适的组件。
1.相关组件是"projects/storefrontlib/src/shared/components/card"/卡片.component.ts". 因为我们需要关于卡的附加信息，让我们使用在接口"card"中创建一个名为"additionalInfo"的"Array"：
导出接口卡{
头？：string；
标题？：string；
textBold？：string；
文本？：数组；
img？：string；
动作？：Array；
删除消息？：string；
附加信息？：数组；
}
2。现在，我们有一个占位符来显示帐单地址。但这只有在UI组件的HTML呈现时才可见。即"projects/storefrontlib/src/shared/components/card"/卡片.component.html". "自从"卡.附加信息是"Array"，我们必须循环每个项目以显示其全部内容：
{line}}
3.最后一步是填充帐单地址。这必须在另一个组件"projects/storefrontlib/src/cms components/myaccount/payment methods/payment"中完成-方法.component.ts". 如果您观察组件的HTML（付款-方法.component.html)，人们会注意到组件的（付款-方法.component.ts)调用"getCardContent"方法来显示卡的内容。因此，我们必须在"getCardContent"方法中插入显示计费地址的逻辑。在此之前，让我们创建一个新方法"getAdditionalInfo"，用于获取和格式化卡的计费地址：
getAdditionalInfo（billingAddress:address）：string[]{
return[
//Title，First Name，Last Name
(帐单地址.title? 帐单地址.title：NIL）+
空格+
billingAddress.firstName名称+
空间+
帐单地址.lastName，
//地址–第1行和第2行
帐单地址行1+
空间+
(帐单地址.line2? 帐单地址.line2：无），淘客联盟，
//城镇，国家
帐单地址.town+
空间+
(帐单地址.country.name? 帐单地址.country.name：无），
//邮政编码
帐单地址.邮政编码，
]；
}
现在调用方法"getCardContent"中的方法"getAdditionalInfo"，其中设置了"Card"组件：
additionalInfo:此.getAdditionalInfo（计费地址）
这样，服务器云平台，我们就可以在"我的账户->付款明细"中看到计费地址。
