SAP 电商云 Spartacus UI 的 External Routes 设计明细

简介: SAP 电商云 Spartacus UI 的 External Routes 设计明细

作为单页应用程序 (SPA),Spartacus 使用 Angular routerLink 指令,根据设计,该指令不会从后端的 Web 服务器中加载新的页面。 因此,Spartacus 通常只允许用户在应用程序本身内导航。 换句话说,Spartacus 通常只加载单页应用程序中的视图。


但是,如果您要从传统店面系统(例如 SAP Commerce Accelerator)逐步(和逐个路由)迁移到 Spartacus,则 Spartacus 中的外部路由功能允许您使用不同的系统来驱动不同的部分。 使用外部路由,开发人员可以指定从后端加载哪些路由,甚至可以将路由重定向到不同的域。


要使用 Spartacus 和另一个系统在同一个域中运行店面,您需要定义 URL 模式以区分两个店面系统。 这些模式应该应用于后端服务器、Spartacus 配置和 Angular Service Worker(启用 PWA 时)。


模式应按如下方式应用:


  • 访问深层链接时,后端服务器应提供 Spartacus 视图,或者应提供来自其他店面系统的页面。


  • 当使用 Angular routerLink 进行导航时,Spartacus 应该激活一个 SPA 路由,或者它应该从后端完全加载页面。


  • 启用 PWA 后,Angular Service Worker 会拦截导航请求。 当完全加载(或重新加载)页面时,Service Worker 应该返回缓存的单页应用程序的 index.html,或者 Service Worker 应该绕过缓存,以便后端可以服务该页面。


您可以通过导入 ConfigModule.withConfig() 为内部路由提供带有 URL 模式的配置。


URL 模式使用有限的 glob 格式,如下所示:


  • ** 匹配 0 个或多个路径段


  • * 匹配 0 个或多个字符,不包括 /


  • ? 只匹配一个字符,不包括 /


  • ! 是将模式标记为负数的前缀,这意味着仅包含与模式不匹配的 URL


例子


在以下示例中,SPA 中仅呈现主页、购物车和产品详细信息页面,所有其他 URL 均从后端加载:





SAP Spartacus External Route 测试项目明细


Spartacus project 文件夹下新建一个 proxy.conf.json 文件:



然后在 angular.json 里进行引用:



代码备份:


 "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "storefrontapp:build",
            "proxyConfig": "projects/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "storefrontapp:build:production"
            },
            "development": {
              "browserTarget": "storefrontapp:build:development"
            }
          },
          "defaultConfiguration": "development"
        },


http://localhost:4000/electronics-spa/en/USD/cart


在我本地 Wechat 工程的 dummy.js 文件里,服务这个 3000 端口:





相关文章
|
27天前
|
网络架构 开发者 UED
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
10 0
Spartacus 2211 的 provideOutlet 方法扩展 UI
|
4月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
40 0
|
7月前
|
JSON 前端开发 API
SAP Spartacus UI 中的 CmsTicketInterceptor
SAP Spartacus UI 中的 CmsTicketInterceptor
39 0
|
7月前
|
Web App开发 JavaScript Java
SAP 电商云 Spartacus UI External Route 的模块实现概述
SAP 电商云 Spartacus UI External Route 的模块实现概述
54 0
|
7月前
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试(二)
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试
33 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
29 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
31 0
|
2月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
2月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0

热门文章

最新文章