mirror of https://gitee.com/stylefeng/guns
新增API文档管理界面
fengshuonan
parent
a98bb1a6b1
commit
266b728d14
|
|
@ -0,0 +1,30 @@
|
|||
package cn.stylefeng.guns.modular.api;
|
||||
|
||||
import cn.stylefeng.roses.kernel.resource.api.annotation.ApiResource;
|
||||
import cn.stylefeng.roses.kernel.resource.api.annotation.GetResource;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.stereotype.Controller;
|
||||
|
||||
/**
|
||||
* API文档管理
|
||||
*
|
||||
* @author fengshuonan
|
||||
* @date 2021/1/14 21:05
|
||||
*/
|
||||
@Controller
|
||||
@Slf4j
|
||||
@ApiResource(name = "API文档管理")
|
||||
public class ApiViewController {
|
||||
|
||||
/**
|
||||
* 编辑应用界面
|
||||
*
|
||||
* @author fengshuonan
|
||||
* @date 2021/1/6 13:37
|
||||
*/
|
||||
@GetResource(name = "API文档界面", path = "/view/api")
|
||||
public String apiIndex() {
|
||||
return "/modular/api/api.html";
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
border-top: 3px solid #d2d6de;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.1)
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.box-main {
|
||||
|
|
@ -44,5 +44,21 @@
|
|||
border: 0;
|
||||
padding-top: 2px;
|
||||
border-radius: 0;
|
||||
box-shadow: none
|
||||
}
|
||||
box-shadow: none;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.wide-layui-form-label {
|
||||
float: left;
|
||||
display: block;
|
||||
padding: 9px 15px;
|
||||
width: 130px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wide-layui-input-block {
|
||||
margin-left: 160px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
layui.use(['layer', 'form', 'table', 'HttpRequest', 'func', 'tree'], function () {
|
||||
var $ = layui.jquery;
|
||||
var form = layui.form;
|
||||
var table = layui.table;
|
||||
var HttpRequest = layui.HttpRequest;
|
||||
var func = layui.func;
|
||||
var tree = layui.tree;
|
||||
|
||||
/**
|
||||
* Api管理的参数
|
||||
*/
|
||||
var ApiManager = {
|
||||
condition: {
|
||||
resourceCode: "",
|
||||
resourceName: ""
|
||||
}
|
||||
};
|
||||
|
||||
// 选择api树上的接口时
|
||||
ApiManager.onClickApi = function (obj) {
|
||||
ApiManager.condition.resourceCode = obj.data.id;
|
||||
|
||||
// 如果是具体接口，则查看接口详情
|
||||
if (obj.data.resourceFlag === true) {
|
||||
ApiManager.search();
|
||||
}
|
||||
};
|
||||
|
||||
// 点击查询按钮
|
||||
ApiManager.search = function () {
|
||||
var detailRequest = new HttpRequest(Feng.ctxPath + "/resource/getDetail", 'get', function (data) {
|
||||
form.val('apiDetailForm', data.data);
|
||||
}, function (data) {
|
||||
Feng.error("查询失败!" + data.message);
|
||||
});
|
||||
detailRequest.set("resourceCode", ApiManager.condition.resourceCode);
|
||||
var detailResult = detailRequest.start(false);
|
||||
|
||||
// 参数的表头
|
||||
var columns = [[
|
||||
{field: 'chineseName', title: '中文名称', width: 150},
|
||||
{field: 'fieldClassType', title: '字段类型', width: 150},
|
||||
{field: 'fieldName', title: '字段名称', width: 200},
|
||||
{
|
||||
field: 'groupAnnotations', title: '按校验组分的注解集合', templet: function (data) {
|
||||
return JSON.stringify(data.groupAnnotations);
|
||||
}
|
||||
}
|
||||
]];
|
||||
|
||||
// 渲染请求参数列表
|
||||
table.render({
|
||||
elem: '#requestParamsTable',
|
||||
cols: columns,
|
||||
data: detailResult.data.paramFieldDescriptions,
|
||||
even: true
|
||||
});
|
||||
|
||||
// 渲染请求参数列表
|
||||
table.render({
|
||||
elem: '#responseParamsTable',
|
||||
cols: columns,
|
||||
data: detailResult.data.responseFieldDescriptions,
|
||||
even: true
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// 初始化api树
|
||||
var request = new HttpRequest(Feng.ctxPath + '/resource/getTree', 'get', function (data) {
|
||||
tree.render({
|
||||
elem: '#apiTree',
|
||||
data: data.data,
|
||||
click: ApiManager.onClickApi,
|
||||
onlyIconControl: true
|
||||
});
|
||||
});
|
||||
request.start();
|
||||
|
||||
});
|
||||
|
||||
$(function () {
|
||||
var panehHidden = false;
|
||||
if ($(this).width() < 769) {
|
||||
panehHidden = true;
|
||||
}
|
||||
$('#myContiner').layout({initClosed: panehHidden, west__size: 330});
|
||||
});
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
@layout("/layout/_tree_container.html", {plugins:["jquery-layout"], js:["/assets/modular/api/api.js"]}){
|
||||
|
||||
<div class="layui-body-header">
|
||||
<span class="layui-body-header-title">API接口文档</span>
|
||||
</div>
|
||||
|
||||
<div id="myContiner" style="height: 100%">
|
||||
<div class="ui-layout-west">
|
||||
<div class="box box-main">
|
||||
<div class="ui-layout-content">
|
||||
<div id="apiTree"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-layout-center" style="height: 97%;overflow: scroll">
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||||
<legend>接口详情</legend>
|
||||
</fieldset>
|
||||
<form class="layui-form" lay-filter="apiDetailForm">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs2">
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">http请求方法</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="httpMethod" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs10">
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">资源的请求路径</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="url" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">API名称</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="resourceName" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">控制器类名称</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="className" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">控制器中的方法名称</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="methodName" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">是否是视图类型</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="viewFlag" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">是否需要登录</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="requiredLoginFlag" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">是否需要鉴权</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="requiredPermissionFlag" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="wide-layui-form-label">参数校验分组</label>
|
||||
<div class="wide-layui-input-block">
|
||||
<input type="text" name="validateGroups" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
|
||||
<legend>请求参数</legend>
|
||||
</fieldset>
|
||||
|
||||
<table class="layui-hide" id="requestParamsTable"></table>
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
|
||||
<legend>响应参数</legend>
|
||||
</fieldset>
|
||||
|
||||
<table class="layui-hide" id="responseParamsTable"></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@}
|
||||
Loading…
Reference in New Issue