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-03 23:23:29 +08:00
parent e99fe3bf65
commit 4487c138b2
13 changed files with 517 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
zyplayer-doc-ui/swagger-ui/src/api/zyplayer.js
View File

@@ -9,5 +9,6 @@ export const zyplayerApi = {
swaggerDocUpdate: data => apiClient({url: '/doc-swagger/doc/update', method: 'post', data: data}),
docSwaggerGlobalParamList: data => apiClient({url: '/doc-swagger/global-param/list', method: 'post', data: data}),
docSwaggerGlobalParamUpdate: data => apiClient({url: '/doc-swagger/global-param/update', method: 'post', data: data}),
requestUrl: data => apiClient({url: '/doc-swagger/proxy/query', method: 'post', data: data}),
};

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

@@ -26,7 +26,7 @@ export default {
// 解析parameter.items.$ref 或 parameter.items.originalRef {$ref: "#/definitions/Model", originalRef: "Model"}
// 解析parameter.items.type {type: 'file'}
if (this.isSchemaRef(parameter.items)) {
subType = this.getSchemaRef(parameter.schema);
subType = this.getSchemaRef(parameter.items);
children = this.getParamDefinitions(subType, definitionsDataMap, indexKey, {}, 0);
} else if (parameter.schema) {
if (this.isSchemaRef(parameter.schema.items)) {

2
zyplayer-doc-ui/swagger-ui/src/components/layouts/HeaderAvatar.vue
View File

@@ -8,7 +8,7 @@
<a-menu-item @click="showConsole" key="1">控制台</a-menu-item>
<a-menu-divider />
<a-menu-item @click="showAbout" key="2">关于</a-menu-item>
<a-menu-item @click="showMyInfo" key="3">我的资料</a-menu-item>
<!-- <a-menu-item @click="showMyInfo" key="3">我的资料</a-menu-item>-->
<a-menu-item @click="userSignOut" key="4">退出登录</a-menu-item>
</a-menu>
</template>

18
zyplayer-doc-ui/swagger-ui/src/components/layouts/MenuLayout.vue
View File

@@ -80,11 +80,6 @@
if (matched.length >= 1) {
this.openKeys = [matched[1].path];
}
// 加载初始化的地址
if (this.$route.path === '/doc/view' && this.$route.query.url) {
this.swaggerDocChoice = this.$route.query.url;
this.swaggerDocChoiceChange();
}
this.getSwaggerResourceList();
},
methods: {
@@ -99,7 +94,12 @@
if (res instanceof Array) {
this.swaggerResourceList = res || [];
if (this.swaggerResourceList.length > 0 && !this.swaggerDocChoice) {
this.swaggerDocChoice = this.swaggerResourceList[0].url;
// 加载初始化的地址
if (this.$route.path === '/doc/view' && this.$route.query.url) {
this.swaggerDocChoice = this.$route.query.url;
} else {
this.swaggerDocChoice = this.swaggerResourceList[0].url;
}
this.swaggerDocChoiceChange();
}
} else {
@@ -112,6 +112,12 @@
},
loadV2Doc() {
this.treeDataLoading = true;
let swaggerResource = this.swaggerResourceList.find(item => item.url === this.swaggerDocChoice);
if (!swaggerResource) {
this.$message.error('未找到对应的文档地址信息');
return;
}
this.$store.commit('setSwaggerResource', swaggerResource);
customApi.get(this.swaggerDocChoice).then(res => {
let v2Doc = this.toJsonObj(res);
if (typeof v2Doc !== 'object' || !v2Doc.swagger) {

52
zyplayer-doc-ui/swagger-ui/src/components/params/ParamBody.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<a-textarea placeholder="" v-model:value="bodyRowParam" :auto-size="{ minRows: 15, maxRows: 15 }"></a-textarea>
</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, UploadOutlined} from '@ant-design/icons-vue';
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
export default {
props: {
paramList: {
type: Array,
required: true
},
},
components: {
CloseOutlined, UploadOutlined
},
emits: [],
setup(props, { attrs, slots, emit, expose}) {
let paramList = props.paramList;
let bodyParamObj = {};
let getChildren = paramObj => {
if (paramObj.children) {
let bodyParamObj = {};
paramObj.children.forEach(item => {
bodyParamObj[item.name] = getChildren(item);
});
return bodyParamObj;
}
return '';
}
if (paramList.length === 1) {
bodyParamObj = getChildren(paramList[0]);
} else if (paramList.length > 1) {
paramList.forEach(item => {
bodyParamObj[item.name] = getChildren(item);
});
}
let bodyRowParam = ref(JSON.stringify(bodyParamObj, null, 4));
return {
bodyRowParam,
};
},
};
</script>

41
zyplayer-doc-ui/swagger-ui/src/components/table/ParamTable.vue → zyplayer-doc-ui/swagger-ui/src/components/params/ParamTable.vue
View File

@@ -12,19 +12,24 @@
<a-select v-if="record.key >= 10000" v-model:value="record.type">
<a-select-option value="integer">Integer</a-select-option>
<a-select-option value="string">String</a-select-option>
<a-select-option value="file">File</a-select-option>
</a-select>
<a-tag color="pink" v-else-if="text === 'integer'">Integer</a-tag>
<a-tag color="red" v-else-if="text === 'string'">String</a-tag>
<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" 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" 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-upload v-else-if="record.type==='file'" v-model:file-list="record.value" name="file" :multiple="record.type === 'array'" :before-upload="file=>{return beforeUpload(file, record)}" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
<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)}"
:remove="file=>{return handleRemove(file, record)}"
>
<a-button><upload-outlined></upload-outlined>选择文件</a-button>
</a-upload>
<a-input v-else :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="queryParamChange(record)"></a-input>
@@ -64,26 +69,25 @@
let queryParamList = ref(props.paramList);
let nextIndex = 10000;
// Query参数处理
queryParamList.value.push({name: '', value: '', type: 'integer', key: ++nextIndex, isLastRow: true});
if (queryParamList.value.length <= 0 || !queryParamList.value[queryParamList.value.length - 1].isLastRow) {
queryParamList.value.push({name: '', value: undefined, type: 'integer', key: ++nextIndex, isLastRow: true});
}
let queryParamSelectedRowKeys = ref([]);
queryParamList.value.forEach(item => {
item.value = item.example || '';
if ((item.enum && item.type === 'array') || item.type === 'file') {
item.value = item.example || undefined;
if ((item.enum && item.type === 'array') || item.type === 'file' || item.subType === 'MultipartFile') {
item.value = [];
}
queryParamSelectedRowKeys.value.push(item.key);
});
emit('update:selected', queryParamSelectedRowKeys.value);
const queryParamRowSelectionChange = (selectedRowKeys, selectedRows) => {
queryParamSelectedRowKeys.value = selectedRowKeys;
emit('update:selected', selectedRowKeys);
};
const queryParamChange = (record) => {
if (record.isLastRow) {
record.isLastRow = false;
queryParamList.value.push({name: '', value: '', type: 'integer', key: ++nextIndex, isLastRow: true});
queryParamList.value.push({name: '', value: undefined, type: 'integer', key: ++nextIndex, isLastRow: true});
queryParamSelectedRowKeys.value.push(nextIndex);
emit('update:selected', queryParamSelectedRowKeys.value);
}
};
const queryParamRemove = (record) => {
@@ -99,17 +103,30 @@
queryParamListColumns.value.push({title: '参数值', dataIndex: 'value'});
queryParamListColumns.value.push({title: '', dataIndex: 'action', width: 40});
const beforeUpload = (file, record) => {
console.log(record)
if (record.type !== 'array') {
record.value = [file];
} else {
record.value = [...record.value, file];
}
return false;
};
const handleRemove = (file, record) => {
record.value = record.value.filter(item => item !== file);
};
const getSelectedRowKeys = () => {
return queryParamSelectedRowKeys.value;
};
return {
queryParamList,
queryParamSelectedRowKeys,
queryParamRowSelectionChange,
queryParamChange,
queryParamRemove,
queryParamListColumns,
beforeUpload,
handleRemove,
queryParamListColumns,
// 父组件调用
getSelectedRowKeys,
};
},
};

5
zyplayer-doc-ui/swagger-ui/src/store/index.js
View File

@@ -10,12 +10,17 @@ export default createStore({
swaggerDefinitions: {},
swaggerTreePathMap: {},
methodStatistic: {},
// 数据库存储的地址信息
swaggerResource: {},
}
},
mutations: {
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
},
setSwaggerResource(state, swaggerResource) {
state.swaggerResource = swaggerResource;
},
addDocChangedNum(state) {
state.docChangedNum++;
},

13
zyplayer-doc-ui/swagger-ui/src/views/doc/DocManage.vue
View File

@@ -92,6 +92,19 @@
</a-popover>
</template>
</a-form-item>
<a-form-item label="目标域名" name="rewriteDomain">
<a-input placeholder="请输入目标域名" v-model:value="docEdit.rewriteDomain"></a-input>
<template #extra>
目标域名
<a-popover title="目标域名说明">
<template #content>
<p>在文档的在线调试界面，访问的域名可以初始为此处录入的域名，而非文档本身的域名地址</p>
<p>可便于不同环境间的接口测试，例：http://doc.zyplayer.com</p>
</template>
<a>说明</a>
</a-popover>
</template>
</a-form-item>
<a-form-item label="开放访问" required name="openVisit">
<a-radio-group v-model:value="docEdit.openVisit">
<a-radio :value="0">否</a-radio>

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

@@ -8,7 +8,7 @@
/>
<a-tabs v-model:activeKey="activePage" closable @tab-click="" style="padding: 5px 10px 0;">
<a-tab-pane tab="URL参数" key="urlParam">
<ParamTable v-model:selected="urlParamChecked" :paramList="urlParamList"></ParamTable>
<ParamTable ref="urlParamRef" v-model:selected="urlParamChecked" :paramList="urlParamList"></ParamTable>
</a-tab-pane>
<a-tab-pane tab="请求参数" key="bodyParam" v-if="docInfoShow.method !== 'get'">
<a-radio-group v-model:value="bodyParamType" style="margin-bottom: 5px;">
@@ -19,20 +19,20 @@
<a-radio value="binary">binary</a-radio>
</a-radio-group>
<div v-show="bodyParamType === 'form'">
<ParamTable v-model:selected="formParamChecked" :paramList="formParamList" showType></ParamTable>
<ParamTable ref="formParamRef" :paramList="formParamList" showType></ParamTable>
</div>
<div v-show="bodyParamType === 'formUrlEncode'">
<ParamTable v-model:selected="formEncodeParamChecked" :paramList="formEncodeParamList"></ParamTable>
<ParamTable ref="formEncodeParamRef" :paramList="formEncodeParamList"></ParamTable>
</div>
<div v-show="bodyParamType === 'row'">
<a-textarea placeholder="" v-model:value="bodyRowParam" :auto-size="{ minRows: 15, maxRows: 15 }"></a-textarea>
<ParamBody ref="bodyParamRef" :paramList="bodyRowParamList"></ParamBody>
</div>
</a-tab-pane>
<a-tab-pane tab="Header参数" key="headerParam">
<ParamTable v-model:selected="headerParamChecked" :paramList="headerParamList"></ParamTable>
<ParamTable ref="headerParamRef" :paramList="headerParamList"></ParamTable>
</a-tab-pane>
<a-tab-pane tab="Cookie参数" key="cookieParam">
<ParamTable v-model:selected="cookieParamChecked" :paramList="cookieParamList"></ParamTable>
<ParamTable ref="cookieParamRef" :paramList="cookieParamList"></ParamTable>
</a-tab-pane>
</a-tabs>
</div>
@@ -44,10 +44,12 @@
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import {markdownIt} from 'mavon-editor'
import ParamTable from '../../../components/table/ParamTable.vue'
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";
export default {
props: {
@@ -65,45 +67,89 @@
},
},
components: {
CloseOutlined, ParamTable
CloseOutlined, ParamTable, ParamBody
},
setup(props) {
let docUrl = ref(props.docInfoShow.url);
const store = useStore();
let swaggerResource = store.state.swaggerResource || {};
let swaggerDoc = store.state.swaggerDoc || {};
let urlDomain = swaggerResource.rewriteDomain || swaggerDoc.host;
let docUrl = ref(urlDomain + props.docInfoShow.url);
let activePage = ref('urlParam');
// URL参数处理
const urlParamRef = ref();
const urlParamChecked = ref([]);
let urlParamListProp = props.requestParamList.filter(item => item.in === 'query');
let urlParamList = ref(JSON.parse(JSON.stringify(urlParamListProp)));
let urlParamList = ref([]);
// Header参数处理
const headerParamRef = ref();
const headerParamChecked = ref([]);
let headerParamListProp = props.requestParamList.filter(item => item.in === 'header');
let headerParamList = ref(JSON.parse(JSON.stringify(headerParamListProp)));
// cookie参数处理
const cookieParamRef = ref();
const cookieParamChecked = ref([]);
let cookieParamListProp = props.requestParamList.filter(item => item.in === 'cookie');
let cookieParamList = ref(JSON.parse(JSON.stringify(cookieParamListProp)));
// form参数处理
const formParamRef= ref();
const formParamChecked = ref([]);
let formParamListProp = props.requestParamList.filter(item => item.in === 'formData');
let formParamList = ref([]);
if (props.docInfoShow.method === 'post') {
// post的时候参数否放到form里面
formParamListProp = formParamListProp.concat(urlParamListProp);
} else {
// 否则放到URL参数里面
urlParamList = ref(JSON.parse(JSON.stringify(urlParamListProp)));
}
// form参数处理
const formEncodeParamRef = ref();
const formEncodeParamChecked = ref([]);
let formEncodeParamList = ref([]);
// body 参数
let bodyParamRef = ref();
let bodyParamType = ref('form');
let bodyRowParam = ref('');
let bodyRowListProp = props.requestParamList.filter(item => item.in === 'body');
let bodyRowParamList = ref(JSON.parse(JSON.stringify(bodyRowListProp)));
// x-www-form-urlencoded
if (props.docInfoShow.consumes.indexOf('x-www-form-urlencoded') >= 0) {
if (props.docInfoShow.consumes.indexOf('application/x-www-form-urlencoded') >= 0) {
bodyParamType.value = 'formUrlEncode';
formEncodeParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
} else if (props.docInfoShow.consumes.indexOf('multipart/form-data') >= 0) {
bodyParamType.value = 'form';
formParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
} else if (props.docInfoShow.consumes.indexOf('application/json') >= 0) {
bodyParamType.value = 'row';
formEncodeParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
if (formParamListProp.length > 0) {
bodyParamType.value = 'formUrlEncode';
}
} else {
formParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
}
if (formParamList.value.length > 0) {
activePage.value = 'urlParam';
} else if (formParamListProp.length > 0 || bodyRowListProp.length > 0) {
activePage.value = 'bodyParam';
} else if (headerParamListProp.length > 0) {
activePage.value = 'headerParam';
}
// 发送请求
const sendRequest = () => {
console.log('urlParamChecked', urlParamChecked.value, urlParamList.value);
const formData = new FormData();
let selectedRowKeys = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => selectedRowKeys.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
return item.name + '=' + encodeURIComponent(item.value);
}).join('&');
console.log('urlParamStr', urlParamStr);
// fileList.value.forEach(file => {
// formData.append('files[]', file);
// });
formData.append('url', docUrl.value + '?' + urlParamStr);
zyplayerApi.requestUrl(formData).then(res => {
debugger
});
message.info('暂未开放此功能，敬请期待');
};
return {
@@ -111,23 +157,29 @@
activePage,
sendRequest,
// url参数
urlParamRef,
urlParamChecked,
urlParamList,
// header参数
headerParamRef,
headerParamChecked,
headerParamList,
// cookie参数
cookieParamRef,
cookieParamChecked,
cookieParamList,
// form参数
formParamRef,
formParamChecked,
formParamList,
// form-encode参数
formEncodeParamRef,
formEncodeParamChecked,
formEncodeParamList,
// body参数
bodyParamRef,
bodyParamType,
bodyRowParam,
bodyRowParamList,
responseCodeListColumns: [
{title: '状态码', dataIndex: 'code', width: 100},
{title: '类型', dataIndex: 'type', width: 250},