feat: add HTTP API

Postcatlab · Jul 14, 2022 · b01c6d2 · b01c6d2
1 parent ed9e761
commit b01c6d2
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 23 deletions.
diff --git a/src/workbench/browser/src/app/shared/components/api-script/api-script.component.html b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.html
@@ -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>
@@ -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>
diff --git a/src/workbench/browser/src/app/shared/components/api-script/api-script.component.ts b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.ts
@@ -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',
@@ -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();
   }
 

diff --git a/src/workbench/browser/src/app/shared/components/api-script/constant.ts b/src/workbench/browser/src/app/shared/components/api-script/constant.ts
@@ -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` }], // 新的请求路径
         },
       },
       {
@@ -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`参数名` }], //
+        },
+      },
     ],
   },
 ];