當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一个用于SAP UI5学习的脚手架应用，没有任何后台API的依赖

發布時間：2023/12/19 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了一个用于SAP UI5学习的脚手架应用，没有任何后台API的依赖小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Jerry的系列通過最簡單的button控件，深入學習SAP UI5框架代碼系列之零里面曾經提到，我們會使用單步調試的方式，來學習SAP UI5框架的部分源代碼實現。

如果找一個現成的SAP UI5應用來調試，勢必會增加我們調試的復雜度，所以對于這類調試任務，Jerry最喜歡的方式就是首先搭建一個小的腳手架應用(即很多英文的前端開發博客里提到的scaffold)，隔離所有不必要的依賴，只包含了待調試的最小范圍的特性(mini scope).

以本系列為例，自始至終我們使用的SAP UI5應用，只包含一個最簡單的button控件。

Jerry已經準備好了這樣一個應用，放在我的github上，大家可以下載或者clone到本地。

進入項目文件夾下，首先運行命令行npm install, 然后執行node local.js(當然，你需要首先安裝npm和nodejs).

看到Example app listens on port 3000后，瀏覽器輸入localhost:3000/wt即可看到僅包含了一個button控件的SAP UI5頁面：

可以用任何文本編輯器打開這個文件夾，該頁面的源代碼在walkthrough子文件夾的index.html里：

上圖高亮部分的源代碼，即SAP UI5 button控件的創建代碼，可以直接從下面SAP UI5官網上拷貝獲得：

https://sapui5.hana.ondemand.com/1.32.11/#test-resources/sap/ui/commons/demokit/Button.html

(Jerry寫這個英文系列時用的button來自sap.ui.commons命名空間，在最新版本的UI5里面已經depreciated了，SAP推薦使用sap.m命名空間下的新button控件)

瀏覽器里輸入另一個url：

http://localhost:3000/ui5/

能看到一個典型的Fiori Master-Detail風格的應用，左邊的Master List里顯示服務訂單列表，任意點擊一個，在屏幕右邊能看到該訂單的明細頁面。

該應用也展示了Master List里的搜索，以及根據選中的服務訂單字段(Amount,State)進行聚合的功能，以及SAP UI5的頁面跳轉功能實現。

最重要的是，這個腳手架應用沒有引入任何后臺API的依賴。

這個Master-Detail的應用實現在webapp文件夾下。在webapp文件夾下的Component.js里，能看到直接使用了本地存儲的json文件作為model的數據源：

這個腳手架應用基于nodejs，可以用命令cf push上傳到SAP云平臺的CloudFoundry環境，或者直接將整個文件夾拷貝到阿里云/騰訊云這類虛擬主機上，然后直接執行命令行node local.js啟動應用。

具體步驟在我之前的文章如何在阿里云上運行SAP UI5應用里有介紹。

本系列的所有文章，都會使用本文介紹的腳手架應用來調試SAP UI5的框架代碼。感謝閱讀。

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

以上是生活随笔為你收集整理的一个用于SAP UI5学习的脚手架应用，没有任何后台API的依赖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。