123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>接口文档</title>
- <script src="/plugin/jquery-3.3.1.min.js"></script>
- <script src="/plugin/jstree/jstree.min.js"></script>
- <script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
- <script src="/plugin/bootstraptable/bootstrap-table.min.js"></script>
- <link href="/plugin/bootstraptable/bootstrap-table.min.css" rel="stylesheet" />
- <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.min.css" />
- <link rel="stylesheet" href="/plugin/jstree/themes/default/style.min.css" />
- <link rel="stylesheet" href="/plugin/fontawesome/css/font-awesome.min.css" />
- <style>
- .title-box {
- background-color: #1b4a6f;
- color: white;
- border-bottom: 5px solid #030f1b;
- }
- .jstree-anchor {
- width: calc(100% - 24px);
- }
- .menu-box {
- overflow-y: auto;
- scrollbar-width: none;
- -ms-overflow-style: none;
- border-right: 2px solid #3083c5;
- }
- .menu-box::-webkit-scrollbar {
- display: none;
- }
- </style>
- </head>
- <body>
- <div class="container-fluid title-box">
- <div class="row alert alert-primary" role="alert" style="margin-bottom: 0"><h3>接口说明文档</h3></div>
- </div>
- <div class="container-fluid" style="margin-top: 0">
- <div class="row">
- <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 menu-box">
- <div id="menutree"></div>
- </div>
- <div
- class="col-xs-9 col-sm-9 col-md-9 col-lg-9"
- id="content"
- style="display: none; overflow-y: auto; height: 760px; padding-top: 60px; padding-bottom: 60px"
- >
- <div class="row">
- <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">接口名称:</label>
- <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="title"></div>
- </div>
- <div class="row">
- <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">接口描述:</label>
- <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="desc"></div>
- </div>
- <div class="row">
- <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">接口地址:</label>
- <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="url"></div>
- </div>
- <div class="row">
- <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">请求方式:</label>
- <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="method"></div>
- </div>
- <div class="row">
- <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">接口作者:</label>
- <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="author"></div>
- </div>
- <div class="row"><label class="col-xs-12 col-sm-12 col-md-12 col-lg-12 h4">请求参数:</label></div>
- <div class="row">
- <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
- <table class="table table-hover" id="param"></table>
- </div>
- </div>
- <div class="row"><label class="col-xs-12 col-sm-12 col-md-12 col-lg-12 h4">返回参数:</label></div>
- <div class="row">
- <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
- <table class="table table-striped" id="return"></table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- <script>
- var path = '{$path}'
- console.log(path)
- var token = '{$token}'
- console.log(token)
- $(function () {
- var mHeight = window.innerHeight - 100
- $('.menu-box').css('height', mHeight + 'px')
- $('#menutree').jstree({
- core: {
- animation: 200,
- multiple: false,
- check_callback: true,
- themes: { stripes: true },
- data: function (obj, callback) {
- var data = {}
- if (obj.id == '#') {
- data.path = path
- data.type = 'folder'
- } else {
- data.path = obj.original.path
- data.type = obj.original.type
- }
- data.token = token
- $.ajax({
- url: '/index.php/doc/index/getList',
- data: data,
- dataType: 'json',
- method: 'post',
- success: function (res) {
- if (res && res.code && res.code == 2) {
- alert('页面失效')
- // window.location = ''
- }
- var result = []
- for (var i = 0; i < res.length; i++) {
- res[i].id = res[i].path
- res[i].text = res[i].title
- res[i].children = res[i].hasChild
- result.push(res[i])
- }
- callback(result)
- },
- })
- },
- },
- })
- //获取并显示详情
- function showDetail(node) {
- var data = {
- class: node.class,
- action: node.name,
- token: token,
- }
- $.ajax({
- url: '/index.php/doc/index/getInfo',
- data: data,
- dataType: 'json',
- method: 'post',
- success: function (res) {
- $('#content').show()
- $('#content #title').text(res.title)
- $('#content #desc').text(res.desc)
- $('#content #url').text(res.url)
- $('#content #method').text(res.method)
- $('#content #author').text(res.author)
- $('#content #param')
- .bootstrapTable('destroy')
- .bootstrapTable({
- data: res.param,
- columns: [
- { field: 'name', title: '参数名' },
- { field: 'type', title: '类型' },
- { field: 'default', title: '默认值' },
- { field: 'desc', title: '说明' },
- ],
- })
- $('#content #return')
- .bootstrapTable('destroy')
- .bootstrapTable({
- data: res.return,
- columns: [
- { field: 'name', title: '参数名' },
- { field: 'type', title: '类型' },
- { field: 'default', title: '默认值' },
- { field: 'desc', title: '说明' },
- ],
- })
- },
- })
- }
- //点击事件
- $('#menutree').on('activate_node.jstree', function (event, obj) {
- var node = obj.node.original
- if (node.type == 'file' || node.type == 'folder') {
- obj.instance.toggle_node(node.path)
- } else {
- showDetail(node)
- }
- })
- })
- </script>
- </html>
|