514 lines
19 KiB
HTML
514 lines
19 KiB
HTML
<!DOCTYPE HTML>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||
<!--无论发布在哪、如何修改源码，请勿删除本行原作者信息，感谢-->
|
||
<meta name="author" content="开发者列表：暮光：城中城，项目地址：https://gitee.com/zyplayer/zyplayer-doc" />
|
||
<title>dubbo文档管理系统</title>
|
||
<link rel="shortcut icon" href="webjars/doc-dubbo/img/dubbo.ico"/>
|
||
<link rel="stylesheet" href="webjars/doc-dubbo/css/element-ui.css">
|
||
<link rel="stylesheet" href="webjars/doc-dubbo/css/doc-dubbo.css" />
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<el-container style="height: 100%;">
|
||
<el-aside width="auto" style="height: 100%;">
|
||
<div class="logo" @click="aboutDialogVisible = true">zyplayer-doc-dubbo</div>
|
||
<div style="padding: 10px;">
|
||
<div align="center">
|
||
<el-dropdown split-button type="primary" @command="dropdownCommand">
|
||
<el-upload class="upload-page-file" action="zyplayer-doc-dubbo/doc-dubbo/uploadDocJar"
|
||
:on-success="uploadFileSuccess" :on-error="uploadFileError"
|
||
name="file" :show-file-list="false" :limit="999">
|
||
<el-button type="primary" icon="el-icon-upload">上传文档JAR</el-button>
|
||
</el-upload>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item command="reload" icon="el-icon-refresh">重新加载服务列表</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
<!--<el-row><el-switch v-model="isCollapse"></el-switch></el-row>-->
|
||
<el-input v-model="searchKeywords" placeholder="搜索文档" style="margin: 10px 0;">
|
||
<el-button slot="append" icon="el-icon-search" v-on:click="searchByKeywords"></el-button>
|
||
</el-input>
|
||
<!--<el-menu default-active="" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">-->
|
||
<!--<el-submenu index="1">-->
|
||
<!--<template slot="title">-->
|
||
<!--<i class="el-icon-setting"></i>-->
|
||
<!--<span slot="title">文档管理</span>-->
|
||
<!--</template>-->
|
||
<!--<el-menu-item index="1-1">管理服务列表</el-menu-item>-->
|
||
<!--</el-submenu>-->
|
||
<!--</el-menu>-->
|
||
<el-tree :data="pathIndex" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||
</div>
|
||
</el-aside>
|
||
<el-container>
|
||
<el-tabs type="border-card" style="width: 100%;">
|
||
<el-tab-pane label="接口说明">
|
||
<div v-if="!dubboInfo.interface">
|
||
请先选择服务
|
||
</div>
|
||
<el-form v-else label-width="80px">
|
||
<el-form-item label="服务：">
|
||
{{dubboInfo.interface}}
|
||
</el-form-item>
|
||
<el-form-item label="方法：">
|
||
{{dubboInfo.method}}
|
||
</el-form-item>
|
||
<el-form-item label="说明：">
|
||
<div v-if="dubboInfoExplainShow">
|
||
<pre>{{dubboInfo.docInfo.explain}}<el-button @click.prevent="dubboInfoExplainShow = false;" style="float: right;">编辑</el-button></pre>
|
||
</div>
|
||
<div v-else>
|
||
<el-input type="textarea" :rows="4" placeholder="维护人员、使用说明、便于搜索的信息" v-model="docInfoExplainInput"></el-input>
|
||
<el-button @click.prevent="dubboInfoExplainShow = true;" style="float: right;margin: 5px;">取消</el-button>
|
||
<el-button type="primary" @click.prevent="saveDocInfoExplain" style="float: right;margin: 5px;">保存</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="节点：">
|
||
<el-table :data="dubboInfo.nodeList" border style="width: 100%">
|
||
<el-table-column prop="application" label="应用"></el-table-column>
|
||
<el-table-column prop="ip" label="IP"></el-table-column>
|
||
<el-table-column prop="port" label="端口"></el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
<el-form-item label="参数：">
|
||
<!--<div slot="label">-->
|
||
<!--<el-tooltip placement="top">-->
|
||
<!--<div slot="content">1. 顺序必须和参数的顺序一致<br/>2. 参数名意义不大，可不填</div>-->
|
||
<!--<i class="el-icon-info" style="color: #aaa;"></i>-->
|
||
<!--</el-tooltip>-->
|
||
<!--参数：-->
|
||
<!--</div>-->
|
||
<el-table :data="docParamList" border style="width: 100%; margin-bottom: 5px;">
|
||
<el-table-column label="顺序" width="100">
|
||
<template slot-scope="scope">{{scope.$index}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="参数名" width="200">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.paramName"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="类型" width="300">
|
||
<template slot-scope="scope">{{scope.row.paramType}}</template>
|
||
<!--<template slot-scope="scope">-->
|
||
<!--<el-select v-model="scope.row.paramType" filterable allow-create clearable placeholder="请选择" style="width: 100%;">-->
|
||
<!--<el-option v-for="item in paramTypeOptions" :key="item.value" :label="item.value" :value="item.value"></el-option>-->
|
||
<!--</el-select>-->
|
||
<!--</template>-->
|
||
</el-table-column>
|
||
<el-table-column label="说明">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.paramDesc"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-button @click.prevent="saveDocInfoParam" type="primary" style="float: right;margin: 5px;">保存</el-button>
|
||
<!--<el-button @click.prevent="addDocParam" style="float: right;margin: 5px;">添加</el-button>-->
|
||
</el-form-item>
|
||
<el-form-item label="返回值：">
|
||
{{dubboInfo.docInfo.resultType}}
|
||
</el-form-item>
|
||
<el-form-item label="结果：">
|
||
<div v-if="dubboInfoResultShow">
|
||
<pre>{{dubboInfo.docInfo.result}}<el-button @click.prevent="dubboInfoResultShow = false;" style="float: right;">编辑</el-button></pre>
|
||
</div>
|
||
<div v-else>
|
||
<el-input type="textarea" :rows="4" placeholder="结果集说明等" v-model="docInfoResultInput"></el-input>
|
||
<el-button @click.prevent="dubboInfoResultShow = true;" style="float: right;margin: 5px;">取消</el-button>
|
||
<el-button type="primary" @click.prevent="saveDocInfoResult" style="float: right;margin: 5px;">保存</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="在线调试">
|
||
<div v-if="!dubboInfo.interface">
|
||
请先选择服务
|
||
</div>
|
||
<div v-loading="onlineDebugLoading" v-else>
|
||
<el-input placeholder="请输入内容" v-model="dubboInfo.function" class="input-with-select">
|
||
<el-select v-model="requestHostValue" slot="prepend" placeholder="请选择" style="width: 200px;">
|
||
<el-option v-for="item in requestHostOptions" :key="item.value" :label="item.value" :value="item.value"></el-option>
|
||
</el-select>
|
||
<el-button slot="append" @click.prevent="requestExecute">执行</el-button>
|
||
</el-input>
|
||
<el-form label-width="100px" label-position="top">
|
||
<el-form-item label="请求参数：">
|
||
<el-table :data="docParamRequestList" border style="width: 100%; margin: 10px 0;">
|
||
<el-table-column label="顺序" width="100">
|
||
<template slot-scope="scope">{{scope.$index}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="参数名">
|
||
<template slot-scope="scope">{{scope.row.paramName}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="类型">
|
||
<template slot-scope="scope">{{scope.row.paramType}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="参数值">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.paramValue"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="说明">
|
||
<template slot-scope="scope">{{scope.row.paramDesc}}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
<el-form-item label="请求结果：">
|
||
<div v-html="requestResult"></div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-container>
|
||
</el-container>
|
||
<el-dialog title="关于zyplayer-doc-dubbo" :visible.sync="aboutDialogVisible" width="600px">
|
||
<el-form>
|
||
<el-form-item label="项目地址：">
|
||
<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>
|
||
</el-form-item>
|
||
<el-form-item label="开发人员：">
|
||
<a target="_blank" href="http://zyplayer.com">暮光：城中城</a>
|
||
</el-form-item>
|
||
<template v-if="upgradeInfo.lastVersion">
|
||
<el-form-item label="当前版本：">{{upgradeInfo.nowVersion}}</el-form-item>
|
||
<el-form-item label="最新版本：">{{upgradeInfo.lastVersion}}</el-form-item>
|
||
<el-form-item label="升级地址：">
|
||
<a target="_blank" :href="upgradeInfo.upgradeUrl">{{upgradeInfo.upgradeUrl}}</a>
|
||
</el-form-item>
|
||
<el-form-item label="升级内容：">{{upgradeInfo.upgradeContent}}</el-form-item>
|
||
</template>
|
||
<el-form-item label="">
|
||
欢迎加群讨论，QQ群号：466363173，欢迎提交需求，欢迎使用和加入开发！
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="webjars/doc-dubbo/vue/vue.js"></script>
|
||
<script type="text/javascript" src="webjars/doc-dubbo/js/element-ui.js"></script>
|
||
<!-- ajax 用到了jquery -->
|
||
<script type="text/javascript" src="webjars/doc-dubbo/js/jquery-3.1.0.min.js"></script>
|
||
<script type="text/javascript" src="webjars/doc-dubbo/js/common.js"></script>
|
||
<script type="text/javascript" src="webjars/doc-dubbo/js/toast.js"></script>
|
||
<script type="text/javascript" src="webjars/doc-dubbo/js/formatjson.js"></script>
|
||
<script type="text/javascript" src="webjars/doc-dubbo/js/doc-dubbo-tree.js"></script>
|
||
|
||
<script>
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
isCollapse: false,
|
||
aboutDialogVisible: false,
|
||
onlineDebugLoading: false,
|
||
pathIndex: [],
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'label'
|
||
},
|
||
// 展示的信息
|
||
dubboInfo: {},
|
||
dubboInfoExplainShow: true,
|
||
docInfoExplainInput: "",
|
||
dubboInfoResultShow: true,
|
||
docInfoResultInput: "",
|
||
// 请求的IP端口下拉选项
|
||
requestHostOptions: [],
|
||
requestHostValue: "",
|
||
requestResult: "",
|
||
// 依据目录树存储的map全局对象
|
||
treePathDataMap: new Map(),
|
||
// dubbo列表
|
||
dubboDocList: [],
|
||
dubboDocMap: [],
|
||
// 搜索的输入内容
|
||
searchKeywords: "",
|
||
docParamList: [],
|
||
docParamRequestList: [],
|
||
// 参数类型选项
|
||
paramTypeOptions: [{
|
||
value: 'java.lang.String'
|
||
}, {
|
||
value: 'java.lang.Long'
|
||
}, {
|
||
value: 'java.lang.Integer'
|
||
}],
|
||
paramTypeValue: "java.lang.String",
|
||
// 升级信息
|
||
upgradeInfo: {},
|
||
}
|
||
},
|
||
watch: {
|
||
|
||
},
|
||
mounted: function () {
|
||
// 无论发布在哪、如何修改源码，请勿删除本行原作者信息，感谢
|
||
console.log("%c项目信息：\n开发者列表：暮光：城中城\n项目地址：https://gitee.com/zyplayer/zyplayer-doc", "color:red");
|
||
this.doGetServiceList();
|
||
this.checkSystemUpgrade();
|
||
},
|
||
methods: {
|
||
handleOpen(key, keyPath) {
|
||
console.log(key, keyPath);
|
||
},
|
||
handleClose(key, keyPath) {
|
||
console.log(key, keyPath);
|
||
},
|
||
handleNodeClick(data) {
|
||
if (data.children == null) {
|
||
console.log(data);
|
||
var path = data.interface;
|
||
var application = data.application;
|
||
var docInfo = app.dubboDocMap[path];
|
||
if (!!docInfo) {
|
||
this.createDocInfo(path, data.method);
|
||
} else {
|
||
var service = path.substring(0, path.lastIndexOf("."));
|
||
var method = path.substring(path.lastIndexOf(".") + 1, path.length);
|
||
var param = {service: service, method: method, application: application};
|
||
ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/findDocInfo", "post", "json", param, function (json) {
|
||
if (validateResult(json)) {
|
||
if (!!json.data) {
|
||
app.dubboDocMap[json.data.function] = json.data;
|
||
}
|
||
app.createDocInfo(path, method);
|
||
}
|
||
});
|
||
}
|
||
//console.log(app.dubboInfo);
|
||
}
|
||
},
|
||
createDocInfo(path, method) {
|
||
var docInfo = app.dubboDocMap[path];
|
||
var dubboInfo = app.treePathDataMap.get(path);
|
||
dubboInfo.method = method;
|
||
dubboInfo.function = path;
|
||
dubboInfo.docInfo = docInfo || {};
|
||
// 清空再赋值才会重新渲染
|
||
app.dubboInfo = {};
|
||
app.dubboInfo = dubboInfo;
|
||
app.docInfoExplainInput = dubboInfo.docInfo.explain;
|
||
app.docParamList = [];
|
||
app.docParamList = dubboInfo.docInfo.params || [];
|
||
this.createDocParamRequestList();
|
||
// 请求相关
|
||
app.requestResult = "";
|
||
app.requestHostValue = "";
|
||
app.requestHostOptions = [];
|
||
for (var i = 0; i < dubboInfo.nodeList.length; i++) {
|
||
var item = dubboInfo.nodeList[i];
|
||
let option = item.ip + ":" + item.port;
|
||
if (!!item.version) option += " V" + item.version;
|
||
if (!!item.group) option += " G" + item.group;
|
||
app.requestHostOptions.push({value: option});
|
||
}
|
||
if (app.requestHostOptions.length > 0) {
|
||
app.requestHostValue = app.requestHostOptions[0].value;
|
||
}
|
||
},
|
||
uploadFileError(err) {
|
||
app.$message({message: "上传失败，" + err, type: 'error'});
|
||
},
|
||
uploadFileSuccess(response) {
|
||
if (validateResult(response)) {
|
||
app.$message({message: "上传成功！", type: 'success'});
|
||
}
|
||
},
|
||
reloadService() {
|
||
ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/reloadService", "post", "json", {}, function (json) {
|
||
if (validateResult(json)) {
|
||
app.$message({message: '加载成功！', type: 'success'});
|
||
app.doGetServiceList();
|
||
}
|
||
});
|
||
},
|
||
dropdownCommand(command) {
|
||
if(command == 'reload') {
|
||
this.reloadService();
|
||
}
|
||
},
|
||
searchByKeywords() {
|
||
app.pathIndex = createTreeViewByTreeWithMerge(app.dubboDocList, app.searchKeywords);
|
||
},
|
||
doGetServiceList() {
|
||
ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/getDocList", "post", "json", {}, function (json) {
|
||
if (validateResult(json)) {
|
||
app.dubboDocList = json.data.serverList || [];
|
||
app.dubboDocMap = json.data.docMap || {};
|
||
app.pathIndex = createTreeViewByTreeWithMerge(app.dubboDocList);
|
||
}
|
||
});
|
||
},
|
||
saveDocInfoExplain(){
|
||
this.doSaveDocInfo(app.docInfoExplainInput, null, null, true);
|
||
},
|
||
saveDocInfoResult(){
|
||
this.doSaveDocInfo(null, null, app.docInfoResultInput, true);
|
||
},
|
||
saveDocInfoParam() {
|
||
var docParamList = [];
|
||
for (var i = 0; i < app.docParamList.length; i++) {
|
||
var item = app.docParamList[i];
|
||
if (isNotEmpty(item.paramType)) {
|
||
docParamList.push(item);
|
||
}
|
||
}
|
||
var paramsJson = JSON.stringify(docParamList);
|
||
this.doSaveDocInfo(null, paramsJson, null, true);
|
||
},
|
||
createDocParamRequestList() {
|
||
var docParamList = [];
|
||
for (var i = 0; i < app.docParamList.length; i++) {
|
||
var item = app.docParamList[i];
|
||
if (isNotEmpty(item.paramType) || isNotEmpty(item.paramDesc)) {
|
||
docParamList.push(item);
|
||
}
|
||
}
|
||
app.docParamRequestList = docParamList;
|
||
},
|
||
doSaveDocInfo(explain, params, result, showSuccess){
|
||
var param = {
|
||
service: app.dubboInfo.interface,
|
||
method: app.dubboInfo.method,
|
||
resultType: app.dubboInfo.resultType,
|
||
paramValue: app.dubboInfo.paramValue,
|
||
version: app.dubboInfo.docInfo.version || 0,
|
||
explain: explain,
|
||
result: result,
|
||
paramsJson: params,
|
||
};
|
||
ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/saveDoc", "post", "json", param, function (json) {
|
||
if (validateResult(json)) {
|
||
app.dubboDocMap[json.data.function] = json.data;
|
||
app.dubboInfo.docInfo = json.data;
|
||
app.dubboInfoExplainShow = true;
|
||
app.dubboInfoResultShow = true;
|
||
app.docParamList = json.data.params || [];
|
||
app.createDocParamRequestList();
|
||
if (showSuccess) {
|
||
Toast.success("保存成功！");
|
||
}
|
||
}
|
||
});
|
||
},
|
||
addDocParam() {
|
||
var leadAdd = app.docParamList.length <= 0;
|
||
if (!leadAdd) {
|
||
var last = app.docParamList[app.docParamList.length - 1];
|
||
if (isNotEmpty(last.paramType) || isNotEmpty(last.paramDesc)) {
|
||
leadAdd = true;
|
||
}
|
||
}
|
||
if (leadAdd) {
|
||
app.docParamList.push({
|
||
paramName: '',
|
||
paramType: '',
|
||
paramDesc: '',
|
||
paramValue: '',
|
||
});
|
||
}
|
||
},
|
||
requestExecute() {
|
||
var fuc = app.dubboInfo.function;
|
||
var hostValue = app.requestHostValue;
|
||
var service = fuc.substring(0, fuc.lastIndexOf("."));
|
||
var method = fuc.substring(fuc.lastIndexOf(".") + 1, fuc.length);
|
||
var paramArr = hostValue.split(" ");
|
||
var ipPortArr = paramArr[0].split(":");
|
||
var version = '', group = '';
|
||
paramArr.forEach(item => {
|
||
if (item.startsWith("V")) version = item.substring(1, item.length);
|
||
if (item.startsWith("G")) group = item.substring(1, item.length);
|
||
});
|
||
var paramTypes = [];
|
||
var params = [];
|
||
for (var i = 0; i < app.docParamList.length; i++) {
|
||
var item = app.docParamList[i];
|
||
paramTypes.push(item.paramType);
|
||
params.push(item.paramValue || '');
|
||
}
|
||
var param = {
|
||
service: service,
|
||
method: method,
|
||
ip: ipPortArr[0],
|
||
port: ipPortArr[1],
|
||
version: version,
|
||
group: group,
|
||
paramTypes: JSON.stringify(paramTypes),
|
||
params: JSON.stringify(params),
|
||
};
|
||
app.requestResult = "";
|
||
app.onlineDebugLoading = true;
|
||
ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/request", "post", "json", param, function (json) {
|
||
app.onlineDebugLoading = false;
|
||
if (json.errCode == 200) {
|
||
try {
|
||
app.requestResult = Formatjson.processObjectToHtmlPre(JSON.parse(json.data), 0, false, false, false, false);
|
||
} catch (e) {
|
||
try {
|
||
app.requestResult = Formatjson.processObjectToHtmlPre(json.data, 0, false, false, false, false);
|
||
} catch (e) {
|
||
app.requestResult = json.data;
|
||
}
|
||
}
|
||
var paramsJson = JSON.stringify(app.docParamRequestList);
|
||
app.doSaveDocInfo(null, paramsJson, null, false);
|
||
} else {
|
||
app.requestResult = json.errMsg;
|
||
}
|
||
}, function (err) {
|
||
app.onlineDebugLoading = false;
|
||
app.requestResult = err.responseJSON.message;
|
||
});
|
||
},
|
||
checkSystemUpgrade() {
|
||
ajaxTemp("system/info/upgrade", "post", "json", {}, function (json) {
|
||
if (json.errCode == 200 && !!json.data) {
|
||
app.upgradeInfo = json.data;
|
||
console.log("zyplayer-doc发现新版本："
|
||
+ "\n升级地址：" + json.data.upgradeUrl
|
||
+ "\n当前版本：" + json.data.nowVersion
|
||
+ "\n最新版本：" + json.data.lastVersion
|
||
+ "\n升级内容：" + json.data.upgradeContent
|
||
);
|
||
}
|
||
});
|
||
},
|
||
}
|
||
});
|
||
|
||
</script>
|
||
<style>
|
||
html,body,#app {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100%;
|
||
}
|
||
pre{margin: 0;}
|
||
.el-menu {
|
||
box-sizing: border-box;
|
||
border-right: 0;
|
||
margin-right: 3px;
|
||
}
|
||
.el-tree{
|
||
margin-right: 3px;
|
||
}
|
||
.el-tree-node__content{
|
||
padding-right: 20px;
|
||
}
|
||
.el-tabs--border-card>.el-tabs__content{
|
||
height: calc(100vh - 100px);overflow-y: auto;
|
||
}
|
||
.logo{
|
||
background: linear-gradient(-90deg, #03DDE4 0%, #30AFED 51%, #8755FF 100%); cursor: pointer;
|
||
width: 100%; height:60px;line-height:60px;font-size: 25px;color: #fff;text-align: center;
|
||
}
|
||
.el-button-group>.el-button:first-child{padding: 0!important;border: 0;}
|
||
</style>
|
||
</html>
|
||
|