Skip to content

Commit

Permalink
feat: add HTTP API
Browse files Browse the repository at this point in the history
  • Loading branch information
kungfuboy committed Jul 14, 2022
1 parent ed9e761 commit b01c6d2
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 23 deletions.
Original file line number Diff line number Diff line change
@@ -1,36 +1,47 @@
<div class="flex eo-api-script">
<div class="w-[240px] h-[322px] overflow-auto">
<div class="w-[340px] h-[322px] overflow-auto">
<div class="flex justify-between p-3">
<div i18n>Shortcut</div>
<div>
<a href="https://help.eolink.com/#/tutorial/?groupID=c-709&productID=13" class="text-blue-400" target="_blank"
rel="noopener noreferrer" i18n>Built-in function manual</a>
<a
href="https://help.eolink.com/#/tutorial/?groupID=c-709&productID=13"
class="text-blue-400"
target="_blank"
rel="noopener noreferrer"
i18n
>Built-in function manual</a
>
</div>
</div>
<nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" [nzBlockNode]="true">
<nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
<nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
<nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="false" (nzClick)="insertCode(node)">
<span class="text-blue-400"> {{ node.name }}</span>
<span class="text-sm text-blue-400"> {{ node.name }}</span>
<ng-container *ngIf="node.note">
<span [nzTooltipTitle]="titleTemplate" [nzTooltipPlacement]="['topLeft', 'leftTop']" class="text-blue-400"
nzTooltipColor="black" nz-tooltip>
<span
[nzTooltipTitle]="titleTemplate"
[nzTooltipPlacement]="['topLeft', 'leftTop']"
class="text-blue-400"
nzTooltipColor="black"
nz-tooltip
>
[?]
</span>
<ng-template #titleTemplate let-thing>
<p style="color:#99c6da" *ngIf="node.note.code">{{ node.note.code }}</p>
<p *ngIf="node.note.desc">{{node.note.desc}}</p>
<p style="color: #99c6da" *ngIf="node.note.code">{{ node.note.code }}</p>
<p *ngIf="node.note.desc">{{ node.note.desc }}</p>
<ng-container *ngIf="node.note.input">
<br />
<p style="color:#999" i18n>---input---</p>
<p style="color: #999" i18n>---input---</p>
<p *ngFor="let item of node.note.input">
<span style="color:#ff9800">{{item.key}}:</span>{{item.value}}
<span style="color: #ff9800">{{ item.key }}:</span>{{ item.value }}
</p>
</ng-container>
<ng-container *ngIf="node.note.output">
<br />
<p style="color:#999" i18n>---return---</p>
<p>{{node.note.output}}</p>
<p style="color: #999" i18n>---return---</p>
<p>{{ node.note.output }}</p>
</ng-container>
</ng-template>
</ng-container>
Expand All @@ -47,9 +58,13 @@
</nz-tree-node>
</nz-tree-view>
</div>
<div class="flex-1 ">
<eo-editor [(code)]="code" editorType="javascript" [eventList]="[ 'format', 'copy', 'search', 'replace']"
(codeChange)="handleChange($event)">
<div class="flex-1">
<eo-editor
[(code)]="code"
editorType="javascript"
[eventList]="['format', 'copy', 'search', 'replace']"
(codeChange)="handleChange($event)"
>
</eo-editor>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { EoEditorComponent } from 'eo/workbench/browser/src/app/eoui/editor/eo-e
import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view';

import type { TreeNode, FlatNode } from './constant';
import { TREE_DATA } from './constant';
import { BEFORE_DATA } from './constant';
@Component({
selector: 'eo-api-script',
templateUrl: './api-script.component.html',
Expand Down Expand Up @@ -43,7 +43,7 @@ export class ApiScriptComponent implements OnInit {
dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener);

constructor() {
this.dataSource.setData(TREE_DATA);
this.dataSource.setData(BEFORE_DATA);
this.treeControl.expandAll();
}

Expand Down
173 changes: 167 additions & 6 deletions src/workbench/browser/src/app/shared/components/api-script/constant.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ export const BEFORE_DATA: TreeNode[] = [
name: $localize`HTTP API request`,
children: [
{
name: $localize`Set Request URL`,
name: $localize`Set Request URL`, // 设置请求地址
caption: 'eo.http.url.set',
value: 'eo.http.url.set("new_url")',
note: {
code: 'eo.http.url.set("new_url")',
desc: $localize`设置 HTTP API 的请求路径`,
input: [{ key: 'new_url', value: `新的请求路径` }],
desc: $localize`Set HTTP API request path`, // 设置 HTTP API 的请求路径
input: [{ key: 'new_url', value: $localize`new url` }], // 新的请求路径
},
},
{
Expand All @@ -45,13 +45,174 @@ export const BEFORE_DATA: TreeNode[] = [
value: 'eo.http.header.set("param_key","param_value")',
note: {
code: 'eo.http.header.set("param_key","param_value")',
desc: $localize`设置 HTTP API 的请求头部参数`,
desc: $localize`Set HTTP API request header params`, // 设置 HTTP API 的请求头部参数
input: [
{ key: 'param_key', value: `参数名` },
{ key: 'param_value', value: `参数值` },
{ key: 'param_key', value: $localize`params name` }, // 参数名
{ key: 'param_value', value: $localize`params value` }, // 参数值
],
},
},

{
name: $localize`Request body variable[Form-data/JSON/XML]`, //请求体变量[对象:表单/JSON/XML]
caption: 'eo.http.bodyParseParam',
value: 'eo.http.bodyParseParam',
},

{
name: $localize`Request body variable[Raw]`, //请求体变量[文本:Raw]
caption: 'eo.http.bodyParam',
value: 'eo.http.bodyParam',
},
{
name: $localize`Set REST params`, //设置 REST 参数
caption: 'eo.http.rest.set',
value: 'eo.http.rest.set("param_key","param_value")',
note: {
code: 'eo.http.rest.set("param_key","param_value")',
desc: $localize`Set HTTP API REST params`, // 设置 HTTP API 的 REST 参数
input: [
{ key: 'param_key', value: $localize`params name` }, //参数名
{ key: 'param_value', value: $localize`params value` }, // 参数值
],
},
},
{
name: $localize`Set Query params`, // 设置 Query 参数
caption: 'eo.http.query.set',
value: 'eo.http.query.set("param_key","param_value")',
note: {
code: 'eo.http.query.set("param_key","param_value")',
desc: $localize`Set HTTP API Query params`, //设置 HTTP API 的 Query 参数
input: [
{ key: 'param_key', value: $localize`params name` }, //参数名
{ key: 'param_value', value: $localize`params value` }, // 参数值
],
},
},
{
name: $localize`Insert new API test[Form-data]`, //插入新 API 测试[Form-data]
caption: '',
value: `//定义需要测试的API
var formdata_api_demo_1 = {
"url": "https://api.eolink.com", //[必填][string]请求地址,若不存在请求协议,默认http
"name": "FORM-DATA API Demo", //[选填][string],API名称,方便检索,不填则默认为系统生成API编号
"method": "POST", //[选填][string],请求方式,可能值有[GET/POST/PUT/PATCH/DELETE/HEAD/OPTION],兼容大小写,默认为GET
"headers": {
"Content-Type": "application/x-www-form-urlencoded"
}, //[选填][object],请求头部
"bodyType": "form-data", //[选填][string],请求体类型
"body": { //[选填][object],请求参数
"param_1": "value_1",
"param_2": "value_2"
},
"timelimit": 1000 //[选填],超时限制,单位为ms,超过时间则判断为请求失败,默认为1000ms
};
//执行请求,返回格式为{time:"请求时间",code:"HTTP状态码",response:"返回结果",header:"返回头部"},
var formdata_api_demo_1_result = eo.execute(formdata_api_demo_1);
//判断返回结果
if (formdata_api_demo_1_result.response !== "") {
eo.info("info_1"); //输出信息
} else {
eo.info("info_2"); //输出信息
}`,
},
{
name: $localize`Insert new API test[JSON]`, // 插入新 API 测试[JSON]
caption: '',
value: `//定义需要测试的API
var json_api_demo_1 = {
"url": "https://api.eolink.com", //[必填][string]请求地址,若不存在请求协议,默认http
"name": "JSON API Demo", //[选填][string],API名称,方便检索,不填则默认为系统生成API编号
"method": "POST", //[选填][string],请求方式,可能值有[GET/POST/PUT/PATCH/DELETE/HEAD/OPTION],兼容大小写,默认为GET
"headers": {
"Content-Type": "application/json"
}, //[选填][object],请求头部
"bodyType": "json", //[选填][string],请求体类型
"body": { //[选填][object],请求参数
"param_1": "value_1",
"param_2": "value_2"
},
"timelimit": 1000 //[选填],超时限制,单位为ms,超过时间则判断为请求失败,默认为1000ms
};
//执行请求,返回格式为{time:"请求时间",code:"HTTP状态码",response:"返回结果",header:"返回头部"},
var json_api_demo_1_result = eo.execute(json_api_demo_1);
//判断返回结果
if (json_api_demo_1_result.response !== "") {
eo.info("info_1"); //输出信息
} else {
eo.info("info_2"); //输出信息
}`,
},
{
name: $localize`Insert new API test[XML]`, //插入新 API 测试[XML]
caption: '',
value: `//定义需要测试的API
var xml_api_demo_1 = {
"url": "https://api.eolink.com", //[必填][string]请求地址,若不存在请求协议,默认http
"name": "XML API Demo", //[选填][string],API名称,方便检索,不填则默认为系统生成API编号
"method": "POST", //[选填][string],请求方式,可能值有[GET/POST/PUT/PATCH/DELETE/HEAD/OPTION],兼容大小写,默认为GET
"headers": {
"Content-Type": "application/xml"
}, //[选填][object],请求头部
"bodyType": "xml", //[选填][string],请求体类型
"body": { //[选填][object],请求参数
"root": {
"book":[
{
"name":"eolinker_book_1"
},
{
"name":"eolinker_book_2"
}
]
}
},
"timelimit": 1000 //[选填],超时限制,单位为ms,超过时间则判断为请求失败,默认为1000ms
};
//执行请求,返回格式为{time:"请求时间",code:"HTTP状态码",response:"返回结果",header:"返回头部"},
var xml_api_demo_1_result = eo.execute(xml_api_demo_1);
//判断返回结果
if (xml_api_demo_1_result.response !== "") {
eo.info("info_1"); //输出信息
} else {
eo.info("info_2"); //输出信息
}`,
},
{
name: $localize`Insert new API test[Raw]`, //插入新 API 测试[Raw]
caption: '',
value: `//定义需要测试的API
var raw_api_demo_1 = {
"url": "https://api.eolink.com", //[必填][string]请求地址,若不存在请求协议,默认http
"name": "RAW API Demo", //[选填][string],API名称,方便检索,不填则默认为系统生成API编号
"method": "POST", //[选填][string],请求方式,可能值有[GET/POST/PUT/PATCH/DELETE/HEAD/OPTION],兼容大小写,默认为GET
"headers": {
"Content-Type": "text/plain"
}, //[选填][object],请求头部
"bodyType": "raw", //[选填][string],请求体类型
"body": "hello world",
"timelimit": 1000 //[选填],超时限制,单位为ms,超过时间则判断为请求失败,默认为1000ms
};
//执行请求,返回格式为{time:"请求时间",code:"HTTP状态码",response:"返回结果",header:"返回头部"},
var raw_api_demo_1_result = eo.execute(raw_api_demo_1);
//判断返回结果
if (raw_api_demo_1_result.response !== "") {
eo.info("info_1"); //输出信息
} else {
eo.info("info_2"); //输出信息
}`,
},
{
name: $localize``, //
caption: '',
value: '',
note: {
code: '',
desc: $localize``, //
input: [{ key: 'param_key', value: $localize`参数名` }], //
},
},
],
},
];
Expand Down

0 comments on commit b01c6d2

Please sign in to comment.