2019/09/11

DevExtreme DataGrid Demo with DataSnap Server 2/2

DataSnap 是 Delphi Enterprise 中極好用的 framework 之一!

隨著行動平台的使用人數提高,漸漸也就有了跨平台的需求。

商城上架費太貴、各平台開發的眉眉角角太多。



說白了就是想一套產品通吃各平台。

能滿足所有條件的只有 Web 了!

其實 Web 的水更深,箇中奧妙待日後細說。(笑)


上回提到 DataSnap REST Server 可以提取跨網站資料。

這篇有幾個目標:

  • 利用 Browser 的 Debug 功能查出前台使用的資料格式
  • 將檔案移殖到自機
  • DataSnap 和 Demo 的結合

 利用 Browser 的 Debug 功能查出前台使用的資料格式


由上圖可知會從 API:Orders 會下載所有表單的JSON內容,在複製回應內容並整理後取出解析完成的 Demo JSON。

 

將檔案移殖到自機

解析完成後的資料就在 Delphi 裡建立一個新的檔案。
取名為【Orders.js】

DataSnap 和 Demo 的結合

後端:

從 DevExtreme DataGrid Demo 程式碼的內容可以得知程式會取得【data】節點的資料。

接下來,在後端的 DataSnap REST Server 裡增加【Orders】函式模擬 DevExpress 的 API。
TStreamReader 由 TTextReader 繼承而來,從 2010 開始存在,從 .NET 借鏡而生的物件,相當易用。

 寫好後即可使用 Browser 進行測試。

 前端:

DataGrid Demo 在 Load 段的程式
 會用到 sendRequest 取得資料
 可以看到這裡面都用 jQuery.ajax 向後端取得資料。

由於 JavaScript DataSnap framework 把 Ajax 良好地封裝在物件裡,所以只需要小小的修改一下。

再置換成向 DataSnap REST Server 呼叫的 Function 即可。參數是給原來的程式使用,DS不會使用到這些參數。

來看看程式是否順利運作吧!
從紅框處可以看到 JavaScript DataSnap framework:
  1. 和 jQuery 搭配得很好。
  2. 和後端 DataSnap REST Server 取得資料無障礙。
  3. DataSnap將Ajax封裝在物件中,可讓程式碼大幅縮減,學習和應用皆宜。

結論:

從這篇文章中可以知道 JavaScript DataSnap framework 專注的地方在 Ajax 上面,和 DataSnap REST Server 能緊密結合外,更能和現代 JS 框架相容。

如果有設計Web的需求,則 DataSnap 是個值得考慮的後端框架!



本篇文章所用到的程式在此


See also:

沒有留言:

張貼留言

ebook【Delphi跨平台資料庫程式設計火速上手】電子書出版 (CHT)

Delphi 跨平台資料庫程式設計火速上手,是本關於整合 Delphi 的跨平台技術打造 2-Tier 架構的跨平台 APP 的入門技術書。 全書沒有需要理解的技術知識,只講套路。 力求短時間把製作 APP 的工法熟悉,未來要開發其它的應用程式也能舉一反三。 底下...