RestAPI綜合運用3(WEB)
# FastWeb之RestAPI綜合運用3(WEB)
# 1. 說明
採用RestAPI，通過呼叫本機的RestAPI客戶端進行呼叫，實現兩種方式的資料庫數據寫入的功能。目前示例使用 介面開發 中提供的兩個API post_demo 與 urlparams_demo 來實現數據的提交功能，可點選進入介面開發界面檢視功能的實現方法。
通過本範例學習，可以掌握RestAPI的運用方法，並結合實體進行資料庫寫入的功能。
# 2. 設計明細
開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
1：TUgDBGrid元件，控制元件名稱為UgDBGrid01。
2：TUgPanel元件，控制元件名稱為 UgPanel01。
3：TUgEdit元件，控制元件名稱為 edcustname。
4：TUgEdit元件，控制元件名稱為 edcustage。
5：TUgEdit元件，控制元件名稱為 edcustsex。
6：TUgFSButton元件，控制元件名稱為 btnToken。
7：TUgFSButton元件，控制元件名稱為 btnPost。
8：TUgFSButton元件，控制元件名稱為 btnParams。
9：TUgRestAPI元件，控制元件名稱為 UgRestApi01。
10：TUgRestAPI元件，控制元件名稱為 UgRestApi02。
11：TUgRFDataSet元件，控制元件名稱為 UgRFDataSet01。
12：TUgDataSource元件，控制元件名稱為 UgDataSource01。
13：TUgMemo元件，控制元件名稱為 UgMemo01。
UgWebRunFrame屬性設定
Height：設定頁面高度=600。Width：設定頁面寬度=800。
2：UgPanel01屬性設定
Align：設定顯示對齊的方式，設定為alRight。Title：顯示面板的標題，設定為編輯區。TitleVisible：設定標題是否可見，設定為True。Width：設定顯示區域的寬度，設定為250。
1：UgDBGrid01屬性設定
Align：設定顯示對齊的方式，設定為alClient。DataSource：設定數據來源，設定為UgDataSource01。ReadOnly：設定數據是否為只讀，設定為True。
雙擊顯示區域，打開對話方塊，新增四個欄位，按照下述圖片顯示的內容進行設定。
3：edcustname屬性設定
FieldLabel：設定欄位標籤顯示的名稱，設定為cust_name。FieldLabelAlign：設定欄位標籤顯示的位置，設定為laTop。Text：設定欄位標籤中顯示的內容，設定為李明。
4：edcustage屬性設定
FieldLabel：設定欄位標籤顯示的名稱，設定為cust_age。FieldLabelAlign：設定欄位標籤顯示的位置，設定為laTop。Text：設定欄位標籤中顯示的內容，設定為24。
5：custsex屬性設定
FieldLabel：設定欄位標籤顯示的名稱，設定為cust_sex。FieldLabelAlign：設定欄位標籤顯示的位置，設定為laTop。Text：設定欄位標籤中顯示的內容，設定為男。
6：btnToken屬性設定
Caption：設定顯示的字幕，設定為獲取令牌。Style：設定顯示的樣式，設定為GoogleGreenRound。
7：btnPost屬性設定
Caption：設定顯示的字幕，設定為post提交資料庫。Style：設定顯示的樣式，設定為GoogleBlueRound。
8：btnParams屬性設定
Caption：設定顯示的字幕，設定為參數提交資料庫。Style：設定顯示的樣式，設定為GoogleBlue1Round。
12：UgDataSource01屬性設定
DataSet：設定繫結的數據集，設定為UgRFDataSet01。
13：UgMemo01屬性設定
Anchors：設定錨點，設定為akLeft、akTop、akRight、akBottom。FieldLabel：設定欄位標籤顯示的名稱，設定為日誌。FieldLabelAlign：設定欄位標籤顯示的位置，設定為laTop。
# 3. 程式設計
點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。JScript的程式需要引用pub_js_restapi、pub_js_tarslink單元，PasScript的程式需需要引用pub_pas_restapi、pub_pas_tarslink單元。
# 3.1. 程式初始設定
該程式需設定一個全域性變數token，用於儲存令牌資訊。
//JScript
var token;
1
2
2
//PasScript
var
token: String;
1
2
3
2
3
// Make sure to add code blocks to your code group
# 3.2. 事件設定
- UgWebRunFrame-OnAfterRun事件
進行數據的初始化操作。
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
//初始化
{
UGMM.LC(Self);
UgRFDataSet01.Connection = GetRFWeb;
UgRFDataSet01.SQL.Text = "SELECT * FROM Pass_Cust";
UgRFDataSet01.Open;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
//初始化
begin
UGMM.LC(Self);
UgRFDataSet01.Connection := GetRFWeb;
UgRFDataSet01.SQL.Text := 'SELECT * FROM Pass_Cust';
UgRFDataSet01.Open;
end;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// Make sure to add code blocks to your code group
- 6：btnToken-OnClick事件
設定以獲取令牌。
//JScript
function btnTokenOnClick(sender)
//獲取token
{
token = GetToKen;
UgMemo01.Lines.Insert(0,DateTimeToStr(Now()) + UGMM.LT(": 獲取Token :") + token);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure btnTokenOnClick(sender: tobject);
//獲取token
begin
token := GetToKen;
UgMemo01.Lines.Insert(0,DateTimeToStr(Now()) + UGMM.LT(': 獲取Token :') + token);
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- 7：btnPost-OnClick事件
設定post條件所需的參數，執行發送操作。
//JScript
function btnPostOnClick(sender)
//通過post方式提交資料庫
{
var Params,vJSON;
Params = new TStringList();
vJSON = new TJSONObject();
try{
UgRestApi01.Server = UniSession.Url;
Params.Values["restapi"] = "script";
Params.Values["token"] = token;
Params.Values["apiname"] = "post_demo";
TextToHTTPEncode(Params);
UgRestApi01.Params = Params;
vJSON.AddPair("cust_id",UGMM.CreateGuid);
vJSON.AddPair("cust_name",edcustname.Text);
vJSON.AddPair("cust_age",edcustage.Text);
vJSON.AddPair("cust_sex",edcustsex.Text);
UgRestApi01.Body.Text = vJSON.ToString;
UgRestApi01.Method = rmPOST;
UgRestApi01.Send;
}
finally{
Params.Free;
vJSON.Free;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//PasScript
procedure btnPostOnClick(sender: tobject);
//通過post方式提交資料庫
var
Params: TStringList;
vJSON: TJSONObject;
begin
Params := TStringList.Create;
vJSON := TJSONObject.Create;
try
UgRestApi01.Server := UniSession.Url;
Params.Values['restapi'] := 'script';
Params.Values['token'] := token;
Params.Values['apiname'] := 'post_demo';
UgRestApi01.Params := Params;
vJSON.AddPair('cust_id',UGMM.CreateGuid);
vJSON.AddPair('cust_name',edcustname.Text);
vJSON.AddPair('cust_age',edcustage.Text);
vJSON.AddPair('cust_sex',edcustsex.Text);
UgRestApi01.Body.Text := vJSON.ToString;
UgRestApi01.Method := rmPost;
UgRestApi01.Send;
finally
Params.Free;
vJSON.Free;
end;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Make sure to add code blocks to your code group
- 8：btnParams-OnClick事件
設定使用參數的方式來提交數據資訊。
//JScript
function btnParamsOnClick(sender)
//參數提交資料庫
{
var Params;
Params = new TStringList();
try{
UgRestApi02.Server = UniSession.Url;
Params.Values["restapi"] = "script";
Params.Values["token"] = token;
Params.Values["apiname"] = "urlparams_demo";
Params.Values["cust_id"] = UGMM.CreateGuid;
Params.Values["cust_name"] = edcustname.Text;
Params.Values["cust_age"] = edcustage.Text;
Params.Values["cust_sex"] = edcustsex.Text;
TextToHTTPEncode(Params);
UgRestApi02.Params = Params;
UgRestApi02.Method = rmGET;
UgRestApi02.Send;
}
finally{
Params.Free;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//PasScript
procedure btnParamsOnClick(sender: tobject);
//參數提交資料庫
var
Params: TStringList;
begin
Params := TStringList.Create;
try
UgRestApi01.Server := UniSession.Url;
Params.Values['restapi'] := 'script';
Params.Values['token'] := token;
Params.Values['apiname'] := 'urlparams_demo';
Params.Values['cust_id'] := UGMM.CreateGuid;
Params.Values['cust_name'] := edcustname.Text;
Params.Values['cust_age'] := edcustage.Text;
Params.Values['cust_sex'] := edcustsex.Text;
UgRestApi01.Params := Params;
UgRestApi01.Method := rmGET;
UgRestApi01.Send;
finally
Params.Free;
end;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Make sure to add code blocks to your code group
- 9：UgRestApi01-OnResultData事件
設定將獲取到的資訊進行輸出。
//JScript
function UgRestApi01OnResultData(sender,aresult)
//將獲取到的資訊輸出
{
UgMemo01.Lines.Insert(0,DateTimeToStr(Now()) + UGMM.LT(": 返回結果 :") + aresult);
UgRFDataSet01.Close;
UgRFDataSet01.Open;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure UgRestApi01OnResultData(sender: tobject;aresult: string);
//將獲取到的資訊輸出
begin
UgMemo01.Lines.Insert(0,DateTimeToStr(Now()) + UGMM.LT(': 返回結果 :') + aresult);
UgRFDataSet01.Close;
UgRFDataSet01.Open;
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
- 10：UgRestApi02-OnResultData事件
//JScript
function UgRestApi02OnResultData(sender,aresult)
//將獲取到的資訊輸出
{
UgMemo01.Lines.Insert(0,DateTimeToStr(Now()) + UGMM.LT(": 返回結果 :") + aresult);
UgRFDataSet01.Close;
UgRFDataSet01.Open;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure UgRestApi02OnResultData(sender: tobject;aresult: string);
//將獲取到的資訊輸出
begin
UgMemo01.Lines.Insert(0,DateTimeToStr(Now()) + UGMM.LT(': 返回結果 :') + aresult);
UgRFDataSet01.Close;
UgRFDataSet01.Open;
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
# 4. 運行結果
使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
運行后，首先點選 [獲取令牌]按鈕，待日誌中出現獲取到令牌資訊后，再依次點選 [post提交資料庫] 與 [參數提交資料庫]，將使用兩種方式來提交數據實現資料庫寫入的效果。