Files
zyplayer-doc/zyplayer-doc-dubbo/src/main/resources/doc-dubbo.html

423 lines
15 KiB
HTML
Raw Normal View History

2019-02-13 23:06:49 +08:00
<!DOCTYPE HTML>
2019-02-13 21:29:09 +08:00
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
2019-02-18 12:18:12 +08:00
<!--无论发布在哪、如何修改源码,请勿删除本行原作者信息,感谢-->
<meta name="author" content="暮光城中城项目地址https://gitee.com/zyplayer/zyplayer-doc" />
2019-02-13 21:29:09 +08:00
<title>dubbo文档管理系统</title>
2019-02-15 20:58:37 +08:00
<link rel="shortcut icon" href="webjars/doc-dubbo/img/dubbo.ico"/>
<link rel="stylesheet" href="webjars/doc-dubbo/css/element-ui.css">
2019-02-14 22:38:18 +08:00
<link rel="stylesheet" href="webjars/doc-dubbo/css/doc-dubbo.css" />
2019-02-13 21:29:09 +08:00
</head>
<body>
<div id="app">
<el-container style="height: 100%;">
2019-02-14 22:38:18 +08:00
<el-aside width="auto" style="height: 100%;">
2019-02-15 20:58:37 +08:00
<div class="logo" @click="aboutDialogVisible = true">zyplayer-doc-dubbo</div>
2019-02-14 22:38:18 +08:00
<div style="padding: 10px;">
<div align="center"><el-button type="primary" v-on:click="reloadService" icon="el-icon-refresh" style="width: 100%;">重新加载服务列表</el-button></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>
2019-02-13 21:29:09 +08:00
</el-aside>
<el-container>
2019-02-13 23:06:49 +08:00
<el-tabs type="border-card" style="width: 100%;">
<el-tab-pane label="接口说明">
2019-02-14 22:38:18 +08:00
<div v-if="!dubboInfo.interface">
请先选择服务
</div>
<el-form v-else label-width="80px">
2019-02-13 23:06:49 +08:00
<el-form-item label="服务:">
{{dubboInfo.interface}}
</el-form-item>
<el-form-item label="方法:">
{{dubboInfo.method}}
</el-form-item>
<el-form-item label="说明:">
2019-02-14 22:38:18 +08:00
<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>
2019-02-13 23:06:49 +08:00
</el-form-item>
<el-form-item label="参数:">
2019-02-15 20:58:37 +08:00
<div slot="label">
<el-tooltip placement="top">
<div slot="content">1. 顺序必须和参数的顺序一致<br/>2. 参数名意义不大,可不填<br/>3. 类型必填,可手动输入,必须是全类名</div>
<i class="el-icon-info" style="color: #aaa;"></i>
</el-tooltip>
参数:
</div>
2019-02-14 22:38:18 +08:00
<el-table :data="docParamList" border style="width: 100%; margin-bottom: 5px;">
<el-table-column label="顺序" width="100">
<template slot-scope="scope">{{scope.$index + 1}}</template>
</el-table-column>
2019-02-15 20:58:37 +08:00
<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">
2019-02-14 22:38:18 +08:00
<template slot-scope="scope">
2019-02-15 20:58:37 +08:00
<el-select v-model="scope.row.paramType" filterable allow-create clearable placeholder="请选择" style="width: 100%;">
2019-02-14 22:38:18 +08:00
<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>
2019-02-15 20:58:37 +08:00
<el-button @click.prevent="saveDocInfoParam" type="primary" style="float: right;margin: 5px;">保存</el-button>
2019-02-14 22:38:18 +08:00
<el-button @click.prevent="addDocParam" style="float: right;margin: 5px;">添加</el-button>
2019-02-13 23:06:49 +08:00
</el-form-item>
<el-form-item label="结果:">
2019-02-14 22:38:18 +08:00
<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>
2019-02-13 23:06:49 +08:00
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="在线调试">
2019-02-14 22:38:18 +08:00
<div v-if="!dubboInfo.interface">
请先选择服务
</div>
2019-02-15 20:58:37 +08:00
<div v-loading="onlineDebugLoading" v-else>
2019-02-14 22:38:18 +08:00
<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 + 1}}</template>
</el-table-column>
2019-02-15 20:58:37 +08:00
<el-table-column label="参数名" width="200">
<template slot-scope="scope">{{scope.row.paramName}}</template>
</el-table-column>
2019-02-14 22:38:18 +08:00
<el-table-column label="类型" width="200">
<template slot-scope="scope">{{scope.row.paramType}}</template>
</el-table-column>
<el-table-column label="参数值" width="300">
<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>
2019-02-13 23:06:49 +08:00
</el-tab-pane>
</el-tabs>
2019-02-13 21:29:09 +08:00
</el-container>
</el-container>
2019-02-15 20:58:37 +08:00
<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>
<el-form-item label="">
欢迎加群讨论QQ群号466363173欢迎提交需求欢迎使用和加入开发
</el-form-item>
</el-form>
</el-dialog>
2019-02-13 21:29:09 +08:00
</div>
</body>
2019-02-15 20:58:37 +08:00
<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 -->
2019-02-13 23:06:49 +08:00
<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>
2019-02-14 22:38:18 +08:00
<script type="text/javascript" src="webjars/doc-dubbo/js/toast.js"></script>
<script type="text/javascript" src="webjars/doc-dubbo/js/formatjson.js"></script>
2019-02-18 12:18:12 +08:00
<script type="text/javascript" src="webjars/doc-dubbo/js/doc-dubbo-tree.js"></script>
2019-02-13 21:29:09 +08:00
<script>
2019-02-13 23:06:49 +08:00
var app = new Vue({
2019-02-13 21:29:09 +08:00
el: '#app',
data() {
return {
2019-02-13 23:06:49 +08:00
isCollapse: false,
2019-02-15 20:58:37 +08:00
aboutDialogVisible: false,
onlineDebugLoading: false,
2019-02-13 23:06:49 +08:00
pathIndex: [],
defaultProps: {
children: 'children',
label: 'label'
},
// 展示的信息
dubboInfo: {},
2019-02-14 22:38:18 +08:00
dubboInfoExplainShow: true,
docInfoExplainInput: "",
dubboInfoResultShow: true,
docInfoResultInput: "",
// 请求的IP端口下拉选项
requestHostOptions: [],
requestHostValue: "",
requestResult: "",
2019-02-13 23:06:49 +08:00
// 依据目录树存储的map全局对象
treePathDataMap: new Map(),
// dubbo列表
dubboDocList: [],
2019-02-14 22:38:18 +08:00
dubboDocMap: [],
// 搜索的输入内容
searchKeywords: "",
docParamList: [],
docParamRequestList: [],
// 参数类型选项
paramTypeOptions: [{
value: 'java.lang.String'
}, {
value: 'java.lang.Long'
}, {
value: 'java.lang.Integer'
}],
paramTypeValue: "java.lang.String",
2019-02-13 23:06:49 +08:00
}
},
2019-02-14 22:38:18 +08:00
watch: {
},
mounted: function () {
this.doGetServiceList();
2019-02-13 23:06:49 +08:00
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handleNodeClick(data) {
if (data.children == null) {
var path = data.interface;
var dubboInfo = app.treePathDataMap.get(path);
dubboInfo.method = data.method;
2019-02-14 22:38:18 +08:00
dubboInfo.function = path;
dubboInfo.docInfo = app.dubboDocMap[path] || {};
// 清空再赋值才会重新渲染
app.dubboInfo = {};
2019-02-13 23:06:49 +08:00
app.dubboInfo = dubboInfo;
2019-02-14 22:38:18 +08:00
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];
app.requestHostOptions.push({
value: item.ip + ":" + item.port
});
}
if (app.requestHostOptions.length > 0) {
app.requestHostValue = app.requestHostOptions[0].value;
}
//console.log(app.dubboInfo);
2019-02-13 23:06:49 +08:00
}
},
reloadService(){
2019-02-14 22:38:18 +08:00
ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/reloadService", "post", "json", {}, function (json) {
2019-02-13 23:06:49 +08:00
if (validateResult(json)) {
app.$message({
message: '加载成功!',
type: 'success'
});
2019-02-14 22:38:18 +08:00
app.doGetServiceList();
}
});
},
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);
},
saveDocInfoResult(){
this.doSaveDocInfo(null, null, app.docInfoResultInput);
},
saveDocInfoParam() {
var docParamList = [];
for (var i = 0; i < app.docParamList.length; i++) {
var item = app.docParamList[i];
2019-02-15 20:58:37 +08:00
if (isNotEmpty(item.paramType)) {
2019-02-14 22:38:18 +08:00
docParamList.push(item);
}
}
var paramsJson = JSON.stringify(docParamList);
this.doSaveDocInfo(null, paramsJson, null);
},
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){
var param = {
service: app.dubboInfo.interface,
method: app.dubboInfo.method,
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();
}
});
},
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({
2019-02-15 20:58:37 +08:00
paramName: '',
2019-02-14 22:38:18 +08:00
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 ip = hostValue.substring(0, hostValue.lastIndexOf(":"));
var port = hostValue.substring(hostValue.lastIndexOf(":") + 1, hostValue.length);
var paramTypes = [];
var params = [];
for (var i = 0; i < app.docParamList.length; i++) {
var item = app.docParamList[i];
if (isNotEmpty(item.paramType) && isNotEmpty(item.paramValue)) {
paramTypes.push(item.paramType);
params.push(item.paramValue);
}
}
var param = {
service: service,
method: method,
ip: ip,
port: port,
paramTypes: paramTypes,
params: params,
};
2019-02-15 20:58:37 +08:00
app.requestResult = "";
app.onlineDebugLoading = true;
2019-02-14 22:38:18 +08:00
ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/request", "post", "json", param, function (json) {
2019-02-15 20:58:37 +08:00
app.onlineDebugLoading = false;
2019-02-14 22:38:18 +08:00
if (validateResult(json)) {
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;
}
}
2019-02-13 23:06:49 +08:00
}
});
2019-02-13 21:29:09 +08:00
}
}
});
</script>
<style>
2019-02-15 20:58:37 +08:00
html,body,#app {
margin: 0;
padding: 0;
height: 100%;
}
pre{margin: 0;}
2019-02-13 21:29:09 +08:00
.el-menu {
box-sizing: border-box;
2019-02-13 23:06:49 +08:00
border-right: 0;
margin-right: 3px;
2019-02-13 21:29:09 +08:00
}
2019-02-13 23:06:49 +08:00
.el-tree{
margin-right: 3px;
2019-02-13 21:29:09 +08:00
}
2019-02-13 23:06:49 +08:00
.el-tree-node__content{
padding-right: 20px;
2019-02-13 21:29:09 +08:00
}
2019-02-14 22:38:18 +08:00
.el-tabs--border-card>.el-tabs__content{
height: calc(100vh - 70px);overflow-y: auto;
}
2019-02-15 20:58:37 +08:00
.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;
2019-02-13 21:29:09 +08:00
}
</style>
</html>