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

各异常情况展示优化，增加独立的接口请求页面

Browse Source
This commit is contained in:
暮光：城中城
2021-11-14 23:05:24 +08:00
parent 4254f73603
commit 1ba75d3e29
11 changed files with 552 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
zyplayer-doc-data/src/main/java/com/zyplayer/doc/data/service/manage/impl/DbTableRelationServiceImpl.java
View File

@@ -1,24 +1,20 @@
package com.zyplayer.doc.data.service.manage.impl;
import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.sun.jersey.server.impl.wadl.WadlResource;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.zyplayer.doc.data.config.security.DocUserDetails;
import com.zyplayer.doc.data.config.security.DocUserUtil;
import com.zyplayer.doc.data.repository.manage.entity.DbTableRelation;
import com.zyplayer.doc.data.repository.manage.mapper.DbTableRelationMapper;
import com.zyplayer.doc.data.repository.manage.param.TableRelationParam;
import com.zyplayer.doc.data.repository.manage.vo.TableRelationVo;
import com.zyplayer.doc.data.service.manage.DbTableRelationService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.apache.commons.collections.CollectionUtils;
import org.apache.commons.lang.StringUtils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.*;
import java.util.Date;
import java.util.List;
/**
* <p>

10
zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/controller/vo/ProxyRequestResultVo.java
View File

@@ -8,7 +8,7 @@ public class ProxyRequestResultVo {
private List<HttpHeaderVo> headers;
private Integer status;
private Long useTime;
private Integer bodyLength;
private Integer contentLength;
private String data;
private String errorMsg;
@@ -60,11 +60,11 @@ public class ProxyRequestResultVo {
this.errorMsg = errorMsg;
}
public Integer getBodyLength() {
return bodyLength;
public Integer getContentLength() {
return contentLength;
}
public void setBodyLength(Integer bodyLength) {
this.bodyLength = bodyLength;
public void setContentLength(Integer contentLength) {
this.contentLength = contentLength;
}
}

2
zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/service/SwaggerHttpRequestService.java
View File

@@ -111,7 +111,7 @@ public class SwaggerHttpRequestService {
HttpResponse httpResponse = httpRequest.timeout(10000).execute();
resultVo.setData(httpResponse.body());
resultVo.setStatus(httpResponse.getStatus());
resultVo.setBodyLength(httpResponse.bodyBytes().length);
resultVo.setContentLength(httpResponse.bodyBytes().length);
// 设置返回的cookies
List<HttpCookie> responseCookies = httpResponse.getCookies();
if (CollectionUtils.isNotEmpty(responseCookies)) {

13
zyplayer-doc-ui/swagger-ui/src/components/layouts/PageLayout.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page-layout">
<a-tabs type="editable-card" hide-add v-model:activeKey="activePage" @tab-click="changePage" @edit="removePageTab" style="padding: 5px 10px 0;">
<a-tabs type="editable-card" v-model:activeKey="activePage" @tab-click="changePage" @edit="editPageTab" style="padding: 5px 10px 0;">
<a-tab-pane closable :tab="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" :fullPath="item.fullPath" :key="item.fullPath" v-for="item in pageList"/>
</a-tabs>
<div class="page-body">
@@ -26,6 +26,7 @@
ignoreParamPath: [
"/data/export",
],
apiRequestIndex: 1,
}
},
computed: {
@@ -69,6 +70,16 @@
editPage(key, action) {
this[action](key);
},
editPageTab(key, action) {
if (action === 'add') {
this.addPageTab();
} else {
this.removePageTab(key);
}
},
addPageTab() {
this.$router.push({path: '/doc/apiRequest', query: {id: this.apiRequestIndex++}});
},
removePageTab(key) {
if (this.pageList.length === 1) {
this.$message.warning('这是最后一页，不能再关闭了啦');

8
zyplayer-doc-ui/swagger-ui/src/components/params/ParamTable.vue
View File

@@ -31,12 +31,16 @@
<a-tag color="green" v-else>{{text||'-'}}</a-tag>
</template>
<template v-if="column.dataIndex === 'value'">
<a-select v-if="record.enum && record.type === 'array'" v-model:value="record.value" mode="multiple" :placeholder="record.description || '请选择'" style="width: 100%;">
<a-select v-if="record.enum && record.type === 'array'" v-model:value="record.value" mode="multiple" :placeholder="record.description || '请选择枚举值'" style="width: 100%;">
<a-select-option :value="enums" v-for="enums in record.enum">{{enums}}</a-select-option>
</a-select>
<a-select v-else-if="record.enum" v-model:value="record.value" :placeholder="record.description || '请选择'" style="width: 100%;">
<a-select v-else-if="record.enum" v-model:value="record.value" :placeholder="record.description || '请选择枚举值'" style="width: 100%;">
<a-select-option :value="enums" v-for="enums in record.enum">{{enums}}</a-select-option>
</a-select>
<a-select v-else-if="record.type==='boolean'" v-model:value="record.value" :placeholder="record.description || '请选择参数值'" style="width: 100%;">
<a-select-option value="true">TRUE</a-select-option>
<a-select-option value="false">FALSE</a-select-option>
</a-select>
<a-upload v-else-if="record.type==='file' || record.subType === 'file' || record.subType === 'MultipartFile'"
:file-list="record.value" name="file" :multiple="record.type === 'array'"
:before-upload="file=>{return beforeUpload(file, record)}"

8
zyplayer-doc-ui/swagger-ui/src/routes.js
View File

@@ -60,6 +60,14 @@ let routers = [
},
component: () => import('./views/doc/DocView.vue')
},
{
path: '/doc/apiRequest',
name: '接口请求',
meta: {
hidden: true,
},
component: () => import('./views/apiRequest/ApiRequest.vue')
},
]
},
]

215
zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequest.vue Normal file
View File

@@ -0,0 +1,215 @@
<template>
<div>
<a-input-search v-model:value="docUrl" @search="sendRequest">
<template #addonBefore>
<a-select v-model:value="docInfoShow.method" style="width: 100px;">
<a-select-option :value="method" v-for="method in methodList">{{method.toUpperCase()}}</a-select-option>
</a-select>
</template>
<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>
<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>
<a-tab-pane tab="Header参数" key="headerParam" forceRender>
<div v-show="queryParamVisible">
<ParamTable ref="headerParamRef" :paramList="headerParamList"></ParamTable>
</div>
</a-tab-pane>
<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>
</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 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 '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,
},
setup(props) {
let docUrl = ref('http://baidu.com');
let activePage = ref('urlParam');
const route = useRoute();
const store = useStore();
store.commit('addTableName', {key: route.fullPath, val: '接口请求' + route.query.id});
// URL参数处理
const urlParamRef = ref();
let urlParamList = ref([]);
// Header参数处理
const headerParamRef = ref();
let headerParamList = ref([]);
// cookie参数处理
const cookieParamRef = ref();
let cookieParamList = ref([]);
// form参数处理
const formParamRef= ref();
let formParamList = ref([]);
// form参数处理
const formEncodeParamRef = ref();
let formEncodeParamList = ref([]);
// body 参数
let bodyParamRef = ref();
let bodyParamType = ref('form');
let consumesParamType = ref('json');
let bodyRowParamList = ref({});
// 配置信息
let docInfoShow = ref({method: 'get'});
// 发送请求
let requestResult = ref({});
let requestLoading = ref(false);
const sendRequest = () => {
const formData = new FormData();
let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
return item.name + '=' + encodeURIComponent(item.value);
}).join('&');
let headerParamSelected = headerParamRef.value.getSelectedRowKeys();
let headerParamArr = headerParamList.value.filter(item => headerParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
return {code: item.name, value: item.value};
});
let cookieParamSelected = cookieParamRef.value.getSelectedRowKeys();
let cookieParamArr = cookieParamList.value.filter(item => cookieParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
return {code: item.name, value: item.value};
});
let formParamArr = [];
if (formParamRef.value) {
let formParamSelected = formParamRef.value.getSelectedRowKeys();
formParamArr = formParamList.value.filter(item => formParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
// todo 判断处理文件格式
return {code: item.name, value: item.value};
});
}
let formEncodeParamArr = [];
if (formEncodeParamRef.value) {
let formEncodeParamSelected = formEncodeParamRef.value.getSelectedRowKeys();
formEncodeParamArr = formEncodeParamList.value.filter(item => formEncodeParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
// todo 判断处理文件格式
return {code: item.name, value: item.value};
});
}
let bodyParamStr = '';
if (bodyParamRef.value) {
bodyParamStr = bodyParamRef.value.getParam();
}
let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value;
formData.append('url', url);
formData.append('host', '');
formData.append('method', docInfoShow.value.method);
formData.append('contentType', '');
formData.append('headerParam', JSON.stringify(headerParamArr));
formData.append('cookieParam', JSON.stringify(cookieParamArr));
formData.append('formParam', JSON.stringify(formParamArr));
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;
}).catch(e => {
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,
consumesParamType,
// url参数
urlParamRef,
urlParamList,
// header参数
headerParamRef,
headerParamList,
// cookie参数
cookieParamRef,
cookieParamList,
// form参数
formParamRef,
formParamList,
// form-encode参数
formEncodeParamRef,
formEncodeParamList,
// body参数
bodyParamRef,
bodyParamType,
bodyRowParamList,
// 界面控制
queryParamVisible,
docInfoShow,
hideQueryParam,
showQueryParam,
methodList: ["get", "post", "put", "patch", "head", "delete", "options", "trace"],
};
},
};
</script>

223
zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequestResult.vue Normal file
View File

@@ -0,0 +1,223 @@
<template>
<div v-if="result.data" style="margin-bottom: 30px;">
<div v-if="result.data.data" style="margin-bottom: 30px;">
<a-tabs v-model:activeKey="activePage" @tab-click="" style="padding: 5px 10px 0;">
<a-tab-pane tab="Body" key="body" forceRender>
<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'" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;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>
<ace-editor v-if="bodyShowType === 'format'" v-model:value="resultDataContentFormat" @init="resultDataInit" :lang="bodyShowFormatType" theme="monokai" width="100%" height="100" :options="resultDataConfig"></ace-editor>
<ace-editor v-else-if="bodyShowType === 'row'" v-model:value="resultDataContentOrigin" @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>{{resultDataContentOrigin}}</template>
</div>
</a-tab-pane>
<a-tab-pane tab="Headers" key="headers" forceRender>
<a-table :dataSource="resultHeaders"
:columns="resultHeadersColumns" size="small"
:pagination="false"
:scroll="{ y: '300px' }">
</a-table>
</a-tab-pane>
<a-tab-pane tab="Cookies" key="cookies" forceRender>
<a-table :dataSource="resultCookies"
:columns="resultCookiesColumns" size="small"
:pagination="false"
:scroll="{ y: '300px' }">
</a-table>
</a-tab-pane>
<template #rightExtra>
<span class="status-info-box">
状态码：<span>{{resultData.status||'200'}}</span>
耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
大小：<span>{{unitConvert.formatFileSize(resultData.contentLength||0)}}</span>
</span>
</template>
</a-tabs>
</div>
<div v-else>
<a-tabs style="padding: 5px 10px 0;">
<a-tab-pane tab="请求失败" key="body" forceRender>
<div style="color: #f00;">{{result.data.errorMsg}}</div>
</a-tab-pane>
<template #rightExtra>
<span class="status-info-box">
耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
</span>
</template>
</a-tabs>
</div>
</div>
<div v-else-if="loading" style="margin-top: 20px;">
<a-spin tip="请求执行中...">
<a-skeleton />
</a-spin>
</div>
<div v-else style="margin-top: 20px;color: #aaa;">
<a-empty description="点击 ‘发送请求’ 获取请求结果" />
</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 xmlFormatter from 'xml-formatter'
import ParamTable from '../../components/params/ParamTable.vue'
import ParamBody from '../../components/params/ParamBody.vue'
import {CloseOutlined} 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";
import aceEditor from "../../assets/ace-editor";
import unitConvert from "../../assets/utils/unitConvert.js";
export default {
props: {
result: {
type: Object,
required: true
},
loading: {
type: Boolean,
required: true
},
},
components: {
CloseOutlined, ParamTable, ParamBody, aceEditor
},
setup(props) {
const { result } = toRefs(props);
let activePage = ref('body');
let bodyShowType = ref('format');
// 格式化展示的类型，用户可以修改
let bodyShowFormatType = ref('json');
// 预览格式，依据返回值的content-type得出，不可修改
let bodyShowFormatPreview = ref('');
let resultHeaders = ref([]);
let resultCookies = ref([]);
let resultDataContentOrigin = ref('');
let resultDataContentFormat = ref('');
let resultData = ref({});
let previewHtmlRef = ref();
const bodyShowTypeChange = () => {
if (bodyShowType.value === 'preview') {
setTimeout(() => {
if (previewHtmlRef.value) {
previewHtmlRef.value.contentDocument.write(resultDataContentOrigin.value);
}
}, 0);
}
}
const initData = () => {
if (props.result.data) {
resultData.value = props.result.data;
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';
} else if (contentType.value.indexOf('text/plain') >= 0) {
bodyShowFormatType.value = 'text';
} else if (contentType.value.indexOf('application/json') >= 0) {
bodyShowFormatType.value = 'json';
} else if (contentType.value.indexOf('application/xml') >= 0 || contentType.value.indexOf('text/xml') >= 0) {
bodyShowFormatType.value = 'xml';
} else if (contentType.value.indexOf('application/javascript') >= 0) {
bodyShowFormatType.value = 'javascript';
}
bodyShowFormatPreview.value = bodyShowFormatType.value;
}
}
if (props.result.data.cookies) {
resultCookies.value = props.result.data.cookies;
}
if (props.result.data.data) {
resultDataContentOrigin.value = props.result.data.data;
resultDataContentFormat.value = props.result.data.data;
try {
if (bodyShowFormatType.value === 'xml') {
resultDataContentFormat.value = xmlFormatter(resultDataContentOrigin.value);
} else if (bodyShowFormatType.value === 'json') {
resultDataContentFormat.value = JSON.stringify(JSON.parse(resultDataContentOrigin.value), null, 4);
} else if (bodyShowFormatType.value === 'javascript') {
// TODO 暂未测试
resultDataContentFormat.value = JSON.stringify(resultDataContentOrigin.value, null, 4);
}
} catch (e) {
resultDataContentFormat.value = props.result.data.data;
}
} else {
let errorSuffix = '\n// 请求失败，以下为封装的返回值对象，仅供参考\n\n';
resultDataContentOrigin.value = errorSuffix + JSON.stringify(props.result.data);
resultDataContentFormat.value = errorSuffix + JSON.stringify(props.result.data, null, 4);
}
bodyShowTypeChange();
}
};
initData();
watch(result, () => initData());
// 编辑器
const resultDataInit = editor => {
editor.setFontSize(16);
}
return {
activePage,
bodyShowType,
bodyShowTypeChange,
unitConvert,
bodyShowFormatType,
bodyShowFormatPreview,
previewHtmlRef,
resultData,
resultHeaders,
resultCookies,
resultHeadersColumns: [
{title: 'KEY', dataIndex: 'name'},
{title: 'VALUE', dataIndex: 'value'},
],
resultCookiesColumns: [
{title: 'KEY', dataIndex: 'name'},
{title: 'VALUE', dataIndex: 'value'},
],
// 编辑器
resultDataInit,
resultDataContentOrigin,
resultDataContentFormat,
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>

2
zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocContent.vue
View File

@@ -2,7 +2,7 @@
<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>
<div class="markdown-body" v-html="docInfoShow.description" v-highlight></div>
</a-form-item>
<a-form-item label="请求方式">{{docInfoShow.method}}</a-form-item>
<a-form-item label="请求数据类型">{{docInfoShow.consumes}}</a-form-item>

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

@@ -11,7 +11,7 @@
<ParamTable ref="urlParamRef" :paramList="urlParamList"></ParamTable>
</div>
</a-tab-pane>
<a-tab-pane tab="请求参数" key="bodyParam" v-if="docInfoShow.method !== 'get'" forceRender>
<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">
@@ -55,7 +55,7 @@
<a-button v-else @click="showQueryParam" type="link">展开参数</a-button>
</template>
</a-tabs>
<DocDebuggerResult :result="requestResult"></DocDebuggerResult>
<DocDebuggerResult :result="requestResult" :loading="requestLoading"></DocDebuggerResult>
</div>
</template>

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

@@ -1,52 +1,74 @@
<template>
<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>
<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'" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;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>
<ace-editor v-if="bodyShowType === 'format'" v-model:value="resultDataContentFormat" @init="resultDataInit" :lang="bodyShowFormatType" theme="monokai" width="100%" height="100" :options="resultDataConfig"></ace-editor>
<ace-editor v-else-if="bodyShowType === 'row'" v-model:value="resultDataContentOrigin" @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>{{resultDataContentOrigin}}</template>
</div>
</a-tab-pane>
<a-tab-pane tab="Headers" key="headers" forceRender>
<a-table :dataSource="resultHeaders"
:columns="resultHeadersColumns" size="small"
:pagination="false"
:scroll="{ y: '300px' }">
</a-table>
</a-tab-pane>
<a-tab-pane tab="Cookies" key="cookies" forceRender>
<a-table :dataSource="resultCookies"
:columns="resultCookiesColumns" size="small"
:pagination="false"
:scroll="{ y: '300px' }">
</a-table>
</a-tab-pane>
<template #rightExtra>
<span class="status-info-box">
状态码：<span>{{resultData.status||'200'}}</span>
耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
大小：<span>{{unitConvert.formatFileSize(resultData.bodyLength||0)}}</span>
</span>
</template>
</a-tabs>
<div v-if="result.data" style="margin-bottom: 30px;">
<div v-if="result.data.data" style="margin-bottom: 30px;">
<a-tabs v-model:activeKey="activePage" @tab-click="" style="padding: 5px 10px 0;">
<a-tab-pane tab="Body" key="body" forceRender>
<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'" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;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>
<ace-editor v-if="bodyShowType === 'format'" v-model:value="resultDataContentFormat" @init="resultDataInit" :lang="bodyShowFormatType" theme="monokai" width="100%" height="100" :options="resultDataConfig"></ace-editor>
<ace-editor v-else-if="bodyShowType === 'row'" v-model:value="resultDataContentOrigin" @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>{{resultDataContentOrigin}}</template>
</div>
</a-tab-pane>
<a-tab-pane tab="Headers" key="headers" forceRender>
<a-table :dataSource="resultHeaders"
:columns="resultHeadersColumns" size="small"
:pagination="false"
:scroll="{ y: '300px' }">
</a-table>
</a-tab-pane>
<a-tab-pane tab="Cookies" key="cookies" forceRender>
<a-table :dataSource="resultCookies"
:columns="resultCookiesColumns" size="small"
:pagination="false"
:scroll="{ y: '300px' }">
</a-table>
</a-tab-pane>
<template #rightExtra>
<span class="status-info-box">
状态码：<span>{{resultData.status||'200'}}</span>
耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
大小：<span>{{unitConvert.formatFileSize(resultData.contentLength||0)}}</span>
</span>
</template>
</a-tabs>
</div>
<div v-else>
<a-tabs style="padding: 5px 10px 0;">
<a-tab-pane tab="请求失败" key="body" forceRender>
<div style="color: #f00;">{{result.data.errorMsg}}</div>
</a-tab-pane>
<template #rightExtra>
<span class="status-info-box">
耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
</span>
</template>
</a-tabs>
</div>
</div>
<div v-else-if="loading" style="margin-top: 20px;">
<a-spin tip="请求执行中...">
<a-skeleton />
</a-spin>
</div>
<div v-else style="margin-top: 20px;color: #aaa;">
<a-empty description="点击 ‘发送请求’ 获取请求结果" />
</div>
</template>
@@ -72,6 +94,10 @@
type: Object,
required: true
},
loading: {
type: Boolean,
required: true
},
},
components: {
CloseOutlined, ParamTable, ParamBody, aceEditor
@@ -109,6 +135,8 @@
if (contentType && contentType.value) {
if (contentType.value.indexOf('text/html') >= 0) {
bodyShowFormatType.value = 'html';
} else if (contentType.value.indexOf('text/plain') >= 0) {
bodyShowFormatType.value = 'text';
} else if (contentType.value.indexOf('application/json') >= 0) {
bodyShowFormatType.value = 'json';
} else if (contentType.value.indexOf('application/xml') >= 0 || contentType.value.indexOf('text/xml') >= 0) {