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-28 23:25:12 +08:00
parent 3a695ebd1a
commit 59ecaf4477
14 changed files with 869 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,5 +7,7 @@ export const zyplayerApi = {
swaggerDocList: data => apiClient({url: '/doc-swagger/doc/list', method: 'post', data: data}),
swaggerDocAdd: data => apiClient({url: '/doc-swagger/doc/add', method: 'post', data: data}),
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}),
};

228
zyplayer-doc-ui/swagger-ui/src/assets/utils/SwaggerAnalysis.js Normal file
View File

@@ -0,0 +1,228 @@
import formatjson from '../../assets/utils/formatjson'
/**
* 参数解析
* @author 暮光：城中城
* @since 2017年5月7日
*/
export default {
getRequestParamList(parameters, definitionsDataMap) {
if (!parameters) {
return [];
}
formatjson.annotationObject = {};
let requestParamList = [], requestParamExample = [];
Object.keys(parameters).forEach(key => {
let tempParameters = parameters[key];
let htmlStr = "", htmlStrExample = "";
let responsesJson = [];
let responsesExample = [];
let required = tempParameters.required;
let paramName = tempParameters.name || '';
let paramType = tempParameters.type || '';
let paramDesc = tempParameters.description || '';
let paramIn = tempParameters.in || '';
let example = tempParameters.example || tempParameters.default || '';
if (tempParameters.items) {
htmlStr = paramName + "[0]";
htmlStrExample = paramName + "[0]";
} else if (tempParameters.schema) {
if ("array" === tempParameters.schema.type) {
let responsesObj = definitionsDataMap[tempParameters.schema.items.$ref];
if (responsesObj != null) {
responsesJson[0] = this.getResponsesJson(responsesObj, "", false, 1, definitionsDataMap);
responsesExample[0] = this.getResponsesJson(responsesObj, "", true, 1, definitionsDataMap);
} else {
responsesJson = [""];
responsesExample = [""];
if (tempParameters.schema.items.type === "boolean") {
responsesJson = [true];
responsesExample = [true];
} else if (tempParameters.schema.items.type === "integer") {
responsesJson = [0];
responsesExample = [0];
}
}
if (tempParameters.schema.$ref) {
let arrTmp = tempParameters.schema.$ref.split("/");
paramType = arrTmp[arrTmp.length - 1];
}
htmlStr = formatjson.processObjectToHtmlPre(responsesJson, 0, false, false, false, true);
htmlStrExample = formatjson.processObjectToHtmlPre(responsesExample, 0, false, false, false, false);
} else if (tempParameters.schema.$ref) {
let responsesObj = definitionsDataMap[tempParameters.schema.$ref];
if (tempParameters.schema.$ref) {
let arrTmp = tempParameters.schema.$ref.split("/");
paramType = arrTmp[arrTmp.length - 1];
}
if (responsesObj) {
responsesJson = this.getResponsesJson(responsesObj, "", false, 1, definitionsDataMap);
responsesExample = this.getResponsesJson(responsesObj, "", true, 1, definitionsDataMap);
htmlStr = formatjson.processObjectToHtmlPre(responsesJson, 0, false, false, false, true);
htmlStrExample = formatjson.processObjectToHtmlPre(responsesExample, 0, false, false, false, false);
} else {
htmlStr = paramName;
htmlStrExample = paramName;
}
} else if ("string" === tempParameters.schema.type) {
htmlStr = paramName;
htmlStrExample = paramName;
} else {
htmlStr = paramName;
htmlStrExample = paramName;
}
} else {
htmlStr = paramName;
htmlStrExample = paramName;
}
requestParamList.push({htmlStr, paramDesc, paramType, paramIn, required});
requestParamExample.push({htmlStrExample, paramDesc, paramType, paramIn, required});
});
console.log(requestParamList);
console.log(requestParamExample);
return requestParamList;
},
getResponsesJson(responsesObj, prevRef, isExample, recursiveCount, definitionsDataMap) {
let responsesJson = {};
recursiveCount++;// 多层递归，最多递归10层，防止无限递归
if (!responsesObj || !responsesObj.properties || recursiveCount > 10) {
return responsesJson;
}
let requiredArr = responsesObj.required;
Object.keys(responsesObj.properties).forEach(prop => {
let tmpData = responsesObj.properties[prop];
if ("array" === tmpData.type) {// 数组
formatjson.annotationObject[prop] = tmpData.description || '';
if (prevRef !== tmpData.items.$ref) {
let tempObj = definitionsDataMap[tmpData.items.$ref];
if (tempObj != null) {
let tempArr = responsesJson[prop] = [];
tempArr[0] = this.getResponsesJson(tempObj, tmpData.items.$ref, isExample, recursiveCount, definitionsDataMap);
} else {
let responsesJsonSub = [];
let bodyFor = responsesJsonSub;
let items = tmpData.items;
for (let i = 0; i < 10; i++) {
if ("array" === items.type) {
bodyFor = bodyFor[0] = [];
items = items.items;
} else {
tempObj = definitionsDataMap[items.$ref];
if (tempObj != null) {
bodyFor[0] = this.getResponsesJson(tempObj, items.$ref, isExample, recursiveCount, definitionsDataMap);
} else {
if (items.type === "boolean") {
bodyFor[0] = true;
} else if (items.type === "integer") {
bodyFor[0] = 0;
} else {
bodyFor[0] = "";
}
}
break;
}
}
responsesJson[prop] = responsesJsonSub;
}
} else {
responsesJson[prop] = "{}" + (tmpData.description || '');
}
} else if (tmpData.$ref) {// 对象
formatjson.annotationObject[prop] = tmpData.description || '';
if (prevRef !== tmpData.$ref) {
let tempObj = definitionsDataMap[tmpData.$ref];
responsesJson[prop] = this.getResponsesJson(tempObj, tmpData.$ref, isExample, recursiveCount, definitionsDataMap);
} else {
responsesJson[prop] = "{}" + (tmpData.description || '');
}
} else {// 字段
let enumExample = "";
let enumObj = tmpData["enum"];
if (enumObj && enumObj.length > 0) {
enumExample = "枚举值：";
for (let i = 0; i < enumObj.length; i++) {
if (i > 0) {
enumExample += "、";
}
enumExample += enumObj[i];
}
}
let typeStr = tmpData.format || tmpData.type || '';
if (isExample) {
let tempVal = tmpData.example || '';
if (tempVal && enumExample) {
tempVal = tempVal + "，" + enumExample;
}
responsesJson[prop] = tempVal;
} else {
if (requiredArr && requiredArr.indexOf(prop) >= 0) {
typeStr = (typeStr ? typeStr + "," : "") + "required";
}
if (typeStr) {
typeStr = "(" + typeStr + ")";
}
let descriptionStr = typeStr + tmpData.description || '';
if (descriptionStr && enumExample) {
descriptionStr = descriptionStr + "，" + enumExample;
}
responsesJson[prop] = descriptionStr;
}
}
});
return responsesJson;
},
getResponseParamList(responses, definitionsDataMap) {
if (!responses) {
return [];
}
let responsesList = [];
formatjson.annotationObject = {};
Object.keys(responses).forEach(key => {
let tempRespones = responses[key];
if (tempRespones.schema) {
let responsesJson, responsesExample;
if ("array" === tempRespones.schema.type) {
responsesJson = [];
responsesExample = [];
let responsesObj = definitionsDataMap[tempRespones.schema.items.$ref];
if (responsesObj != null) {
responsesJson[0] = this.getResponsesJson(responsesObj, "", false, 1, definitionsDataMap);
responsesExample[0] = this.getResponsesJson(responsesObj, "", true, 1, definitionsDataMap);
} else {
responsesJson = [""];
responsesExample = [""];
if (tempRespones.schema.items.type === "boolean") {
responsesJson = [true];
responsesExample = [true];
} else if (tempRespones.schema.items.type === "integer") {
responsesJson = [0];
responsesExample = [0];
}
}
} else if (tempRespones.schema.$ref) {
let responsesObj = definitionsDataMap[tempRespones.schema.$ref];
if (!responsesObj) {
let arrTmp = tempRespones.schema.$ref.split("/");
let lastObjName = arrTmp[arrTmp.length - 1];
responsesJson = lastObjName;
responsesExample = lastObjName;
} else {
responsesJson = this.getResponsesJson(responsesObj, "", false, 1, definitionsDataMap);
responsesExample = this.getResponsesJson(responsesObj, "", true, 1, definitionsDataMap);
}
} else {
responsesJson = "";
responsesExample = "";
}
if (!responsesJson) {
return;
}
let htmlStr = formatjson.processObjectToHtmlPre(responsesJson, 0, false, false, false, true);
responsesList.push({code: key, desc: htmlStr});
htmlStr = formatjson.processObjectToHtmlPre(responsesExample, 0, false, false, false, false);
}
});
return responsesList;
}
}

146
zyplayer-doc-ui/swagger-ui/src/assets/utils/SwaggerAnalysisV2.js Normal file
View File

@@ -0,0 +1,146 @@
import {message} from 'ant-design-vue';
// 无需特殊处理的参数类型
let notNeedHandleTypeArr = ['file', 'string', 'integer', 'long', 'double', 'object', 'number', 'boolean'];
/**
* 参数解析
* @author 暮光：城中城
* @since 2017年5月7日
*/
export default {
getRequestParamList(parameters, definitionsDataMap) {
if (!parameters) {
return [];
}
let indexKey = 1;
let requestParamList = [];
for (let i = 0; i < parameters.length; i++) {
let parameter = parameters[i];
let type = parameter.type;
let subType = undefined;
let children = undefined;
if (!type) {
if (parameter.schema && parameter.schema.type) {
type = parameter.schema.type;
}
}
if (type === 'array') {
// 解析parameter.items.$ref 或 parameter.items.originalRef {$ref: "#/definitions/Model", originalRef: "Model"}
// 解析parameter.items.type {type: 'file'}
if (parameter.items && parameter.items.originalRef) {
children = this.getParamDefinitions(parameter.items.originalRef, definitionsDataMap, indexKey, {}, 0);
} else if (parameter.schema && parameter.schema.items && parameter.schema.items.originalRef) {
children = this.getParamDefinitions(parameter.schema.items.originalRef, definitionsDataMap, indexKey, {}, 0);
} else if (parameter.items && parameter.items.type) {
subType = parameter.items.type;
} else {
console.log('001-遇到未处理的类型，请联系开发人员修改：' + type, parameter);
message.error('001-遇到未处理的类型，请联系开发人员修改：' + type);
}
} else if (!type) {
if (parameter.schema && parameter.schema.originalRef) {
// 解析parameter.schema {originalRef: "Model", $ref: "#/definitions/Model"}
type = parameter.schema.originalRef;
children = this.getParamDefinitions(type, definitionsDataMap, indexKey, {}, 0);
} else {
console.log('002-遇到未处理的类型，请联系开发人员修改：' + type, parameter);
message.error('002-遇到未处理的类型，请联系开发人员修改：' + type);
}
} else {
if (notNeedHandleTypeArr.indexOf(type) >= 0) {
// 无需特殊处理的类型
} else {
console.log('003-遇到未处理的类型，请联系开发人员修改：' + type, parameter);
message.error('003-遇到未处理的类型，请联系开发人员修改：' + type);
}
}
requestParamList.push({
type: type,
key: indexKey,
in: parameter.in,
name: parameter.name,
required: parameter.required ? '是' : '否',
description: parameter.description,
children: children,
});
indexKey++;
}
return requestParamList;
},
getResponseParamList(responses, definitionsDataMap) {
let responsesList = [];
let indexKey = 1;
Object.keys(responses).forEach(code => {
let codeResponses = responses[code];
let type = undefined;
let children = undefined;
if (codeResponses.schema && codeResponses.schema.originalRef) {
type = codeResponses.schema.originalRef;
children = this.getParamDefinitions(codeResponses.schema.originalRef, definitionsDataMap, indexKey, {}, 0);
}
responsesList.push({
code: code,
type: type,
key: indexKey,
desc: codeResponses.description,
schemas: children,
});
indexKey++;
});
return responsesList;
},
getParamDefinitions(ref, definitionsDataMap, indexKey, parentRef, deep) {
let definition = definitionsDataMap[ref];
// 层级大于5层 或 父节点已经解析过此类型了 或者 没有类型定义
if (deep >= 5 || parentRef[ref] || !definition) {
return undefined;
}
parentRef[ref] = 1;
let paramList = [];
let type = definition.type;
let properties = definition.properties;
let indexSub = 1;
if (type === 'object') {
Object.keys(properties).forEach(key => {
let parameter = properties[key];
let type = parameter.type;
let keySub = indexKey + '_' + indexSub;
let children = undefined;
if (type === 'array') {
// 解析parameter.items {originalRef: "Model", $ref: "#/definitions/Model"}
if (parameter.items && parameter.items.originalRef) {
children = this.getParamDefinitions(parameter.items.originalRef, definitionsDataMap, keySub, parentRef, deep + 1);
} else {
console.log('004-遇到未处理的类型，请联系开发人员修改：' + type, parameter);
message.error('004-遇到未处理的类型，请联系开发人员修改：' + type);
}
} else if (!type) {
if (parameter.originalRef) {
type = parameter.originalRef;
children = this.getParamDefinitions(parameter.originalRef, definitionsDataMap, keySub, parentRef, deep + 1);
} else {
console.log('005-遇到未处理的类型，请联系开发人员修改：' + type, parameter);
message.error('005-遇到未处理的类型，请联系开发人员修改：' + type);
}
} else {
if (notNeedHandleTypeArr.indexOf(type) >= 0) {
// 无需特殊处理的类型
} else {
console.log('006-遇到未处理的类型，请联系开发人员修改：' + type, parameter);
message.error('006-遇到未处理的类型，请联系开发人员修改：' + type);
}
}
paramList.push({
type: type,
name: key,
key: keySub,
description: parameter.description,
children: children,
});
indexSub++;
});
}
return paramList.length > 0 ? paramList : undefined;
},
}

125
zyplayer-doc-ui/swagger-ui/src/assets/utils/formatjson.js Normal file
View File

@@ -0,0 +1,125 @@
/**
* 将对象处理成json格式化和着色的html
* @author 暮光：城中城
* @since 2017年5月7日
*/
export default {
// 需要在对象或列表后面添加注释的对象，例：{userList: "用户列表"}
// 那么在名字为userList的对象或列表后面都会加上：“用户列表” 这个注释
annotationObject: {},
tabStr: " ",
isArray: function(obj) {
return obj && typeof obj === 'object' && typeof obj.length === 'number'
&& !(obj.propertyIsEnumerable('length'));
},
processObjectToHtmlPre: function(obj, indent, addComma, isArray, isPropertyContent, showAnnotation) {
let htmlStr = this.processObject(obj, "", indent, addComma, isArray, isPropertyContent, showAnnotation);
htmlStr = '<pre class="json">' + htmlStr + '</pre>';
return htmlStr;
},
processObject: function(obj, keyName, indent, addComma, isArray, isPropertyContent, showAnnotation) {
let html = "";
let comma = (addComma) ? "<span class='comma'>,</span> " : "";
let type = typeof obj;
if (this.isArray(obj)) {
if (obj.length === 0) {
html += this.getRow(indent, "<span class='array-brace'>[ ]</span>" + comma, isPropertyContent);
} else {
let clpsHtml = '<span><img class="option-img" src="webjars/mg-ui/img/expanded.png" onClick="Formatjson.expImgClicked(this);" /></span><span class="collapsible">';
let annotation = '';
if(showAnnotation && keyName && this.annotationObject[keyName]) {
annotation = '<span class="annotation">// '+this.annotationObject[keyName]+'</span>';
}
html += this.getRow(indent, "<span class='array-brace'>[</span>"+clpsHtml+annotation, isPropertyContent);
for (let i = 0; i < obj.length; i++) {
html += this.processObject(obj[i], "", indent + 1, i < (obj.length - 1), true, false, showAnnotation);
}
clpsHtml = "</span>";
html += this.getRow(indent, clpsHtml + "<span class='array-brace'>]</span>" + comma);
}
} else if (type === 'object' && obj == null) {
html += this.formatLiteral("null", "", comma, indent, isArray, "null");
} else if (type === 'object') {
let numProps = 0;
for ( let prop in obj) {
numProps++;
}
if (numProps === 0) {
html += this.getRow(indent, "<span class='object-brace'>{ }</span>" + comma, isPropertyContent);
} else {
let clpsHtml = '<span><img class="option-img" src="webjars/mg-ui/img/expanded.png" onClick="Formatjson.expImgClicked(this);" /></span><span class="collapsible">';
let annotation = '';
if(showAnnotation && keyName && this.annotationObject[keyName]) {
annotation = '<span class="annotation">// '+this.annotationObject[keyName]+'</span>';
}
html += this.getRow(indent, "<span class='object-brace'>{</span>"+clpsHtml+annotation, isPropertyContent);
let j = 0;
for ( let prop in obj) {
let processStr = '<span class="property-name">"' + prop + '"</span>: ' + this.processObject(obj[prop], prop, indent + 1, ++j < numProps, false, true, showAnnotation);
html += this.getRow(indent + 1, processStr);
}
clpsHtml = "</span>";
html += this.getRow(indent, clpsHtml + "<span class='object-brace'>}</span>" + comma);
}
} else if (type === 'number') {
html += this.formatLiteral(obj, "", comma, indent, isArray, "number");
} else if (type === 'boolean') {
html += this.formatLiteral(obj, "", comma, indent, isArray, "boolean");
} else if (type === 'function') {
obj = this.formatFunction(indent, obj);
html += this.formatLiteral(obj, "", comma, indent, isArray, "function");
} else if (type === 'undefined') {
html += this.formatLiteral("undefined", "", comma, indent, isArray, "null");
} else {
html += this.formatLiteral(obj, "\"", comma, indent, isArray, "string");
}
return html;
},
expImgClicked: function(img){
let container = img.parentNode.nextSibling;
if(!container) return;
let disp = "none";
let src = "webjars/mg-ui/img/collapsed.png";
if(container.style.display === "none"){
disp = "inline";
src = "webjars/mg-ui/img/expanded.png";
}
container.style.display = disp;
img.src = src;
},
formatLiteral: function(literal, quote, comma, indent, isArray, style) {
if (typeof literal == 'string') {
literal = literal.split("<").join("&lt;").split(">").join("&gt;");
}
let str = "<span class='" + style + "'>" + quote + literal + quote + comma + "</span>";
if (isArray) {
str = this.getRow(indent, str);
}
return str;
},
formatFunction: function(indent, obj) {
let tabs = "";
for (let i = 0; i < indent; i++) {
tabs += this.tabStr;
}
let funcStrArray = obj.toString().split("\n");
let str = "";
for (let i = 0; i < funcStrArray.length; i++) {
str += ((i === 0) ? "" : tabs) + funcStrArray[i] + "\n";
}
return str;
},
getRow: function(indent, data, isPropertyContent) {
let tabs = "";
for (let i = 0; i < indent && !isPropertyContent; i++) {
tabs += this.tabStr;
}
if (data != null && data.length > 0 && data.charAt(data.length - 1) !== "\n") {
data = data + "\n";
}
return tabs + data;
}
}

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

@@ -75,6 +75,11 @@
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: {
@@ -111,10 +116,10 @@
}
this.$store.commit('setSwaggerDoc', v2Doc);
let metaInfo = {url};
let treeData = createTreeViewByTag(v2Doc);
this.treeData = getTreeDataForTag(v2Doc, treeData.pathIndex, metaInfo);
this.$store.commit('setSwaggerTreePathMap', treeData.treePathDataMap);
setTimeout(() => this.treeDataLoading = false, 300);
let treeData = createTreeViewByTag(v2Doc, '');
this.treeData = getTreeDataForTag(v2Doc, treeData.pathData, metaInfo);
this.$store.commit('setSwaggerTreePathMap', treeData.pathDataMap);
setTimeout(() => this.treeDataLoading = false, 100);
});
},
toJsonObj(value) {

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

@@ -23,7 +23,7 @@ let routers = [
},
{
path: '/doc/manage',
name: '文档管理',
name: '文档地址管理',
meta: {
icon: 'FileTextOutlined'
},
@@ -37,9 +37,17 @@ let routers = [
},
component: EmptyLayout,
children: [
{
path: '/doc/setting/globalParam',
name: '全局参数',
component: () => import('./views/doc/GlobalParam.vue')
},
{
path: '/doc/setting/view',
name: '展示配置',
meta: {
hidden: true,
},
component: () => import('./views/common/SettingView.vue')
},
]

199
zyplayer-doc-ui/swagger-ui/src/store/SwaggerDocUtil.js
View File

@@ -1,146 +1,95 @@
export function getDefinitions(definitions) {
if (!definitions) {
return {};
}
let swaggerDefinitions = {};
Object.keys(definitions).forEach((key) => {
swaggerDefinitions["#/definitions/" + key] = definitions[key];
});
return swaggerDefinitions;
}
export function createTreeViewByTag(swagger, keywords) {
let pathIndex = {}, treePathDataMap = {};
let paths = swagger.paths;
let domain = swagger.domainUrl;// 服务器代理会返回此属性
let rewriteDomainUrl = swagger.rewriteDomainUrl;// 服务器代理会返回此属性
if (!paths) {
return;
}
if (!domain) {
domain = "http://" + swagger.host + swagger.basePath;
}
if (domain.substring(domain.length - 1) === "/") {
domain = domain.substring(0, domain.length - 1);
}
//console.log(paths);
Object.keys(paths).forEach(key => {
//console.log(key, paths[key]);
setRequestMethodForTag(rewriteDomainUrl, domain, paths[key], pathIndex, key, "get", treePathDataMap);
setRequestMethodForTag(rewriteDomainUrl, domain, paths[key], pathIndex, key, "head", treePathDataMap);
setRequestMethodForTag(rewriteDomainUrl, domain, paths[key], pathIndex, key, "post", treePathDataMap);
setRequestMethodForTag(rewriteDomainUrl, domain, paths[key], pathIndex, key, "put", treePathDataMap);
setRequestMethodForTag(rewriteDomainUrl, domain, paths[key], pathIndex, key, "patch", treePathDataMap);
setRequestMethodForTag(rewriteDomainUrl, domain, paths[key], pathIndex, key, "delete", treePathDataMap);
setRequestMethodForTag(rewriteDomainUrl, domain, paths[key], pathIndex, key, "options", treePathDataMap);
setRequestMethodForTag(rewriteDomainUrl, domain, paths[key], pathIndex, key, "trace", treePathDataMap);
});
// console.log(pathIndex);
// console.log(treePathDataMap);
// console.log(treeData);
return {pathIndex: pathIndex, treePathDataMap: treePathDataMap};
}
const methodArray = ["get", "head", "post", "put", "patch", "delete", "options", "trace"];
/**
* 设置对象的各种请求方式，存在则复制
* @param source 资源，原始json的paths的指定对象
* @param pathObj 当前的待赋值对象
* @param url url绝对路径
* @param method 请求方式，post、get...
* @returns
* 通过tag创建文档树
* @param swagger 文档内容
* @param keywords 搜索内容
* @returns {{pathDataMap: {}, pathData: {}}}
*/
function setRequestMethodForTag(rewriteDomainUrl, domain, source, pathObj, url, method, treePathDataMap) {
if (!source[method] || !source[method].tags) {
return;
export function createTreeViewByTag(swagger, keywords) {
let pathData = {}, pathDataMap = {};
let swaggerPaths = swagger.paths;
if (!swaggerPaths) {
return {pathDataMap, pathData};
}
source[method].tags.forEach(function(val, index) {
let tempObj = pathObj[val];
if(!tempObj) {
tempObj = pathObj[val] = {};
//console.log(swaggerPaths);
Object.keys(swaggerPaths).forEach(url => {
//console.log(key, swaggerPaths[key]);
let pathMethods = swaggerPaths[url];
for (let method of methodArray) {
if (!pathMethods[method] || !pathMethods[method].tags) {
continue;
}
pathMethods[method].tags.forEach(tag => {
let pathTag = pathData[tag];
if (!pathTag) {
pathTag = pathData[tag] = {};
}
let pathTagUrl = pathTag[url];
if (!pathTagUrl) {
pathTagUrl = pathTag[url] = {};
}
let tempPath = url + "." + method;
pathTagUrl[method] = pathMethods[method];
pathTagUrl[method].path = tempPath;
pathTagUrl[method].url = url;
pathTagUrl[method].method = method;
// url对应文档的映射
pathDataMap[tempPath] = pathMethods[method];
});
}
let tempUrlObj = tempObj[url];
if(!tempUrlObj) {
tempUrlObj = tempObj[url] = {};
}
let tempPath = url + "." + method;
tempUrlObj[method] = source[method];
tempUrlObj[method].path = tempPath;
tempUrlObj[method].url = url;
tempUrlObj[method].method = method;
tempUrlObj[method].domain = domain;
tempUrlObj[method].rewriteDomainUrl = rewriteDomainUrl;
treePathDataMap[tempPath] = source[method];
});
return {pathData, pathDataMap};
}
export function getTreeDataForTag(swagger, pathData, metaInfo) {
return [
{
key: 'main',
title: swagger.title || 'Swagger接口文档',
key: '0-0',
children: getTreeHtmlForTag(pathData, 0, metaInfo)
children: getTreeHtmlForTag(swagger.tags, pathData, metaInfo)
}
];
}
function getTreeHtmlForTag(pathData, treeId, metaInfo) {
function getTreeHtmlForTag(swaggerTags, pathData, metaInfo) {
let treeData = [];
let indexNow = 1;
// get, head, post, put, patch, delete, options, trace
let actionArrays = ["get", "head", "post", "put", "patch", "delete", "options", "trace"];
Object.keys(pathData).forEach(key => {
let tempNode = pathData[key];
let tempTreeId = treeId + "_" + indexNow;
// 只有一个子元素，而且有method元素，说明是只有一个节点
let nodeSub = getObjectFirstAttributeIfOnly(tempNode);
if (nodeSub && nodeSub.method) {
nodeSub.treeId = tempTreeId;
let title = nodeSub.summary || nodeSub.path;
treeData.push({
title: title,
key: tempTreeId,
isLeaf: true,
method: nodeSub.method,
query: {
...metaInfo,
path: nodeSub.url,
method: nodeSub.method,
}
});
} else if (actionArrays.indexOf(key) >= 0) {
tempNode.treeId = tempTreeId;
let title = tempNode.summary || tempNode.path;
treeData.push({
title: title,
key: tempTreeId,
isLeaf: true,
method: tempNode.method,
query: {
...metaInfo,
path: tempNode.url,
method: tempNode.method,
}
});
} else {
treeData.push({title: key, key: key, children: getTreeHtmlForTag(tempNode, tempTreeId, metaInfo)});
let indexTag = 1;
// 遍历分组
swaggerTags.forEach(tag => {
let indexUrl = 1;
let urlTree = [];
let pathTagNode = pathData[tag.name];
if (!pathTagNode) {
return;
}
indexNow++;
// 遍历路劲
Object.keys(pathTagNode).forEach(url => {
let indexMethod = 1;
let pathUrlNode = pathTagNode[url];
// 遍历方法
Object.keys(pathUrlNode).forEach(method => {
let tempTreeId = indexTag + "_" + indexUrl + "_" + indexMethod;
let methodNode = pathUrlNode[method];
methodNode.treeId = tempTreeId;
let title = methodNode.summary || methodNode.path;
urlTree.push({
title: title,
key: tempTreeId,
isLeaf: true,
method: methodNode.method,
query: {
...metaInfo,
path: methodNode.url,
method: methodNode.method,
}
});
indexMethod++;
});
indexUrl++;
});
treeData.push({title: tag.name, key: indexTag, children: urlTree});
indexTag++;
});
return treeData;
}
/**
* 如果对象只有一个属性则返回第一个属性，否则返回null
* @param data
* @returns
*/
function getObjectFirstAttributeIfOnly(data) {
let len = 0, value = "";
for (let key in data) {
if (++len > 1) {
return undefined;
}
value = data[key];
}
return value;
}

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

@@ -1,5 +1,5 @@
import {createStore} from 'vuex'
import {getDefinitions, createTreeViewByTag} from './SwaggerDocUtil'
import {createTreeViewByTag} from './SwaggerDocUtil'
export default createStore({
state() {
@@ -9,7 +9,7 @@ export default createStore({
pageTabNameMap: {},
swaggerDoc: {},
swaggerDefinitions: {},
swaggerTreePathMap: [],
swaggerTreePathMap: {},
}
},
mutations: {
@@ -21,7 +21,7 @@ export default createStore({
},
setSwaggerDoc(state, swaggerDoc) {
state.swaggerDoc = swaggerDoc;
state.swaggerDefinitions = getDefinitions(swaggerDoc.definitions);
state.swaggerDefinitions = swaggerDoc.definitions || {};
},
setSwaggerTreePathMap(state, swaggerTreePathMap) {
state.swaggerTreePathMap = swaggerTreePathMap;

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

@@ -28,7 +28,7 @@
</a-form-item>
</a-form>
<a-table :dataSource="docList" :columns="docListColumns" size="middle"
:loading="docListLoading"
:loading="docListLoading" :pagination="false"
:scroll="{ x: 1400, y: 'calc(100vh - 340px)' }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'operation'">
@@ -158,39 +158,14 @@
docStatus: [{type: 'number', required: true, message: '请选择文档状态', trigger: 'change'}],
},
docListColumns: [
{
title: 'ID',
dataIndex: 'id',
width: 70,
}, {
title: '文档名称',
dataIndex: 'name',
width: 150,
}, {
title: '文档类型',
dataIndex: 'docType',
width: 90,
}, {
title: '开放访问',
dataIndex: 'openVisit',
width: 90,
}, {
title: '状态',
dataIndex: 'docStatus',
width: 90,
}, {
title: '文档地址',
dataIndex: 'docUrl',
}, {
title: '目标域名',
dataIndex: 'rewriteDomain',
width: 250,
}, {
title: '操作',
dataIndex: 'operation',
fixed: 'right',
width: 170,
},
{title: 'ID', dataIndex: 'id', width: 70},
{title: '文档名称', dataIndex: 'name', width: 150},
{title: '文档类型', dataIndex: 'docType', width: 90},
{title: '开放访问', dataIndex: 'openVisit', width: 90},
{title: '状态', dataIndex: 'docStatus', width: 90},
{title: '文档地址', dataIndex: 'docUrl'},
{title: '目标域名', dataIndex: 'rewriteDomain', width: 250},
{title: '操作', dataIndex: 'operation', fixed: 'right', width: 170},
],
};
},

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

@@ -1,7 +1,38 @@
<template>
<a-tabs v-model:activeKey="activePage" closable @tab-click="changePage" style="padding: 5px 10px 0;">
<a-tab-pane tab="接口说明" key="doc">
{{activePage}}
<a-form :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-item label="接口地址">{{docInfoShow.url}}</a-form-item>
<a-form-item label="说明">{{docInfoShow.description}}</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 === 'htmlStr'">
<div v-html="text"></div>
</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>
</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">
{{activePage}}
@@ -10,35 +41,122 @@
</template>
<script>
import {toRefs, ref, reactive, onMounted, onActivated} from 'vue';
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 { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import swaggerAnalysis from '../../assets/utils/SwaggerAnalysisV2'
export default {
setup() {
const route = useRoute();
const store = useStore();
let activePage = ref('doc');
onMounted(() => {
console.log('DocView onMounted', route.query);
let requestParamList = ref([]);
let responseParamList = ref([]);
let docInfoShow = ref({
url: '',
description: '',
method: '',
consumes: '',
produces: '',
});
let isLoadSuccess = ref(false);
let intervalNum = 0;
let intervalTimer = undefined;
const initLoadDocument = () => {
let path = route.query.path + '.' + route.query.method;
if (Object.keys(store.state.swaggerTreePathMap).length <= 0) {
console.log('文档尚未加载，等待加载完成');
if (!intervalTimer) {
intervalTimer = setInterval(() => {
if (isLoadSuccess.value || intervalNum++ > 50) {
clearInterval(intervalTimer);
return;
}
if (Object.keys(store.state.swaggerTreePathMap).length > 0) {
console.log('文档内容改变，重新加载文档');
initLoadDocument();
}
}, 1000);
}
return;
}
let docInfo = store.state.swaggerTreePathMap[path];
if (!docInfo) {
message.error('没有找到对应的文档');
return;
}
isLoadSuccess.value = true;
store.commit('addTableName', {key: route.fullPath, val: docInfo.summary});
// 解析接口说明
let consumes = '', produces = '';
if (docInfo.consumes && docInfo.consumes.length > 0) {
consumes = docInfo.consumes.join(' ');
}
if (docInfo.produces && docInfo.produces.length > 0) {
produces = docInfo.produces.join(' ');
}
docInfoShow.value = {
url: docInfo.url,
description: (docInfo.description || docInfo.summary),
method: docInfo.method || '',
consumes: consumes,
produces: produces,
};
// 解析请求参数
let definitionsDataMap = store.state.swaggerDefinitions;
requestParamList.value = swaggerAnalysis.getRequestParamList(docInfo.parameters, definitionsDataMap);
responseParamList.value = swaggerAnalysis.getResponseParamList(docInfo.responses, definitionsDataMap);
}
onMounted(() => {
initLoadDocument();
});
const changePage = () => {
}
return {
docInfoShow,
activePage,
changePage,
requestParamList,
requestParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 200},
{title: '说明', dataIndex: 'description'},
{title: '类型', dataIndex: 'type'},
{title: '参数位置', dataIndex: 'in'},
{title: '是否必填', dataIndex: 'required'},
],
responseParamList,
responseCodeListColumns: [
{title: '状态码', dataIndex: 'code', width: 100},
{title: '说明', dataIndex: 'desc'},
{title: '类型', dataIndex: 'type'},
],
responseParamListColumns: [
{title: '参数名', dataIndex: 'name', width: 200},
{title: '说明', dataIndex: 'description'},
{title: '类型', dataIndex: 'type'},
],
};
},
};
</script>
<style>
/* S-JSON展示的样式 */
pre.json{margin-top:0px;margin-bottom:0px;}
pre.json .canvas{font:10pt georgia;background-color:#ececec;color:#000000;border:1px solid #cecece;}
pre.json .object-brace{color:#00aa00;font-weight:bold;}
pre.json .array-brace{color:#0033ff;font-weight:bold;}
pre.json .property-name{color:#cc0000;font-weight:bold;}
pre.json .string{color:#007777;}
pre.json .number{color:#aa00aa;}
pre.json .boolean{color:#0000ff;}
pre.json .function{color:#aa6633;text-decoration:italic;}
pre.json .null{color:#0000ff;}
pre.json .comma{color:#000000;font-weight:bold;}
pre.json .annotation{color:#aaa;}
pre img{cursor: pointer;}
/* E-JSON展示的样式 */
</style>

119
zyplayer-doc-ui/swagger-ui/src/views/doc/GlobalParam.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<div style="margin-bottom: 10px;text-align: right;">
<a-button @click="searchDocList" type="primary">刷新</a-button>
<a-button @click="addDocLine">新建</a-button>
</div>
<a-table :dataSource="docList" :columns="docListColumns" size="middle"
:loading="docListLoading" :pagination="false"
:scroll="{ x: 1000, y: 'calc(100vh - 340px)' }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'paramKey'">
<a-input v-if="record.isEdit" placeholder="请输入参数名称" v-model:value="docEdit.paramKey"></a-input>
<span v-else>{{text}}</span>
</template>
<template v-if="column.dataIndex === 'paramValue'">
<a-textarea v-if="record.isEdit" :rows="1" placeholder="请输入参数值" v-model:value="docEdit.paramValue"></a-textarea>
<span v-else>{{text}}</span>
</template>
<template v-if="column.dataIndex === 'paramType'">
<template v-if="record.isEdit">
<a-select placeholder="参数位置" v-model:value="docEdit.paramType" style="width: 110px;">
<a-select-option :value="1">Form</a-select-option>
<a-select-option :value="2">Header</a-select-option>
<a-select-option :value="3">Cookie</a-select-option>
</a-select>
</template>
<template v-else>
<a-tag color="green" v-if="text === 1">Form</a-tag>
<a-tag color="pink" v-else-if="text === 2">Header</a-tag>
<a-tag color="pink" v-else-if="text === 3">Cookie</a-tag>
</template>
</template>
<template v-if="column.dataIndex === 'operation'">
<template v-if="record.isEdit">
<a-button type="link" @click="cancelEditDoc(record)">取消</a-button>
<a-button type="link" @click="saveEditDoc(record)">保存</a-button>
</template>
<template v-else>
<a-button type="link" @click="editDoc(record)">编辑</a-button>
<a-popconfirm title="确定要删除吗？" @confirm="deleteDoc(record)">
<a-button type="link" danger>删除</a-button>
</a-popconfirm>
</template>
</template>
</template>
</a-table>
</template>
<script>
import { toRefs, ref, reactive, onMounted } from 'vue';
import {zyplayerApi} from '../../api';
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
export default {
setup() {
const store = useStore()
let docList = ref([]);
let docListLoading = ref(false);
const searchDocList = async () => {
docListLoading.value = true;
zyplayerApi.docSwaggerGlobalParamList().then(res => {
setTimeout(() => docListLoading.value = false, 500);
docList.value = res.data || [];
});
};
let docEdit = ref({});
const addDocLine = () => {
if (docEdit.value.isEdit) {
return;
}
let newLine = {isEdit: true};
docList.value.push(newLine);
docEdit.value = newLine;
};
const editDoc = (record) => {
record.isEdit = true;
docEdit.value = {...record};
};
const cancelEditDoc = (record) => {
record.isEdit = false;
if (!record.id) {
docList.value = docList.value.filter(item => item !== record);
}
docEdit.value = {};
};
const saveEditDoc = (record) => {
zyplayerApi.docSwaggerGlobalParamUpdate(docEdit.value).then(res => {
record.isEdit = false;
searchDocList();
});
};
const deleteDoc = async (record) => {
zyplayerApi.docSwaggerGlobalParamUpdate({id: record.id, yn: 0}).then(res => {
searchDocList();
});
};
onMounted(() => {
searchDocList();
});
return {
docList,
docListLoading,
docEdit,
searchDocList,
deleteDoc,
editDoc,
saveEditDoc,
cancelEditDoc,
addDocLine,
docListColumns: [
{title: '参数名称', dataIndex: 'paramKey', width: 250},
{title: '参数值', dataIndex: 'paramValue'},
{title: '参数位置', dataIndex: 'paramType', width: 120},
{title: '操作', dataIndex: 'operation', fixed: 'right', width: 170},
],
};
},
};
</script>