manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现swagger的代理请求和数据的格式化展示开发

Browse Source
This commit is contained in:
暮光：城中城
2021-11-06 22:55:10 +08:00
parent 339a29e739
commit 2f1770dcbc
12 changed files with 546 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue
View File

@@ -5,34 +5,46 @@
<a-button type="primary" :loading="requestLoading">发送请求</a-button>
</template>
</a-input-search>
<a-tabs v-model:activeKey="activePage" closable @tab-click="" style="padding: 5px 10px 0;">
<a-tabs v-model:activeKey="activePage" closable @tab-click="activePageChange" style="padding: 5px 10px 0;">
<a-tab-pane tab="URL参数" key="urlParam" forceRender>
<ParamTable ref="urlParamRef" :paramList="urlParamList"></ParamTable>
<div v-show="queryParamVisible">
<ParamTable ref="urlParamRef" :paramList="urlParamList"></ParamTable>
</div>
</a-tab-pane>
<a-tab-pane tab="请求参数" key="bodyParam" v-if="docInfoShow.method !== 'get'" forceRender>
<a-radio-group v-model:value="bodyParamType" style="margin-bottom: 5px;">
<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>
<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" :paramList="bodyRowParamList"></ParamBody>
<div v-show="queryParamVisible">
<a-radio-group v-model:value="bodyParamType" style="margin-bottom: 5px;">
<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>
<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" :paramList="bodyRowParamList"></ParamBody>
</div>
</div>
</a-tab-pane>
<a-tab-pane tab="Header参数" key="headerParam" forceRender>
<ParamTable ref="headerParamRef" :paramList="headerParamList"></ParamTable>
<div v-show="queryParamVisible">
<ParamTable ref="headerParamRef" :paramList="headerParamList"></ParamTable>
</div>
</a-tab-pane>
<a-tab-pane tab="Cookie参数" key="cookieParam" forceRender>
<ParamTable ref="cookieParamRef" :paramList="cookieParamList"></ParamTable>
<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>
<DocDebuggerResult :result="requestResult"></DocDebuggerResult>
</div>
@@ -47,7 +59,7 @@
import DocDebuggerResult from './DocDebuggerResult.vue'
import ParamTable from '../../../components/params/ParamTable.vue'
import ParamBody from '../../../components/params/ParamBody.vue'
import {CloseOutlined} from '@ant-design/icons-vue';
import {CloseOutlined, 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";
@@ -68,7 +80,7 @@
},
},
components: {
CloseOutlined, ParamTable, ParamBody, DocDebuggerResult,
VerticalAlignTopOutlined, VerticalAlignBottomOutlined, CloseOutlined, ParamTable, ParamBody, DocDebuggerResult,
},
setup(props) {
const store = useStore();
@@ -173,6 +185,7 @@
// });
let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value;
formData.append('url', url);
formData.append('host', urlDomain);
formData.append('method', props.docInfoShow.method);
formData.append('contentType', props.docInfoShow.consumes);
formData.append('headerParam', JSON.stringify(headerParamArr));
@@ -181,6 +194,7 @@
formData.append('formEncodeParam', JSON.stringify(formEncodeParamArr));
formData.append('bodyParam', bodyParamStr);
requestLoading.value = true;
requestResult.value = {};
zyplayerApi.requestUrl(formData).then(res => {
requestResult.value = res;
requestLoading.value = false;
@@ -188,9 +202,20 @@
requestLoading.value = false;
});
};
let queryParamVisible = ref(true);
const hideQueryParam = () => {
queryParamVisible.value = false;
}
const showQueryParam = () => {
queryParamVisible.value = true;
}
const activePageChange = () => {
queryParamVisible.value = true;
}
return {
docUrl,
activePage,
activePageChange,
requestLoading,
sendRequest,
requestResult,
@@ -223,6 +248,10 @@
{title: '类型', dataIndex: 'type', width: 250},
{title: '说明', dataIndex: 'description'},
],
// 界面控制
queryParamVisible,
hideQueryParam,
showQueryParam,
};
},
};

95
zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue
View File

@@ -1,10 +1,28 @@
<template>
<div>
<div style="margin-bottom: 30px;">
<a-tabs v-model:activeKey="activePage" closable @tab-click="" style="padding: 5px 10px 0;">
<a-tab-pane tab="Body" key="body" forceRender>
<template v-if="result.data && result.data.data">{{result.data.data}}</template>
<template v-else-if="result.data">{{result.data}}</template>
<template v-else>{{result}}</template>
<div style="margin-bottom: 10px;">
<a-radio-group v-model:value="bodyShowType" @change="bodyShowTypeChange" size="small">
<a-radio-button value="format">格式化</a-radio-button>
<a-radio-button value="row">原始值</a-radio-button>
<a-radio-button value="preview">预览</a-radio-button>
</a-radio-group>
<a-select v-if="bodyShowType === 'format'" placeholder="格式化" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;">
<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="text">TEXT</a-select-option>
</a-select>
</div>
<ace-editor v-if="bodyShowType === 'format'" v-model:value="resultDataContent" @init="resultDataInit" :lang="bodyShowFormatType" theme="monokai" width="100%" height="100" :options="resultDataConfig"></ace-editor>
<ace-editor v-else-if="bodyShowType === 'row'" v-model:value="resultDataContent" @init="resultDataInit" lang="text" theme="chrome" width="100%" height="100" :options="resultDataConfig"></ace-editor>
<div v-else-if="bodyShowType === 'preview'">
<template v-if="bodyShowFormatPreview === 'html'">
<iframe ref="previewHtmlRef" width="100%" height="570px" style="border: 0;"></iframe>
</template>
<template v-else>{{resultDataContent}}</template>
</div>
</a-tab-pane>
<a-tab-pane tab="Headers" key="headers" forceRender>
<a-table :dataSource="resultHeaders"
@@ -20,6 +38,9 @@
:scroll="{ y: '300px' }">
</a-table>
</a-tab-pane>
<template #rightExtra>
<span class="status-info-box">状态码：<span>{{resultData.status||'200'}}</span>耗时：<span>{{resultData.useTime||0}} ms</span>大小：<span>{{resultData.bodyLength||0}} B</span></span>
</template>
</a-tabs>
</div>
</template>
@@ -36,6 +57,7 @@
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
import {zyplayerApi} from "../../../api";
import aceEditor from "../../../assets/ace-editor";
export default {
props: {
@@ -45,17 +67,45 @@
},
},
components: {
CloseOutlined, ParamTable, ParamBody
CloseOutlined, ParamTable, ParamBody, aceEditor
},
setup(props) {
const { result } = toRefs(props);
let activePage = ref('body');
let bodyShowType = ref('format');
let bodyShowFormatType = ref('json');
let bodyShowFormatPreview = ref('');
let resultHeaders = ref([]);
let resultCookies = ref([]);
let resultDataContent = ref('');
let resultData = ref({});
let previewHtmlRef = ref();
const initData = () => {
if (props.result.data) {
resultData.value = props.result.data;
if (props.result.data.data) {
try {
let realData = JSON.parse(props.result.data.data);
resultDataContent.value = JSON.stringify(realData, null, 4);
} catch (e) {
resultDataContent.value = props.result.data.data;
}
} else {
resultDataContent.value = JSON.stringify(props.result.data, null, 4);
}
if (props.result.data.headers) {
resultHeaders.value = props.result.data.headers;
// 依据返回值header判断类型
let contentType = resultHeaders.value.find(item => item.name === 'Content-Type');
if (contentType && contentType.value) {
if (contentType.value.indexOf('text/html') >= 0) {
bodyShowFormatType.value = 'html';
bodyShowFormatPreview.value = 'html';
} else if (contentType.value.indexOf('json') >= 0) {
bodyShowFormatType.value = 'json';
bodyShowFormatPreview.value = 'json';
}
}
}
if (props.result.data.cookies) {
resultCookies.value = props.result.data.cookies;
@@ -64,8 +114,25 @@
};
initData();
watch(result, () => initData());
// 编辑器
const resultDataInit = editor => {
editor.setFontSize(16);
}
const bodyShowTypeChange = () => {
if (bodyShowType.value === 'preview') {
setTimeout(() => {
previewHtmlRef.value.contentDocument.write(resultDataContent.value);
}, 0);
}
}
return {
activePage,
bodyShowType,
bodyShowTypeChange,
bodyShowFormatType,
bodyShowFormatPreview,
previewHtmlRef,
resultData,
resultHeaders,
resultCookies,
resultHeadersColumns: [
@@ -76,7 +143,25 @@
{title: 'KEY', dataIndex: 'name'},
{title: 'VALUE', dataIndex: 'value'},
],
// 编辑器
resultDataInit,
resultDataContent,
resultDataConfig: {
wrap: true,
readOnly: true,
autoScrollEditorIntoView: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: 30,
maxLines: 30,
},
};
},
};
</script>
<style>
.status-info-box{color: #888;}
.status-info-box span{color: #00aa00; margin-right: 15px;}
.status-info-box span:last-child{margin-right: 0;}
</style>