SAP Spartacus 命名的由来
SAP Commerce Cloud是SAP一款電商解決方案,而Storefront這個術語,指的是該解決方案的前臺店鋪界面。一句話概括Spartacus,它是基于現代Web開發技術和框架打造而成的一款新的SAP Commerce Cloud Storefront. 何謂現代?Spartacus 1.0版發布于2019年7月,因此相比前一代基于Accelerator技術的Storefront來說,Spartacus具有得天獨厚的優勢,能夠采取比較成熟和現代的前端技術來開發。
Spartacus四大特性之一:單頁面應用single page Application,這也是Spartacus命名的由來。單頁面應用,是由一個外殼html頁面和多個包含具體業務邏輯的頁面片段組成。Commerce傳統Storefront基于JSP實現,JSP是一種服務器端渲染技術,頁面代碼在Commerce服務器端完成。而單頁面應用是一種富客戶端技術,頁面片段渲染以及頁面路由放在客戶端完成,這樣減輕了Commerce服務器的負載。當單頁面應用的界面內容發生變化時,不需要重新加載整個外殼html頁面,而僅僅需要更新相關的頁面片段,這樣較多頁面應用相比,頁面之間的切換更加流暢,用戶體驗更好。
下圖就是SAP Spartacus的shell html頁面:
實現源代碼:
<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="icon" type="image/x-icon" href="favicon.ico" /><link rel="manifest" href="manifest.json" /><meta charset="utf-8" /><meta name="mobile-web-app-capable" content="yes" /><meta name="apple-touch-fullscreen" content="yes" /><meta name="apple-mobile-web-app-title" content="Spartacus" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="default" /><linkrel="apple-touch-icon"sizes="192x192"href="assets/icons/icon-192x192.png"/><linkhref="assets/splash/iphone5_splash.png"media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/iphone6_splash.png"media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/iphoneplus_splash.png"media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/iphonex_splash.png"media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/iphonexr_splash.png"media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/iphonexsmax_splash.png"media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/ipad_splash.png"media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/ipadpro1_splash.png"media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/ipadpro3_splash.png"media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"rel="apple-touch-startup-image"/><linkhref="assets/splash/ipadpro2_splash.png"media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"rel="apple-touch-startup-image"/><meta name="occ-backend-base-url" content="OCC_BACKEND_BASE_URL_VALUE" /><metaname="media-backend-base-url"content="MEDIA_BACKEND_BASE_URL_VALUE"/><title>Spartacus Storefront</title><base href="/" /><scriptid="smartedit-injector"src="webApplicationInjector.js"data-smartedit-allow-origin="localhost:9002"></script></head><body><cx-storefront>Loading...</cx-storefront></body> </html>其中body標簽的自定義標簽cx-storefront, 運行時會被Spartacus Storefront庫里的實現填充:
更多Jerry的原創文章,盡在:“汪子熙”:
總結
以上是生活随笔為你收集整理的SAP Spartacus 命名的由来的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SAP Spartacus的PWA支持
- 下一篇: SAP Hybris Accelerat