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-10-31 23:48:55 +08:00
parent 9fcdfb7758
commit 7b4c1ae455
18 changed files with 383 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
zyplayer-doc-ui/swagger-ui/src/assets/utils/SwaggerAnalysisV2.js
View File

@@ -18,6 +18,7 @@ export default {
let description = parameter.description || '';
let type = parameter.type;
let format = parameter.format;
let example = parameter['x-example'];
let subType = undefined;
let children = undefined;
let additional = undefined;
@@ -83,6 +84,10 @@ export default {
this.logMessage('003', type, parameter);
}
}
if (example) {
description = description ? (description + '，') : '';
description += '例：' + example;
}
if (parameter.enum && parameter.enum.length > 0) {
description = description || '枚举类型';
description += '，可选值：' + parameter.enum.join('、');
@@ -96,6 +101,7 @@ export default {
required: parameter.required ? '是' : '否',
format: format,
enum: parameter.enum,
example: example,
collectionFormat: parameter.collectionFormat,// 枚举多选时=multi
description: description,
additional: additional,
@@ -149,6 +155,7 @@ export default {
let type = parameter.type;
let format = parameter.format;
let description = parameter.description || '';
let example = parameter['x-example'];
let subType = undefined;
let additional = undefined;
let enums = undefined;
@@ -190,6 +197,10 @@ export default {
this.logMessage('006', type, parameter);
}
}
if (example) {
description = description ? (description + '，') : '';
description += '例：' + example;
}
if (parameter.items && parameter.items.enum && parameter.items.enum.length > 0) {
enums = parameter.items.enum;
description = description || '枚举类型';
@@ -204,6 +215,7 @@ export default {
description: description,
enum: enums,
additional: additional,
example: example,
children: children,
});
indexSub++;

6
zyplayer-doc-ui/swagger-ui/src/store/TreeViewByTag.js
View File

@@ -83,7 +83,9 @@ export function getTreeDataForTag(swagger, pathData, keywords, metaInfo) {
});
indexUrl++;
});
treeData.push({title: tag.name, key: indexTag, children: urlTree});
if (urlTree.length > 0) {
treeData.push({title: tag.name, key: indexTag, children: urlTree});
}
indexTag++;
});
return [
@@ -105,6 +107,6 @@ function searchInPathMethods(url, methodNode, keywords) {
if (url.indexOf(keywords) >= 0) {
return true;
}
let searchData = methodNode.path + methodNode.summary + methodNode.description + methodNode.tags;
let searchData = methodNode.path + methodNode.method + methodNode.summary + methodNode.description + methodNode.tags;
return (searchData && searchData.toLowerCase().indexOf(keywords) >= 0);
}

97
zyplayer-doc-ui/swagger-ui/src/views/doc/DocView.vue
View File

@@ -1,67 +1,17 @@
<template>
<a-tabs v-model:activeKey="activePage" closable @tab-click="changePage" style="padding: 5px 10px 0;">
<a-tab-pane tab="接口说明" key="doc">
<a-form :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-item label="接口地址">{{docInfoShow.url}}</a-form-item>
<a-form-item label="说明">
<a-card size=small><div class="markdown-body" v-html="docInfoShow.description" v-highlight></div></a-card>
</a-form-item>
<a-form-item label="请求方式">{{docInfoShow.method}}</a-form-item>
<a-form-item label="请求数据类型">{{docInfoShow.consumes}}</a-form-item>
<a-form-item label="响应数据类型">{{docInfoShow.produces}}</a-form-item>
<a-form-item label="请求参数">
<a-table :dataSource="requestParamList" :columns="requestParamListColumns" size="small" :pagination="false" defaultExpandAllRows>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'type'">
{{text}}
<template v-if="record.subType">[{{record.subType}}]</template>
<template v-if="record.format">({{record.format}})</template>
</template>
<template v-if="column.dataIndex === 'in'">
<a-tag color="pink" v-if="text === 'header'">header</a-tag>
<a-tag color="red" v-else-if="text === 'body'">body</a-tag>
<a-tag color="orange" v-else-if="text === 'query'">query</a-tag>
<a-tag color="green" v-else-if="text === 'formData'">formData</a-tag>
<template v-else-if="!text">-</template>
<a-tag color="purple" v-else>{{text}}</a-tag>
</template>
<template v-if="column.dataIndex === 'required'">
<span v-if="text === '是'" style="color: #f00;">是</span>
<template v-else-if="text === '否'">否</template>
<template v-else>-</template>
</template>
</template>
</a-table>
</a-form-item>
<a-form-item label="返回结果">
<a-table :dataSource="responseParamList" :columns="responseCodeListColumns" size="small" :pagination="false" defaultExpandAllRows>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'desc'">
<div v-html="text"></div>
</template>
</template>
<template #expandedRowRender="{ record }">
<template v-if="record.schemas">
<a-table :dataSource="record.schemas" :columns="responseParamListColumns" size="small" :pagination="false" defaultExpandAllRows>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'type'">
{{text}}
<template v-if="record.subType">[{{record.subType}}]</template>
<template v-if="record.format">({{record.format}})</template>
</template>
</template>
</a-table>
</template>
<div v-else style="text-align: center;padding: 10px 0;">无参数说明</div>
</template>
</a-table>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane tab="在线调试" key="debug">
暂未开放
</a-tab-pane>
</a-tabs>
<template v-if="isLoadSuccess">
<a-tabs v-model:activeKey="activePage" closable @tab-click="changePage" style="padding: 5px 10px 0;">
<a-tab-pane tab="接口说明" key="doc">
<DocContent :docInfoShow="docInfoShow" :requestParamList="requestParamList" :responseParamList="responseParamList"></DocContent>
</a-tab-pane>
<a-tab-pane tab="在线调试" key="debug">
<DocDebugger :docInfoShow="docInfoShow" :requestParamList="requestParamList" :responseParamList="responseParamList"></DocDebugger>
</a-tab-pane>
</a-tabs>
</template>
<a-spin v-else tip="文档数据加载中...">
<div style="padding: 20px 0;height: 100px;"></div>
</a-spin>
</template>
<script>
@@ -71,11 +21,14 @@
import { message } from 'ant-design-vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import swaggerAnalysis from '../../assets/utils/SwaggerAnalysisV2'
import DocContent from './docView/DocContent.vue'
import DocDebugger from './docView/DocDebugger.vue'
import {markdownIt} from 'mavon-editor'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
export default {
components: { DocContent, DocDebugger },
setup() {
const route = useRoute();
const store = useStore();
@@ -147,25 +100,9 @@
docInfoShow,
activePage,
changePage,
isLoadSuccess,
requestParamList,
requestParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 200},
{title: '类型', dataIndex: 'type', width: 150},
{title: '参数位置', dataIndex: 'in', width: 100},
{title: '必填', dataIndex: 'required', width: 60},
{title: '说明', dataIndex: 'description'},
],
responseParamList,
responseCodeListColumns: [
{title: '状态码', dataIndex: 'code', width: 100},
{title: '类型', dataIndex: 'type', width: 250},
{title: '说明', dataIndex: 'desc'},
],
responseParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 250},
{title: '类型', dataIndex: 'type', width: 250},
{title: '说明', dataIndex: 'description'},
],
};
},
};

109
zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocContent.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<a-form :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-item label="接口地址">{{docInfoShow.url}}</a-form-item>
<a-form-item label="说明">
<a-card size=small><div class="markdown-body" v-html="docInfoShow.description" v-highlight></div></a-card>
</a-form-item>
<a-form-item label="请求方式">{{docInfoShow.method}}</a-form-item>
<a-form-item label="请求数据类型">{{docInfoShow.consumes}}</a-form-item>
<a-form-item label="响应数据类型">{{docInfoShow.produces}}</a-form-item>
<a-form-item label="请求参数">
<a-table :dataSource="requestParamList" :columns="requestParamListColumns" size="small" :pagination="false" defaultExpandAllRows>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'type'">
{{text}}
<template v-if="record.subType">[{{record.subType}}]</template>
<template v-if="record.format">({{record.format}})</template>
</template>
<template v-if="column.dataIndex === 'in'">
<a-tag color="pink" v-if="text === 'header'">header</a-tag>
<a-tag color="red" v-else-if="text === 'body'">body</a-tag>
<a-tag color="orange" v-else-if="text === 'query'">query</a-tag>
<a-tag color="green" v-else-if="text === 'formData'">formData</a-tag>
<template v-else-if="!text">-</template>
<a-tag color="purple" v-else>{{text}}</a-tag>
</template>
<template v-if="column.dataIndex === 'required'">
<span v-if="text === '是'" style="color: #f00;">是</span>
<template v-else-if="text === '否'">否</template>
<template v-else>-</template>
</template>
<template v-if="column.dataIndex === 'description'">
{{text}}
</template>
</template>
</a-table>
</a-form-item>
<a-form-item label="返回结果">
<a-table :dataSource="responseParamList" :columns="responseCodeListColumns" size="small" :pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'desc'">
<div v-html="text"></div>
</template>
</template>
<template #expandedRowRender="{ record }">
<template v-if="record.schemas">
<a-table :dataSource="record.schemas" :columns="responseParamListColumns" size="small" :pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'type'">
{{text}}
<template v-if="record.subType">[{{record.subType}}]</template>
<template v-if="record.format">({{record.format}})</template>
</template>
</template>
</a-table>
</template>
<div v-else style="text-align: center;padding: 10px 0;">无参数说明</div>
</template>
</a-table>
</a-form-item>
</a-form>
</template>
<script>
import {toRefs, ref, reactive, onMounted, watch} from 'vue';
import { useRouter, useRoute } from "vue-router";
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import {markdownIt} from 'mavon-editor'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
export default {
props: {
docInfoShow: {
type: Object,
required: true
},
requestParamList: {
type: Array,
required: true
},
responseParamList: {
type: Array,
required: true
},
},
setup() {
return {
requestParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 200},
{title: '类型', dataIndex: 'type', width: 150},
{title: '参数位置', dataIndex: 'in', width: 100},
{title: '必填', dataIndex: 'required', width: 60},
{title: '说明', dataIndex: 'description'},
],
responseCodeListColumns: [
{title: '状态码', dataIndex: 'code', width: 100},
{title: '类型', dataIndex: 'type', width: 250},
{title: '说明', dataIndex: 'desc'},
],
responseParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 250},
{title: '类型', dataIndex: 'type', width: 250},
{title: '说明', dataIndex: 'description'},
],
};
},
};
</script>

230
zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue Normal file
View File

@@ -0,0 +1,230 @@
<template>
<div>
<a-input-search
:addon-before="docInfoShow.method.toUpperCase()"
v-model:value="docUrl"
enter-button="发送请求"
@search="sendRequest"
/>
<a-tabs v-model:activeKey="activePage" closable @tab-click="" style="padding: 5px 10px 0;">
<a-tab-pane tab="URL参数" key="urlParam">
<a-table :row-selection="{ selectedRowKeys: urlParamSelectedRowKeys, onChange: urlParamRowSelectionChange }" :dataSource="urlParamList" :columns="urlParamListColumns" size="small" :pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'name'">
<a-input placeholder="请输入参数名" v-model:value="record.name" @change="urlParamChange(record)"></a-input>
</template>
<template v-if="column.dataIndex === 'value'">
<a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="urlParamChange(record)"></a-input>
</template>
<template v-if="column.dataIndex === 'action'">
<CloseOutlined v-if="!record.isLastRow" @click="urlParamRemove(record)" style="cursor: pointer;"/>
</template>
</template>
</a-table>
</a-tab-pane>
<a-tab-pane tab="请求参数" key="bodyParam">
<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-tab-pane>
<a-tab-pane tab="Header参数" key="headerParam">
<a-table :row-selection="{ selectedRowKeys: headerParamSelectedRowKeys, onChange: headerParamRowSelectionChange }" :dataSource="headerParamList" :columns="headerParamListColumns" size="small" :pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'name'">
<a-input placeholder="请输入参数名" v-model:value="record.name" @change="headerParamChange(record)"></a-input>
</template>
<template v-if="column.dataIndex === 'value'">
<a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="headerParamChange(record)"></a-input>
</template>
<template v-if="column.dataIndex === 'action'">
<CloseOutlined v-if="!record.isLastRow" @click="headerParamRemove(record)" style="cursor: pointer;"/>
</template>
</template>
</a-table>
</a-tab-pane>
<a-tab-pane tab="Cookie参数" key="cookieParam">
<a-table :row-selection="{ selectedRowKeys: cookieParamSelectedRowKeys, onChange: cookieParamRowSelectionChange }" :dataSource="cookieParamList" :columns="cookieParamListColumns" size="small" :pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'name'">
<a-input placeholder="请输入参数名" v-model:value="record.name" @change="cookieParamChange(record)"></a-input>
</template>
<template v-if="column.dataIndex === 'value'">
<a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="cookieParamChange(record)"></a-input>
</template>
<template v-if="column.dataIndex === 'action'">
<CloseOutlined v-if="!record.isLastRow" @click="cookieParamRemove(record)" style="cursor: pointer;"/>
</template>
</template>
</a-table>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script>
import {toRefs, ref, reactive, onMounted, watch} from 'vue';
import { useRouter, useRoute } from "vue-router";
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import {markdownIt} from 'mavon-editor'
import {CloseOutlined} from '@ant-design/icons-vue';
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
export default {
props: {
docInfoShow: {
type: Object,
required: true
},
requestParamList: {
type: Array,
required: true
},
responseParamList: {
type: Array,
required: true
},
},
components: {
CloseOutlined
},
setup(props) {
let docUrl = ref(props.docInfoShow.url);
let activePage = ref('urlParam');
let paramKeyIndex = 10000;
// URL参数处理
let urlParamListProp = props.requestParamList.filter(item => item.in === 'query');
urlParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
let urlParamSelectedRowKeys = ref([]);
urlParamListProp.forEach(item => {
item.value = item.example || '';
urlParamSelectedRowKeys.value.push(item.key);
});
let urlParamList = ref(JSON.parse(JSON.stringify(urlParamListProp)));
const urlParamRowSelectionChange = (selectedRowKeys, selectedRows) => {
urlParamSelectedRowKeys.value = selectedRowKeys;
};
const urlParamChange = (record) => {
if (record.isLastRow) {
record.isLastRow = false;
urlParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
urlParamSelectedRowKeys.value.push(paramKeyIndex);
}
};
const urlParamRemove = (record) => {
if (!record.isLastRow) {
urlParamList.value = urlParamList.value.filter(item => item != record);
}
};
// Header参数处理
let headerParamListProp = props.requestParamList.filter(item => item.in === 'query');
headerParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
let headerParamSelectedRowKeys = ref([]);
headerParamListProp.forEach(item => {
item.value = item.example || '';
headerParamSelectedRowKeys.value.push(item.key);
});
let headerParamList = ref(JSON.parse(JSON.stringify(headerParamListProp)));
const headerParamRowSelectionChange = (selectedRowKeys, selectedRows) => {
headerParamSelectedRowKeys.value = selectedRowKeys;
};
const headerParamChange = (record) => {
if (record.isLastRow) {
record.isLastRow = false;
headerParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
headerParamSelectedRowKeys.value.push(paramKeyIndex);
}
};
const headerParamRemove = (record) => {
if (!record.isLastRow) {
headerParamList.value = headerParamList.value.filter(item => item != record);
}
};
// cookie参数处理
let cookieParamListProp = props.requestParamList.filter(item => item.in === 'query');
cookieParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
let cookieParamSelectedRowKeys = ref([]);
cookieParamListProp.forEach(item => {
item.value = item.example || '';
cookieParamSelectedRowKeys.value.push(item.key);
});
let cookieParamList = ref(JSON.parse(JSON.stringify(cookieParamListProp)));
const cookieParamRowSelectionChange = (selectedRowKeys, selectedRows) => {
cookieParamSelectedRowKeys.value = selectedRowKeys;
};
const cookieParamChange = (record) => {
if (record.isLastRow) {
record.isLastRow = false;
cookieParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
cookieParamSelectedRowKeys.value.push(paramKeyIndex);
}
};
const cookieParamRemove = (record) => {
if (!record.isLastRow) {
cookieParamList.value = cookieParamList.value.filter(item => item != record);
}
};
// body 参数
let bodyParamType = ref('form');
// 发送请求
const sendRequest = () => {
message.info('暂未开放此功能，敬请期待');
};
return {
docUrl,
activePage,
sendRequest,
// url参数
urlParamList,
urlParamSelectedRowKeys,
urlParamRowSelectionChange,
urlParamChange,
urlParamRemove,
urlParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 250},
{title: '参数值', dataIndex: 'value'},
{title: '', dataIndex: 'action', width: 40},
],
// header参数
headerParamList,
headerParamSelectedRowKeys,
headerParamRowSelectionChange,
headerParamChange,
headerParamRemove,
headerParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 250},
{title: '参数值', dataIndex: 'value'},
{title: '', dataIndex: 'action', width: 40},
],
// cookie参数
cookieParamList,
cookieParamSelectedRowKeys,
cookieParamRowSelectionChange,
cookieParamChange,
cookieParamRemove,
cookieParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 250},
{title: '参数值', dataIndex: 'value'},
{title: '', dataIndex: 'action', width: 40},
],
// body参数
bodyParamType,
responseCodeListColumns: [
{title: '状态码', dataIndex: 'code', width: 100},
{title: '类型', dataIndex: 'type', width: 250},
{title: '说明', dataIndex: 'desc'},
],
responseParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 250},
{title: '类型', dataIndex: 'type', width: 250},
{title: '说明', dataIndex: 'description'},
],
};
},
};
</script>