Translate

2017/06/09

Delphi DataSnap REST server and HTML5 client

緣起:

前一陣子和網頁前端開發者合作一個網站的開發,使用 Delphi 開發 REST Service 非常的快,兩三下就完成交差。但就在這時,前端工程師卻問了我一個問題:

你的 REST API 要怎麼用 JavaScript 連?



也許有什麼好方法可以讓前端也能快速存取 REST 方法。這讓我想到從 XE 開始,DataSnap REST Application 就有內建 JavaScript 套件和 2 個 Boilerplate,也許可以從官方文件中吸取一些知識。


DataSnap REST Application 建立時會自動產生的 JavaScript 檔案

【ServerFunctionExecutor.js】和【ServerFunctionInvoker.js】檔案,是 JavaScript REST DataSnap framework 的核心內容,【ServerFunctions.js】則是 Delphi REST Server 依據 ServerMethod 單元的內容自動產生的。

以萬年範例則是「ReverseString」和「EchoString」這兩個 Method
從 2009 到最近的 10.2 都一樣的萬年範例 (笑)
接著打開 templates 目錄內的 ReverseString.html,如下圖:

Login 區塊在這邊不是重點,因為前端一定有自己的控制碼,所以這部份有機會再表。

我們把重心放在 ReverseString 區塊上。
ReverseString.html 內的 ReverseString 區塊 HTML 碼

javascript:onReverseStringClick();

看來就是它了,事件的原始碼是:
javascript:onReverseStringClick 原始碼
就像是 Delphi 的使用方式一樣,好像沒有想像中的困難,如法泡製來一個試試看。

首先在 Delphi 裡做了一個 FetchEmp,它負責回傳 TDataSet 的內容,程式碼如下:

REST DataSnap 是建構在 WebBroker 的架構上,就照著 TPageProducer.ReverseString 再建立一個 TPageProducer.FetchEmp,並且指向等一下要建立的【FetchEmp.html】。

FetchEmp.html 的原始碼:


採用 HTML5 的寫法,就是 uses / include 一些 framework 的內容回來,可以照抄 ReverseString 的內容,而【jquery.min.js】是因為要顯示在畫面上才使用的。

在抄寫 JavaScript 時要留意onLoad 事件的這一段:

function onLoad()
{
  showTime();
  setConnection('localhost', '8080', '');
}

注意!

這裡的 localhost 是對應 TDSHTTPWebDispatcher.DSHostName,如果不是相同 DNS 會被當成跨網域存取而引發 TDSServiceException: Command closed or unassigned 的例外訊息。

最後,終於要讓 JavaScript 存取 FetchEmp 了!
JQuery 是用在建立 Table 上面,僅存取資料是不需要 JQuery 的

到這裡,就能讓前端工程師好好應用了。


關鍵就那幾行,看完程式碼後也可以讓前端知道【那也沒有什麼】,就知道它有多簡單了吧!


DataSnap REST Application 所產生的 JavaScript REST DataSnap framework 裡面還有很多資訊,之後有機會再做更進一步的說明。


謝謝各位收看!













後記:為了回答這個問題,也花了我數天的時間在翻資料,果然簡單的東西真的不簡單啊!

沒有留言:

張貼留言

DataSnap REST API Authorization with PHP

About Authentication with DataSet REST JavaScript client. In connection.js: function setCredentials(user, password) { connectionInf...