这是Jerry在2021年的第55篇文章，也是王子熙的第332篇原创文章公众号。下图是SAPCommerceCloud（电商云）UI加载默认SampleData数据集后打开的首页。这是一个基于SAPSpartacus开源项目构建的电子设备在线购物店面。本文介绍一个实际的客户案例。Jerry之前在SAP产品UISEO-SearchEngineOptimization的文章中提到过，下图中的网站是乐高使用SAPSpartacusRegion成功开发并推出的一个在线购物店面（阿联酋）：你能说出两者的区别吗两个基于视觉效果的网站，其实是基于同一个UI框架开发的吗？这也再次体现了SAPCommerceCloudUIheadless电商即HeadlessCommerce的架构。前端电商店面与SAPCommerceCloud后端核心功能完全解耦，两者通过API交互。这样，购买了SAPCommerceCloud的客户就可以利用CommerceCloud提供的OCCAPI，以及开源的SAPSpartacus框架，通过二次开发，搭建一个独一无二的体现企业品牌魅力的电商店面。Jerry是一名开发人员而不是用户体验工程师，所以他无法从乐高店面的设计风格的角度与大家分享一些干货。他只能从SAPCommerceCloudUI细节的二次开发层面来介绍店面背后的一些实现。打开Chrome开发者工具，根据Elements面板的app-root和cx-storefront元素，马上可以看出store界面是基于SAPSpartacus（Angular版本号8.2.13）开发的，而不是传统的JSP加速器。关于这两种开发电商店铺技术的区别，在Jerry的文章Jerry在2020SAP全球技术大会上的分享：SAPSpartacus技术介绍的文字版中有介绍。上图红色区域为app-root的子节点，包括cx-storefront和后代节点。但是我们在chrome开发者工具网观察发现，在服务端返回给浏览器的初始页面中，app-root节点是空的，这说明我现在的访问场景是客户端渲染，也就是浏览器收到服务器发送的网页，其中只包含一个空的app-root节点，然后浏览器执行Angular框架代码渲染完整的页面源代码。在服务器端渲染场景下，节点app-root的内容在服务器端生成，然后返回给浏览器。对比下图服务端渲染场景，浏览器从服务端接收到的网页源码中，app-root节点中的内容已经被完整渲染：两种渲染方式各有优缺点和应用场合。在Jerry的文章SAPUI渲染模式：客户端渲染VS服务端渲染中有详细的介绍。在头节点下，有一个重要的元元素，用于维护店铺与SAPCommerceCloud后台交互的细节。名称为occ-backend-base-url，值为APIEndpoint。因此，当我们在浏览器中打开Lego购物网站时，可以在Chrome开发者工具中观察到对APIEndpoint的HTTP调用。此API调用询问CommerceCloud应在当前页面（ID为主页）上显示哪些内容插槽和组件。关于SAPCommerceCloudUI页面布局的内容槽和组件，之前Jerry的文章讲过SAP产品UI开发中组件的概念。SAPCommerceCloud的内容管理员（ContentManagementSystemAdministrator）在BackofficeCMS控制台中定义了哪些ContentSlots应该显示在主页上，哪些组件应该显示在这些Slots中。这些内容信息在SAPCommerceCloud后台进行维护和存储，通过API暴露给CommerceCloud商店，根据这些信息在Angular层面渲染页面。下图中API调用的响应表明，乐高的主页也重用了SAPCommerceCloud的大部分标准内容槽，即Section1、Section2A、Section2B、Section2C等：仅仅从放置在这些标准槽中的组件名称就可以了可见乐高做了定制化开发。这些新组件以Lego前缀命名。如果想知道每个contentslot显示的是什么内容，可以在Chrome开发者工具中查看cx-page-slot节点下的内容：head区的其他meta元素也提供了对搜索引擎优化的支持。元数据信息。例如，在元描述的内容字段中维护出现在搜索引擎结果列表中的描述信息。SAPCommerceCloudUI对搜索引擎优化的支持，请参考Jerry的文章SAPproductUIsearchengineoptimizationSEO-SearchEngineOptimization。在乐高商店注册账号并登录后，在ChromeDeveloperTools中查看LocalStorage，发现仍然使用SAPSpartacus默认的基于OAuth2的用户认证和会话管理机制，在Jerry的文章SAPCommerce中有详细介绍云UI用户会话管理。点击店内任意一张乐高产品图片后，进入产品详情页面，复制页面url：https://lego.yellowblocks.me/...Jerry上一篇文章SAPCommerceCloud（电商云）)routing路由的自定义配置和开发引入了SAPCommerceCloudUI页面路由配置逻辑。虽然乐高商店使用的是构建后的生产版本，其中Angular代码中的类名和变量名被混淆为单个字母，但代码中的JSON对象名称和字段保持不变，因此我们仍然可以找到SAPSpartacus默认路由配置。在Chrome开发者工具中打开main.js代码块，里面是乐高斯巴达克斯项目二次开发项目搭建后生成的JavaScript代码。根据关键字routing搜索源码，找到Spartacus的默认路由配置。定位商品详情页的路由配置：product/:productCode/:name其中product是静态路径段，productCode和name相当于占位符，前面的冒号标识两者作为路由参数，会用到在运行时通过商品详情页填充商品型号的同名字段。当然，本文介绍的只是基于Spartacus的SAPCommerceCloudUI二次开发的冰山一角。希望大家对SAP电商云headless电商前后端分离的设计思路有一个直观的认识。如果你想系统地学习SAPSpartacus开发，可以从我们团队发布在Github上的帮助文档入手。谢谢阅读。https://sap.github.io/spartac...阅读更多SAPUI渲染模式：客户端渲染与服务器渲染关于SAP产品UISEO的SEO-搜索引擎优化SAPCommerceCloudUIUserSessionManagementSAPCommerceCloud（电子商务）的自定义配置和开发cloud)路由路径Jerry在2020SAP全球技术大会上的分享：SAPSpartacus技术介绍文字版从产品展示页谈Hybris独特的理念和设计结构从产品展示页谈Hybris系列2：DTO、Converter和PopulatorHybrisEnterpriseCommercePlatform服务层设计与实现从一个实际例子出发，谈谈SAPCommerceCloud（电商云）UI延迟加载功能SAPCRMFiori应用和SAPCommerceCloud（电商云）UI的UI定制开发如何调整CSS改变UI显示风格SAP产品有相同的UI增强思路，体现在SAPCommerceCloud（电商云）UI增强的实现构建SAPCommerceCloud的前端和后台运行环境（电子商务云）在数小时内本地化。响应式编程是SAP标准产品UI开发中的一种实践。SAPUI的加载动画效果与幽灵设计(GhostDesign)浅谈SAP产品的UI开发更多Jerry关于组件概念的原创文章可以看：《王子喜》：
