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提交数据库] 与 [参数提交数据库]，将使用两种方式来提交数据实现数据库写入的效果。