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

#I4MKKW api接口调试支持文件上传，全局参数控制优化

Browse Source
This commit is contained in:
暮光：城中城
2021-12-15 23:20:17 +08:00
parent c176bd7577
commit e2a8c46afb
16 changed files with 206 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
zyplayer-doc-ui/api-ui/src/components/layouts/MenuLayout.vue
View File

@@ -10,7 +10,7 @@
<a-select placeholder="请选择分组" v-model:value="docChoiceId" @change="docChoiceChange" style="width: 100%;">
<a-select-option :value="item.id" v-for="item in docResourceList">{{item.name}}</a-select-option>
</a-select>
<a-input-search v-model:value="searchKeywords" placeholder="搜索文档内容" style="width: 100%;margin-top: 10px;" @search="docChoiceChange"/>
<a-input-search v-model:value="searchKeywords" placeholder="搜索文档内容" style="width: 100%;margin-top: 10px;" @search="searchDoc"/>
</div>
<template v-if="docChoice && docChoice.docType">
<DocTreeSwagger v-if="docChoice.docType === 1 || docChoice.docType === 2" ref="swaggerRef"></DocTreeSwagger>
@@ -102,9 +102,26 @@
openApiRef.value.loadDoc(docChoiceId.value, searchKeywords.value, loadDocCallback);
}
}
zyplayerApi.docApiGlobalParamList({docId: docChoiceId.value}).then(res => {
let docGlobalParam = res.data || [];
store.commit('setDocGlobalParam', docGlobalParam);
});
};
const docChoiceChange = () => {
loadDoc();
};
// 搜索文档
const searchDoc = () => {
// 如果文档是swagger类型
if (docChoice.value.docType === 1 || docChoice.value.docType === 2) {
if (swaggerRef.value) {
swaggerRef.value.loadTreeData(searchKeywords.value);
}
} else if (docChoice.value.docType === 3 || docChoice.value.docType === 4) {
if (openApiRef.value) {
openApiRef.value.loadTreeData(searchKeywords.value);
}
}
};
watch(store.getters.getDocChangedNum, () => {
getApiDocList();
@@ -136,6 +153,7 @@
swaggerRef,
openApiRef,
docChoice,
searchDoc,
docChoiceChange,
};
},

14
zyplayer-doc-ui/api-ui/src/components/layouts/doc-tree/OpenApi.vue
View File

@@ -41,7 +41,6 @@
let treeData = ref([]);
let expandedKeys = ref([]);
let choiceDocId = ref('');
let searchKeywords = ref('');
const docChecked = (val, node) => {
if (node.node.key === 'info') {
@@ -53,11 +52,11 @@
};
const loadDoc = (docId, keyword, callback) => {
choiceDocId.value = docId;
searchKeywords.value = keyword;
zyplayerApi.apiDocApisDetail({id: docId}).then(res => {
let v2Doc = toJsonObj(res.data);
// os：doc.swagger 和 doc.openapi 的区别
if (typeof v2Doc !== 'object' || !v2Doc.openapi) {
callback(false);
message.error('获取文档数据失败，请检查文档是否为标准的OpenApi文档格式');
return;
}
@@ -67,13 +66,15 @@
store.commit('setOpenApiUrlMethodMap', treeData.urlMethodMap);
store.commit('setOpenApiMethodStatistic', treeData.methodStatistic);
tagPathMap.value = treeData.tagPathMap;
loadTreeData();
callback();
loadTreeData(keyword);
callback(true);
}).catch(() => {
callback(false);
});
};
const loadTreeData = async () => {
const loadTreeData = async (keyword) => {
let metaInfo = {id: choiceDocId.value};
treeData.value = getTreeDataForTag(openApiDoc.value, tagPathMap.value, searchKeywords.value, metaInfo);
treeData.value = getTreeDataForTag(openApiDoc.value, tagPathMap.value, keyword, metaInfo);
treeData.value.unshift({key: 'info', title: '文档说明信息', isLeaf: true});
await nextTick();
expandedKeys.value = ['main'];
@@ -97,6 +98,7 @@
expandedKeys,
docChecked,
loadDoc,
loadTreeData,
treeData,
};
},

13
zyplayer-doc-ui/api-ui/src/components/layouts/doc-tree/Swagger.vue
View File

@@ -41,7 +41,6 @@
let treeData = ref([]);
let expandedKeys = ref([]);
let choiceDocId = ref('');
let searchKeywords = ref('');
const docChecked = (val, node) => {
if (node.node.key === 'info') {
@@ -53,7 +52,6 @@
};
const loadDoc = (docId, keyword, callback) => {
choiceDocId.value = docId;
searchKeywords.value = keyword;
zyplayerApi.apiDocApisDetail({id: docId}).then(res => {
let v2Doc = toJsonObj(res.data);
if (typeof v2Doc !== 'object' || !v2Doc.swagger) {
@@ -67,13 +65,15 @@
store.commit('setSwaggerUrlMethodMap', treeData.urlMethodMap);
store.commit('setSwaggerMethodStatistic', treeData.methodStatistic);
tagPathMap.value = treeData.tagPathMap;
loadTreeData();
callback(true);
loadTreeData(keyword);
callback(true);
}).catch(() => {
callback(false);
});
};
const loadTreeData = async () => {
const loadTreeData = async (keyword) => {
let metaInfo = {id: choiceDocId.value};
treeData.value = getTreeDataForTag(swaggerDoc.value, tagPathMap.value, searchKeywords.value, metaInfo);
treeData.value = getTreeDataForTag(swaggerDoc.value, tagPathMap.value, keyword, metaInfo);
treeData.value.unshift({key: 'info', title: '文档说明信息', isLeaf: true});
await nextTick();
expandedKeys.value = ['main'];
@@ -97,6 +97,7 @@
expandedKeys,
docChecked,
loadDoc,
loadTreeData,
treeData,
};
},

12
zyplayer-doc-ui/api-ui/src/components/params/ParamTable.vue
View File

@@ -41,7 +41,7 @@
<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="isFileType(record.type)"
<a-upload v-else-if="isFileType(record)"
:file-list="record.value" name="file" :multiple="record.type === 'array'"
:before-upload="file=>{return beforeUpload(file, record)}"
:remove="file=>{return handleRemove(file, record)}"
@@ -121,11 +121,11 @@
paramListColumns.value.push({title: '参数值', dataIndex: 'value'});
paramListColumns.value.push({title: '', dataIndex: 'action', width: 40});
const beforeUpload = (file, record) => {
if (record.type !== 'array') {
record.value = [file];
} else {
record.value = [...record.value, file];
}
if (record.type !== 'array' || !(record.value instanceof Array) || record.value.length <= 0) {
record.value = [file];
} else {
record.value = [...record.value, file];
}
return false;
};
const handleRemove = (file, record) => {

11
zyplayer-doc-ui/api-ui/src/components/share/MenuLayout.vue
View File

@@ -78,7 +78,16 @@
}
};
const docSearch = () => {
loadDoc();
// 如果文档是swagger类型
if (docChoice.value.docType === 1 || docChoice.value.docType === 2) {
if (swaggerRef.value) {
swaggerRef.value.loadTreeData(searchKeywords.value);
}
} else if (docChoice.value.docType === 3 || docChoice.value.docType === 4) {
if (openApiRef.value) {
openApiRef.value.loadTreeData(searchKeywords.value);
}
}
};
onMounted(() => {
docChoiceId.value = route.query.uuid;

14
zyplayer-doc-ui/api-ui/src/components/share/doc-tree/OpenApi.vue
View File

@@ -36,7 +36,6 @@
let treeData = ref([]);
let expandedKeys = ref([]);
let choiceDocId = ref('');
let searchKeywords = ref('');
const docChecked = (val, node) => {
if (node.node.isLeaf) {
@@ -46,11 +45,11 @@
};
const loadDoc = (docId, keyword, callback) => {
choiceDocId.value = docId;
searchKeywords.value = keyword;
zyplayerApi.apiShareDocApisDetail({shareUuid: docId}).then(res => {
let v2Doc = toJsonObj(res.data);
// os：doc.swagger 和 doc.openapi 的区别
if (typeof v2Doc !== 'object' || !v2Doc.openapi) {
callback(false);
message.error('获取文档数据失败，请检查文档是否为标准的OpenApi文档格式');
return;
}
@@ -60,13 +59,15 @@
store.commit('setOpenApiUrlMethodMap', treeData.urlMethodMap);
store.commit('setOpenApiMethodStatistic', treeData.methodStatistic);
tagPathMap.value = treeData.tagPathMap;
loadTreeData();
callback();
loadTreeData(keyword);
callback(true);
}).catch(() => {
callback(false);
});
};
const loadTreeData = async () => {
const loadTreeData = async (keyword) => {
let metaInfo = {uuid: choiceDocId.value};
treeData.value = getTreeDataForTag(openApiDoc.value, tagPathMap.value, searchKeywords.value, metaInfo);
treeData.value = getTreeDataForTag(openApiDoc.value, tagPathMap.value, keyword, metaInfo);
await nextTick();
expandedKeys.value = ['main'];
};
@@ -89,6 +90,7 @@
expandedKeys,
docChecked,
loadDoc,
loadTreeData,
treeData,
};
},

11
zyplayer-doc-ui/api-ui/src/components/share/doc-tree/Swagger.vue
View File

@@ -36,7 +36,6 @@
let treeData = ref([]);
let expandedKeys = ref([]);
let choiceDocId = ref('');
let searchKeywords = ref('');
const docChecked = (val, node) => {
if (node.node.isLeaf) {
@@ -46,7 +45,6 @@
};
const loadDoc = (docId, keyword, callback) => {
choiceDocId.value = docId;
searchKeywords.value = keyword;
zyplayerApi.apiShareDocApisDetail({shareUuid: docId}).then(res => {
let v2Doc = toJsonObj(res.data);
if (typeof v2Doc !== 'object' || !v2Doc.swagger) {
@@ -60,13 +58,15 @@
store.commit('setSwaggerUrlMethodMap', treeData.urlMethodMap);
store.commit('setSwaggerMethodStatistic', treeData.methodStatistic);
tagPathMap.value = treeData.tagPathMap;
loadTreeData();
loadTreeData(keyword);
callback(true);
}).catch(() => {
callback(false);
});
};
const loadTreeData = async () => {
const loadTreeData = async (keyword) => {
let metaInfo = {uuid: choiceDocId.value};
treeData.value = getTreeDataForTag(swaggerDoc.value, tagPathMap.value, searchKeywords.value, metaInfo);
treeData.value = getTreeDataForTag(swaggerDoc.value, tagPathMap.value, keyword, metaInfo);
await nextTick();
expandedKeys.value = ['main'];
};
@@ -89,6 +89,7 @@
expandedKeys,
docChecked,
loadDoc,
loadTreeData,
treeData,
};
},

15
zyplayer-doc-ui/api-ui/src/store/index.js
View File

@@ -13,6 +13,8 @@ export default createStore({
apiDoc: {},
// 全局参数
globalParam: [],
// 当前文档全局参数
docGlobalParam: [],
// 左侧菜单栏宽度
leftAsideWidth: 0,
@@ -53,6 +55,19 @@ export default createStore({
setGlobalParam(state, globalParam) {
state.globalParam = globalParam;
},
setDocGlobalParam(state, globalParam) {
state.docGlobalParam = globalParam;
},
setGlobalParamOnChange(state, globalParam, docId) {
if (docId && docId > 0) {
// 当前选中的文档是修改的文档才更新
if (state.apiDoc.id === docId) {
state.docGlobalParam = globalParam;
}
} else {
state.globalParam = globalParam;
}
},
setApiDoc(state, apiDoc) {
state.apiDoc = apiDoc;
},

2
zyplayer-doc-ui/api-ui/src/views/manage/components/EditGlobalParam.vue
View File

@@ -70,7 +70,7 @@
zyplayerApi.docApiGlobalParamList(props.dynamicParam).then(res => {
setTimeout(() => docListLoading.value = false, 500);
docList.value = res.data || [];
store.commit('setGlobalParam', docList.value);
store.commit('setGlobalParamOnChange', docList.value, props.dynamicParam.id);
});
};
let docEdit = ref({});

48
zyplayer-doc-ui/api-ui/src/views/openapi/docView/DocDebugger.vue
View File

@@ -19,7 +19,7 @@
<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 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>
@@ -98,16 +98,18 @@
setup(props) {
const store = useStore();
let apiDoc = store.state.apiDoc || {};
let globalParam = store.state.globalParam || [];
let openApiDoc = store.state.openApiDoc || {};
let userGlobalParam = store.state.globalParam || [];
let docGlobalParam = store.state.docGlobalParam || [];
let openApiDoc = store.state.openApiDoc || {};
let urlDomain = apiDoc.rewriteDomain || '';
// os：取服务地址不一样 todo 多服务地址的情况处理
let servers = openApiDoc.servers || [];
if (!urlDomain && servers.length > 0 && servers[0].url) {
urlDomain = servers[0].url;
}
// os：取服务地址不一样 todo 多服务地址的情况处理
let servers = openApiDoc.servers || [];
if (!urlDomain && servers.length > 0 && servers[0].url) {
urlDomain = servers[0].url;
}
let docUrl = ref(urlDomain + props.docInfoShow.url);
let activePage = ref('urlParam');
let globalParam = [].concat(userGlobalParam, docGlobalParam);
// URL参数处理
const urlParamRef = ref();
let urlParamListProp = props.requestParamList.filter(item => item.in === 'query' || item.in === 'path');
@@ -184,6 +186,9 @@
} else if (headerParamListProp.length > 0) {
activePage.value = 'headerParam';
}
const isFileType = record => {
return record.type === 'file' || record.subType === 'file' || record.subType === 'MultipartFile';
};
// 发送请求
let requestResult = ref({});
let requestLoading = ref(false);
@@ -195,11 +200,29 @@
message.error('请输入请求的目标URL地址');
return;
}
// 用于替换URL上的path参数
let formObjData = {};
// 代理请求发送给后端的对象
const formData = new FormData();
const appendData = item => {
if (isFileType(item)) {
// 防止参数重名，加个前缀
let name = '_file_' + item.name;
if (item.type === 'array') {
item.value.forEach(file => formData.append(name, file));
} else {
if (item.value instanceof Array && item.value.length > 0) {
formData.append(name, item.value[0]);
}
}
} else {
formObjData[item.name] = item.value;
formData.append(item.name, item.value);
}
};
let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
formObjData[item.name] = item.value;
appendData(item);
return item.name + '=' + encodeURIComponent(item.value);
}).join('&');
let headerParamSelected = headerParamRef.value.getSelectedRowKeys();
@@ -215,7 +238,7 @@
let formParamSelected = formParamRef.value.getSelectedRowKeys();
formParamArr = formParamList.value.filter(item => formParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
// todo 判断处理文件格式
formObjData[item.name] = item.value;
appendData(item);
return {code: item.name, value: item.value};
});
}
@@ -224,7 +247,7 @@
let formEncodeParamSelected = formEncodeParamRef.value.getSelectedRowKeys();
formEncodeParamArr = formEncodeParamList.value.filter(item => formEncodeParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
// todo 判断处理文件格式
formObjData[item.name] = item.value;
appendData(item);
return {code: item.name, value: item.value};
});
}
@@ -232,9 +255,6 @@
if (bodyParamRef.value) {
bodyParamStr = bodyParamRef.value.getParam();
}
// fileList.value.forEach(file => {
// formData.append('files[]', file);
// });
let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value;
// 替换path参数
Object.keys(formObjData).forEach((key) => {

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

@@ -98,11 +98,13 @@
setup(props) {
const store = useStore();
let apiDoc = store.state.apiDoc || {};
let globalParam = store.state.globalParam || [];
let userGlobalParam = store.state.globalParam || [];
let docGlobalParam = store.state.docGlobalParam || [];
let swaggerDoc = store.state.swaggerDoc || {};
let urlDomain = apiDoc.rewriteDomain || swaggerDoc.host;
let docUrl = ref(urlDomain + props.docInfoShow.url);
let activePage = ref('urlParam');
let globalParam = [].concat(userGlobalParam, docGlobalParam);
// URL参数处理
const urlParamRef = ref();
let urlParamListProp = props.requestParamList.filter(item => item.in === 'query' || item.in === 'path');
@@ -179,6 +181,9 @@
} else if (headerParamListProp.length > 0) {
activePage.value = 'headerParam';
}
const isFileType = record => {
return record.type === 'file' || record.subType === 'file' || record.subType === 'MultipartFile';
};
// 发送请求
let requestResult = ref({});
let requestLoading = ref(false);
@@ -190,11 +195,29 @@
message.error('请输入请求的目标URL地址');
return;
}
let formObjData = {};
const formData = new FormData();
// 用于替换URL上的path参数
let formObjData = {};
// 代理请求发送给后端的对象
const formData = new FormData();
const appendData = item => {
if (isFileType(item)) {
// 防止参数重名，加个前缀
let name = '_file_' + item.name;
if (item.type === 'array') {
item.value.forEach(file => formData.append(name, file));
} else {
if (item.value instanceof Array && item.value.length > 0) {
formData.append(name, item.value[0]);
}
}
} else {
formObjData[item.name] = item.value;
formData.append(item.name, item.value);
}
};
let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
formObjData[item.name] = item.value;
appendData(item);
return item.name + '=' + encodeURIComponent(item.value);
}).join('&');
let headerParamSelected = headerParamRef.value.getSelectedRowKeys();
@@ -210,7 +233,7 @@
let formParamSelected = formParamRef.value.getSelectedRowKeys();
formParamArr = formParamList.value.filter(item => formParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
// todo 判断处理文件格式
formObjData[item.name] = item.value;
appendData(item);
return {code: item.name, value: item.value};
});
}
@@ -219,7 +242,7 @@
let formEncodeParamSelected = formEncodeParamRef.value.getSelectedRowKeys();
formEncodeParamArr = formEncodeParamList.value.filter(item => formEncodeParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
// todo 判断处理文件格式
formObjData[item.name] = item.value;
appendData(item);
return {code: item.name, value: item.value};
});
}
@@ -227,9 +250,6 @@
if (bodyParamRef.value) {
bodyParamStr = bodyParamRef.value.getParam();
}
// fileList.value.forEach(file => {
// formData.append('files[]', file);
// });
let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value;
// 替换path参数
Object.keys(formObjData).forEach((key) => {