自建API开发

zyplayer-doc-api/src/main/java/com/zyplayer/doc/api/controller/ApiPoxyRequestController.java

@@ -49,12 +49,14 @@ public class ApiPoxyRequestController {
 	@ResponseBody
 	@PostMapping(value = "/request")
 	public ResponseJson<ProxyRequestResultVo> request(HttpServletRequest request, ProxyRequestParam requestParam) {
-		// 自建接口时保存信息
+		// 自建接口请求时保存信息
 		if (requestParam.getCustomRequestId() != null) {
 			ApiCustomRequest apiCustomRequest = new ApiCustomRequest();
 			apiCustomRequest.setId(requestParam.getCustomRequestId());
+			apiCustomRequest.setApiName(requestParam.getApiName());
 			apiCustomRequest.setDocId(requestParam.getDocId());
 			apiCustomRequest.setApiUrl(requestParam.getUrl());
+			apiCustomRequest.setMethod(requestParam.getMethod());
 			apiCustomRequest.setFormData(requestParam.getFormParam());
 			apiCustomRequest.setBodyData(requestParam.getBodyParam());
 			apiCustomRequest.setHeaderData(requestParam.getHeaderParam());

zyplayer-doc-api/src/main/java/com/zyplayer/doc/api/controller/param/ProxyRequestParam.java

@@ -22,6 +22,7 @@ public class ProxyRequestParam {
 	private String formParam;
 	private String formEncodeParam;
 	private String bodyParam;
+	private String apiName;
 	
 	public List<ParamData> getHeaderParamData() {
 		return JSON.parseArray(headerParam, ParamData.class);
@@ -126,4 +127,12 @@ public class ProxyRequestParam {
 	public void setDocId(Long docId) {
 		this.docId = docId;
 	}
+	
+	public String getApiName() {
+		return apiName;
+	}
+	
+	public void setApiName(String apiName) {
+		this.apiName = apiName;
+	}
 }

zyplayer-doc-ui/api-ui/package.json

@@ -8,26 +8,26 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.0.1",
-    "ant-design-vue": "^3.0.0-alpha.14",
+    "ant-design-vue": "^3.0.0-beta.6",
     "axios": "^0.19.2",
     "brace": "^0.11.1",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.4.0",
     "jsontoxml": "^1.0.1",
     "less": "^2.7.3",
     "less-loader": "^4.1.0",
     "mavon-editor": "^3.0.0-beta",
     "moment": "^2.29.1",
-    "qs": "^6.10.1",
+    "qs": "^6.10.3",
-    "sass": "^1.44.0",
+    "sass": "^1.48.0",
-    "vue": "^3.2.23",
+    "vue": "^3.2.26",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2",
-    "xml-formatter": "^2.5.1"
+    "xml-formatter": "^2.6.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.10.1",
+    "@vitejs/plugin-vue": "^1.10.2",
-    "@vue/compiler-sfc": "^3.2.23",
+    "@vue/compiler-sfc": "^3.2.26",
-    "vite": "^2.6.14",
+    "vite": "^2.7.12",
-    "vite-plugin-style-import": "^1.4.0"
+    "vite-plugin-style-import": "^1.4.1"
   }
 }

zyplayer-doc-ui/api-ui/src/components/layouts/doc-tree/CustomRequest.vue

@@ -125,7 +125,6 @@
 				        let queryInfo = {
 					        id: choiceDocId,
 					        requestId: requestSaved.id,
-					        folderId: requestSaved.folderId,
 				        };
 				        router.push({path: '/custom/request', query: queryInfo});
 			        });

zyplayer-doc-ui/api-ui/src/views/customRequest/ApiRequest.vue

@@ -1,67 +1,73 @@
 <template>
-    <div>
+	<div class="api-name-box">
-        <a-input-search v-model:value="docInfoShow.apiUrl" @search="sendRequest" placeholder="请输入目标URL地址">
+		<a-row type="flex">
-            <template #addonBefore>
+			<a-col flex="auto"><a-input v-model:value="docInfoShow.apiName" :bordered="false" placeholder="请输入接口名称" /></a-col>
-                <a-select v-model:value="docInfoShow.method" style="width: 100px;">
+			<a-col flex="88px">
-                    <a-select-option :value="method" v-for="method in methodList">{{method.toUpperCase()}}</a-select-option>
+				<a-button @click="saveCustomRequest" type="dashed"><save-outlined /> 保存</a-button>
-                </a-select>
+			</a-col>
-            </template>
+		</a-row>
-            <template #enterButton>
+	</div>
-                <a-button type="primary" :loading="requestLoading">发送请求</a-button>
+    <a-input-search v-model:value="docInfoShow.apiUrl" @search="sendRequest" placeholder="请输入目标URL地址">
-            </template>
+        <template #addonBefore>
-        </a-input-search>
+            <a-select v-model:value="docInfoShow.method" style="width: 100px;">
-        <a-tabs v-model:activeKey="activePage" closable @tab-click="activePageChange" style="padding: 5px 10px 0;">
+                <a-select-option :value="method" v-for="method in methodList">{{method.toUpperCase()}}</a-select-option>
-            <a-tab-pane tab="URL参数" key="urlParam" forceRender>
+            </a-select>
-                <div v-show="queryParamVisible">
+        </template>
-                    <ParamTable ref="urlParamRef" :paramList="urlParamList"></ParamTable>
+        <template #enterButton>
+            <a-button type="primary" :loading="requestLoading">发送请求</a-button>
+        </template>
+    </a-input-search>
+    <a-tabs v-model:activeKey="activePage" closable @tab-click="activePageChange" style="padding: 5px 10px 0;">
+        <a-tab-pane tab="URL参数" key="urlParam" forceRender>
+            <div v-show="queryParamVisible">
+                <ParamTable ref="urlParamRef" :paramList="urlParamList"></ParamTable>
+            </div>
+        </a-tab-pane>
+        <a-tab-pane tab="Body参数" key="bodyParam" v-if="docInfoShow.method !== 'get'" forceRender>
+            <div v-show="queryParamVisible">
+                <div style="margin-bottom: 6px;">
+                    <a-radio-group v-model:value="bodyParamType">
+                        <a-radio value="none">none</a-radio>
+                        <a-radio value="form">form-data</a-radio>
+                        <a-radio value="formUrlEncode">x-www-form-urlencoded</a-radio>
+                        <a-radio value="row">row</a-radio>
+                        <a-radio value="binary">binary</a-radio>
+                    </a-radio-group>
+                    <a-select v-if="bodyParamType === 'row'" v-model:value="consumesParamType" size="small" style="margin-left: 10px;vertical-align: top;width: 100px;">
+                        <a-select-option value="json">JSON</a-select-option>
+                        <a-select-option value="html">HTML</a-select-option>
+                        <a-select-option value="xml">XML</a-select-option>
+                        <a-select-option value="javascript">JavaScript</a-select-option>
+                        <a-select-option value="text">TEXT</a-select-option>
+                    </a-select>
                 </div>
-            </a-tab-pane>
+                <div v-show="bodyParamType === 'form'">
-            <a-tab-pane tab="Body参数" key="bodyParam" v-if="docInfoShow.method !== 'get'" forceRender>
+                    <ParamTable ref="formParamRef" :paramList="formParamList" showType></ParamTable>
-                <div v-show="queryParamVisible">
-                    <div style="margin-bottom: 6px;">
-                        <a-radio-group v-model:value="bodyParamType">
-                            <a-radio value="none">none</a-radio>
-                            <a-radio value="form">form-data</a-radio>
-                            <a-radio value="formUrlEncode">x-www-form-urlencoded</a-radio>
-                            <a-radio value="row">row</a-radio>
-                            <a-radio value="binary">binary</a-radio>
-                        </a-radio-group>
-                        <a-select v-if="bodyParamType === 'row'" v-model:value="consumesParamType" size="small" style="margin-left: 10px;vertical-align: top;width: 100px;">
-                            <a-select-option value="json">JSON</a-select-option>
-                            <a-select-option value="html">HTML</a-select-option>
-                            <a-select-option value="xml">XML</a-select-option>
-                            <a-select-option value="javascript">JavaScript</a-select-option>
-                            <a-select-option value="text">TEXT</a-select-option>
-                        </a-select>
-                    </div>
-                    <div v-show="bodyParamType === 'form'">
-                        <ParamTable ref="formParamRef" :paramList="formParamList" showType></ParamTable>
-                    </div>
-                    <div v-show="bodyParamType === 'formUrlEncode'">
-                        <ParamTable ref="formEncodeParamRef" :paramList="formEncodeParamList"></ParamTable>
-                    </div>
-                    <div v-show="bodyParamType === 'row'">
-                        <ParamBody ref="bodyParamRef" :rowLang="consumesParamType" :paramList="bodyRowParamList"></ParamBody>
-                    </div>
                 </div>
-            </a-tab-pane>
+                <div v-show="bodyParamType === 'formUrlEncode'">
-            <a-tab-pane tab="Header参数" key="headerParam" forceRender>
+                    <ParamTable ref="formEncodeParamRef" :paramList="formEncodeParamList"></ParamTable>
-                <div v-show="queryParamVisible">
-                    <ParamTable ref="headerParamRef" :paramList="headerParamList"></ParamTable>
                 </div>
-            </a-tab-pane>
+                <div v-show="bodyParamType === 'row'">
-            <a-tab-pane tab="Cookie参数" key="cookieParam" forceRender>
+                    <ParamBody ref="bodyParamRef" :rowLang="consumesParamType" :paramList="bodyRowParamList"></ParamBody>
-                <div v-show="queryParamVisible">
-                    <ParamTable ref="cookieParamRef" :paramList="cookieParamList"></ParamTable>
                 </div>
-            </a-tab-pane>
+            </div>
-            <template #rightExtra>
+        </a-tab-pane>
-                <a-button v-if="queryParamVisible" @click="hideQueryParam" type="link">收起参数</a-button>
+        <a-tab-pane tab="Header参数" key="headerParam" forceRender>
-                <a-button v-else @click="showQueryParam" type="link">展开参数</a-button>
+            <div v-show="queryParamVisible">
-            </template>
+                <ParamTable ref="headerParamRef" :paramList="headerParamList"></ParamTable>
-        </a-tabs>
+            </div>
-        <ApiRequestResult :result="requestResult" :loading="requestLoading"></ApiRequestResult>
+        </a-tab-pane>
-    </div>
+        <a-tab-pane tab="Cookie参数" key="cookieParam" forceRender>
+            <div v-show="queryParamVisible">
+                <ParamTable ref="cookieParamRef" :paramList="cookieParamList"></ParamTable>
+            </div>
+        </a-tab-pane>
+        <template #rightExtra>
+            <a-button v-if="queryParamVisible" @click="hideQueryParam" type="link">收起参数</a-button>
+            <a-button v-else @click="showQueryParam" type="link">展开参数</a-button>
+        </template>
+    </a-tabs>
+    <ApiRequestResult :result="requestResult" :loading="requestLoading"></ApiRequestResult>
 </template>
 
 <script>
@@ -73,14 +79,14 @@
     import ApiRequestResult from './ApiRequestResult.vue'
     import ParamTable from '../../components/params/ParamTable.vue'
     import ParamBody from '../../components/params/ParamBody.vue'
-    import {CloseOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined} from '@ant-design/icons-vue';
+    import {CloseOutlined, SaveOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined} from '@ant-design/icons-vue';
     import 'mavon-editor/dist/markdown/github-markdown.min.css'
     import 'mavon-editor/dist/css/index.css'
     import {zyplayerApi} from "../../api";
 
     export default {
         components: {
-            VerticalAlignTopOutlined, VerticalAlignBottomOutlined, CloseOutlined, ParamTable, ParamBody, ApiRequestResult,
+            VerticalAlignTopOutlined, VerticalAlignBottomOutlined, CloseOutlined, SaveOutlined, ParamTable, ParamBody, ApiRequestResult,
         },
 	    setup(props) {
             let activePage = ref('urlParam');
@@ -158,6 +164,7 @@
                 formData.append('method', docInfoShow.value.method);
                 formData.append('contentType', '');
 	            formData.append('docId', queryParam.docId);
+	            formData.append('apiName', docInfoShow.value.apiName);
 	            formData.append('customRequestId', queryParam.requestId);
 	            formData.append('headerParam', JSON.stringify(headerParamArr));
                 formData.append('cookieParam', JSON.stringify(cookieParamArr));
@@ -225,11 +232,18 @@
 			    });
 			    formParamList.value = formParamListProp;
 		    });
+			// 保存请求内容
+		    const saveCustomRequest = () => {
+			    zyplayerApi.apiCustomRequestAdd(docInfoShow.value).then(res => {
+				    message.success('保存成功');
+			    });
+		    }
             return {
                 activePage,
                 activePageChange,
                 requestLoading,
                 sendRequest,
+	            saveCustomRequest,
                 requestResult,
                 consumesParamType,
                 // url参数
@@ -261,3 +275,8 @@
         },
     };
 </script>
+
+<style>
+.api-name-box{padding-bottom: 10px;}
+</style>
+

zyplayer-doc-ui/api-ui/src/views/manage/components/EditDocBaseInfo.vue

@@ -9,9 +9,7 @@
                 <a-radio :value="2">Swagger JSON</a-radio>
                 <a-radio :value="3">OpenApi URL</a-radio>
                 <a-radio :value="4">OpenApi JSON</a-radio>
-	            <a-tooltip title="即将上线，敬请期待">
+	            <a-radio :value="5">自建API</a-radio>
-		            <a-radio :value="5" disabled>自建API</a-radio>
-	            </a-tooltip>
             </a-radio-group>
         </a-form-item>
         <a-form-item label="文档地址" required name="docUrl" v-if="docEdit.docType === 1">