PinToo之自定HTTP Server伺服器

1. 說明

  通過PinToo智慧控制平臺，實現接收客戶端請求並向TARS服務端發起連線。該示例可與PinToo之自定HTTP Client客戶端示例配合使用。該功能需要啟用TARS連線。在使用以下功能之前，請先確認是否有給予PinToo相應的許可權。

  該範例使用的是類rest風格的請求方式，rest api 是前後端分離最佳實踐，是開發的一套標準或者說是一套規範。其優點如下：

1. 輕量，直接通過http，不需要額外的協議，通常有post/get/put/delete操作。
2. 面向資源，一目瞭然，具有自解釋性。
3. 數據描述簡單，一般通過json或者xml做數據通訊。

  在使用該範例之前，請先建立一個名為test的資料庫，並在其中建立一個Table_Test表，建立語句示例如下：

--建立數據表 Table_Test
Create Table Table_Test(
FCode nvarchar(50) not null,
FName nvarchar(100)
)
GO
--建立表主索引 PK_Table_Test
CREATE UNIQUE NONCLUSTERED INDEX [PK_Table_Test] ON [dbo].[Table_Test] 
([FCode] ASC)
WITH (PAD_INDEX  = OFF, 
STATISTICS_NORECOMPUTE  = OFF, 
SORT_IN_TEMPDB = OFF, 
IGNORE_DUP_KEY = OFF, 
DROP_EXISTING = OFF, 
ONLINE = OFF, 
ALLOW_ROW_LOCKS  = ON, 
ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
GO

--插入測試用的數據
INSERT INTO Table_Test(FCode,FName)
VALUES('0101','小明')
 
INSERT INTO Table_Test(FCode,FName)
VALUES('0102','小王')

  在PinToo登錄時配置服務端的地址，埠號和連線的資料庫連線設定名稱。

  通過範例學習，可以掌握fxIdHTTPServer的基本使用方式。

2. 設計明細

  開啟PinToo設計器，分別加入如下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]，選擇模板檔案來打開對應模板。

  ①：TfxSuperButton元件，控制元件名稱為fxSuperButtonStart。

  ②：TfxEdit元件，控制元件名稱為fxEditPort。

  ③：TfxIdHTTPServer元件，控制元件名稱為fxIdHTTPServer1。

  ④：TfxRFDataSet元件，控制元件名稱為fxRFDataSet1。

  ⑤：TfxDataSource元件，控制元件名稱為fxDataSource1。

  ⑥：TfxSuperButton元件，控制元件名稱為fxSuperButtonStop。

  ⑦：TfxGridView元件，控制元件名稱為fxGridView1。

  ⑧：TfxSwitchButton元件，控制元件名稱為fxSwitchButton1。

  ⑨：TfxMemo元件，控制元件名稱為fxMemo1。

• fxRunFrame屬性設定

  • Height：設定頁面高度=800。
  • Width：設定頁面寬度=400。

• ①fxSuperButtonStart屬性設定

  • Height：設定控制元件高度=80。
  • Width：設定控制元件寬度=80。
  • ButtonType：設定按鈕型別，設定為TfxSvgButton。
  • Name：設定控制元件名稱=fxSuperButtonStart。
  • ButtonType.SvgData：設定SVG數據，其數據內容如下。

  <path d="M14.66588306427,41.3929443359375 L14.66588306427,41.3929443359375 L14.66588306427,41.3929443359375 L14.8400011062622,41.3929443359375 L14.66588306427,41.3929443359375 Z" p-id="7305" fill="#FF2C2C2C" stroke="Null"></path>
  <path d="M66.0305938720703,13.8823585510254 L66.0305938720703,13.8823585510254 C59.2400016784668,7.09177255630493 50.0117683410645,3.08706665039063 39.9129409790039,3.08706665039063 C29.8141193389893,3.08706665039063 20.4117641448975,7.26589012145996 13.7952938079834,13.8823585510254 L13.7952938079834,13.8823585510254 C7.17882347106934,20.4988307952881 3,29.7270603179932 3,40.0000038146973 C3,50.0988349914551 7.17882347106934,59.5011863708496 13.7952938079834,66.1176452636719 C20.4117641448975,72.9082336425781 29.8141136169434,76.9129333496094 39.9129409790039,76.9129333496094 C50.1858825683594,76.9129333496094 59.414119720459,72.7341156005859 66.0305938720703,66.1176452636719 C72.821174621582,59.5011863708496 76.8258819580078,50.27294921875 76.8258819580078,40.0000038146973 C77,29.7270603179932 72.821174621582,20.4988307952881 66.0305938720703,13.8823585510254 Z M62.0258827209473,62.1129379272461 C56.4541130065918,67.6847076416016 48.6188201904297,71.3411560058594 39.9129371643066,71.3411560058594 C31.2070598602295,71.3411560058594 23.3717632293701,67.8588104248047 17.7999992370605,62.1129379272461 C12.2282361984253,56.5411758422852 8.5717658996582,48.7058868408203 8.5717658996582,40.0000038146973 C8.5717658996582,31.2941226959229 12.0541191101074,23.4588317871094 17.7999992370605,17.8870658874512 C23.5458831787109,12.3153009414673 31.3811779022217,8.6588306427002 39.9129409790039,8.6588306427002 C48.4447059631348,8.6588306427002 56.2799987792969,12.1411838531494 61.8517646789551,17.7129516601563 L62.0258827209473,17.8870658874512 C67.5976486206055,23.4588317871094 71.2541198730469,31.2941226959229 71.2541198730469,40.0000038146973 C71.2541198730469,48.7058944702148 67.7717666625977,56.5411758422852 62.0258827209473,62.1129379272461 Z" p-id="7306" fill="#FF2C2C2C" stroke="Null"></path>
  <path d="M29.2917633056641,17.8870658874512 L46.529411315918,27.8117733001709 L63.7670593261719,37.7364730834961 C64.9858856201172,38.4329414367676 65.3341217041016,40.0000038146973 64.6376495361328,41.2188377380371 C64.2894134521484,41.567066192627 63.9411735534668,41.9153099060059 63.5929412841797,42.2635345458984 L46.3552894592285,52.1882514953613 L46.3552894592285,52.1882514953613 L29.1176433563232,62.1129531860352 C27.8988189697266,62.8094215393066 26.3317604064941,62.4611892700195 25.6352920532227,61.2423629760742 C25.4611721038818,60.7200126647949 25.2870559692383,60.3717765808105 25.2870559692383,59.849437713623 L25.2870616912842,40.0000038146973 L25.2870616912842,40.0000038146973 L25.2870616912842,19.9764785766602 C25.2870616912842,18.5835380554199 26.3317642211914,17.5388298034668 27.7247085571289,17.5388298034668 C28.4211750030518,17.5388298034668 28.9435329437256,17.7129516601563 29.2917633056641,17.8870658874512 L29.2917633056641,17.8870658874512 Z" p-id="7307" fill="#FF2C2C2C" stroke="Null"></path>
  

• ②fxEditPort屬性設定

  • Height：設定控制元件高度=30。
  • Width：設定控制元件寬度=300。
  • Text：設定編輯框文字，此處設定為埠號=8806。
  • KeyBoardType：設定顯示鍵盤的型別=NumberPad。

• ⑤fxDataSource屬性設定

  • DataSource：定義數據源，設定為fxDataSource1。

• ⑥fxSuperButtonStop屬性設定

  • Height：設定控制元件高度=80。
  • Width：設定控制元件寬度=80。
  • ButtonType：設定按鈕型別，設定為TfxSvgButton。
  • Name：設定控制元件名稱=fxSuperButtonStop。
  • ButtonType.SvgData：設定SVG數據，其數據內容如下。

  <path d="M40,77 C19.6499862670898,77 3,60.3500022888184 3,40 C3,19.6499977111816 19.6499862670898,3 40,3 C60.3500099182129,3 77,19.6499977111816 77,40 C77,60.3500022888184 60.3500099182129,77 40,77 Z M40,72.375 C58.0375099182129,72.375 72.375,58.0374946594238 72.375,40 C72.375,21.9625034332275 58.0375099182129,7.625 40,7.625 C21.9624862670898,7.625 7.625,21.9624977111816 7.625,40 C7.625,58.0374946594238 21.9624862670898,72.375 40,72.375 Z" p-id="6408" fill="#FF333333" stroke="Null"></path>
  <path d="M26.125,26.1250076293945 L53.875,26.1250076293945 L53.875,53.8750152587891 L26.125,53.8750152587891 Z" p-id="6409" fill="#FF333333" stroke="Null"></path>
  

• ⑦fxGridView1屬性設定

  • Height：設定控制元件高度=205。
  • Width：設定控制元件寬度=360。
  • DataSource：定義數據源，此處設定為fxDataSource1。

• ⑧fxSwitchButton1屬性設定

  • Height：設定控制元件高度=50。
  • Width：設定控制元件寬度=50。

• ⑨fxMemo1屬性設定

  • Height：設定控制元件高度=190。
  • Width：設定控制元件寬度=360。
  • Opacity：設定透控制元件明度=0.9。

3. 程式設計

  點選設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。程式需引用IdCustomHTTPServer,IdHTTPServer,ufxDm,ufxFunctions,TARSCompClient單元。

3.1. 程式初始設定

  該程式無初始設定。

3.2. 事件設定

• ①fxSuperButtonStart-OnClick事件

  點選啟動按鈕時開啟HTTP Server服務。

Procedure fxSuperButtonStartOnClick(Sender: TObject);
//啟動HTTP服務
Begin
  if not fxIdHTTPServer1.Active then
  begin
    try
      fxIdHTTPServer1.Bindings.Clear;
      fxIdHTTPServer1.DefaultPort := StrToInt(fxEditPort.Text);
      fxIdHTTPServer1.Active := True;
      fxMemo1.Lines.Insert(0, FormatDateTime('HH:NN:SS.ZZZ ', now) 
      + 'HTTP服務 已啟動。')
    except
      fxMemo1.Lines.Insert(0, FormatDateTime('HH:NN:SS.ZZZ ', now) 
      + 'HTTP服務 啟動失敗。')
    end;
  end;
End;

• ⑥fxSuperButtonStop-OnClick事件

  點選停止按鈕時關閉HTTP Server服務。

Procedure fxSuperButtonStopOnClick(Sender: TObject);
//停止HTTP服務
Begin
  fxIdHTTPServer1.Active := False;
  fxIdHTTPServer1.Bindings.Clear;
  fxMemo1.Lines.Insert(0, FormatDateTime('HH:NN:SS.ZZZ ', now) 
  + 'HTTP服務 已停止。');
End;

• ③fxIdHTTPServer1-OnCommandGet事件

  當伺服器獲取到命令時，向TARS發起資料庫鏈接請求。

Procedure fxIdHTTPServer1OnCommandGet(AContext: TIdContext; ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo);
//獲取HTTP請求並向TARS伺服器發起資料庫連線請求
var
  ReportType:String;
  APathInfo,SQL:string;
  str:String;
  Stream: TStringStream;
begin
  Stream := TStringStream.Create;
  if ARequestInfo.Command='POST' then
  begin
    AResponseInfo.CustomHeaders.Add('Access-Control-Allow-Origin:*');
    AResponseInfo.CustomHeaders.Add('Access-Control-Allow-Headers:*');
    AResponseInfo.CustomHeaders.Add('Access-Control-Allow-Method:*');
 
    APathInfo := ARequestInfo.Document;
 
    if APathInfo = '/opensql' then
    begin
       Stream.LoadFromStream(ARequestInfo.PostStream);
       SQL := Stream.DataString;
       if SQL='' then
       begin
        str := ('{"status":"error","data":"SQL內容不能為空！"}');
        fxMemo1.Lines.Insert(0, FormatDateTime('HH:NN:SS.ZZZ ', now) 
        + 'SQL內容不能為空！');
        AResponseInfo.ContentText := fxfun.URLEncode(str);
        AResponseInfo.WriteContent;
        Exit;
       end;
   
       fxRFDataSet1.OpenSQL(SQL);
       fxMemo1.Lines.Insert(0, FormatDateTime('HH:NN:SS.ZZZ ', now) 
       + '接收到的SQL內容：'+SQL);
       //返回查詢數據
       str := ('{"status":"ok", ' + fxdm.DataSetToStr(fxRFDataSet1,'DataSet') + '}');
       AResponseInfo.ContentText := fxfun.URLEncode(str);
       AResponseInfo.WriteContent;
    end;
  end;
  Stream.Free;
end;

• ⑧fxSwitchButton1-OnSwitch事件

  點選切換以開啟/關閉日誌框。

Procedure fxSwitchButton1OnSwitch(Sender: TObject);
//日誌顯示
Begin
  fxMemo1.Visible := fxSwitchButton1.IsChecked;
End;

4. 運行結果

  使用滑鼠在 PinToo 功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

  使用自定HTTP Client客戶端對該伺服器進行訪問。首先設定埠號，點選啟動按鈕，同時可打開日誌按鈕檢視程式運行日誌。在客戶端處發起SQL查詢的訪問，在伺服器端顯示查詢的結果，同時返回查詢結果的數據集JSON。