|
|
|
@ -71,21 +71,21 @@
|
|
|
|
|
<body> |
|
|
|
|
<div id="app"> |
|
|
|
|
<el-container> |
|
|
|
|
<el-aside width="200px"> |
|
|
|
|
<el-aside width="200px" style="overflow: hidden"> |
|
|
|
|
<el-menu |
|
|
|
|
default-active="2" |
|
|
|
|
:default-active="apiActive" |
|
|
|
|
class="el-menu-vertical-demo" |
|
|
|
|
@select="handleSelect" |
|
|
|
|
background-color="#545c64" |
|
|
|
|
text-color="#fff" |
|
|
|
|
active-text-color="#ffd04b"> |
|
|
|
|
<el-submenu v-for="(item, index) in ApiInfo.apiLists" :index="index"> |
|
|
|
|
<el-submenu v-for="(item, index) in ApiInfo.apiLists" v-if="searchP(item)" :index="index"> |
|
|
|
|
<template slot="title"> |
|
|
|
|
<i class="el-icon-location"></i> |
|
|
|
|
<i :class="item.children.filter(a => myMark.includes(a.url)).length > 0 ? 'el-icon-star-on' : 'el-icon-star-off'" style="color: #E6A23C"></i> |
|
|
|
|
<span>@{{item.name}}</span> |
|
|
|
|
</template> |
|
|
|
|
<el-menu-item v-for="(api, Aindex) in item.children" :index="index + '-' + Aindex"> |
|
|
|
|
<i class="el-icon-menu"></i> |
|
|
|
|
<el-menu-item v-for="(api, Aindex) in item.children" v-if="search(api)" :index="index + '-' + Aindex"> |
|
|
|
|
<i :class="myMark.includes(api.url) ? 'el-icon-star-on' : 'el-icon-star-off'" style="color: #E6A23C"></i> |
|
|
|
|
<span slot="title">@{{api.name}}</span> |
|
|
|
|
</el-menu-item> |
|
|
|
|
</el-submenu> |
|
|
|
@ -93,14 +93,15 @@
|
|
|
|
|
</el-aside> |
|
|
|
|
<el-container> |
|
|
|
|
<el-header> |
|
|
|
|
<el-button style="margin-top: 8px" type="primary" plain @click="editApiDoc = true">文档说明</el-button> |
|
|
|
|
<el-button style="margin-top: 8px" type="primary" plain >我的标记</el-button> |
|
|
|
|
<el-button style="margin-top: 8px" type="primary" plain @click="clearCurrentApi">文档说明</el-button> |
|
|
|
|
<el-button style="margin-top: 8px" type="primary" plain @click="showMark = !showMark">我的标记</el-button> |
|
|
|
|
</el-header> |
|
|
|
|
<el-main> |
|
|
|
|
<el-row v-if="currentApiInfo.name" :gutter="10"> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<el-card class="box-card"> |
|
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
|
<i :class="myMark.includes(currentApiInfo.url) ? 'el-icon-star-on' : 'el-icon-star-off'" @click="mark(currentApiInfo.url)" style="color: #E6A23C;font-size: 25px;position: relative;top: 3px"></i> |
|
|
|
|
<el-tag>@{{currentApiInfo.method}}</el-tag> |
|
|
|
|
<el-link type="primary">@{{ApiInfo.host}}@{{currentApiInfo.url}}</el-link> |
|
|
|
|
<el-link :icon="sendIcon" type="success" @click="send" style="font-size:18px"></el-link> |
|
|
|
@ -221,14 +222,30 @@
|
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
<div v-else> |
|
|
|
|
@{{ ApiInfo.des }} |
|
|
|
|
<el-alert title="页面介绍" type="success"> |
|
|
|
|
<div><i class="el-icon-star-on" style="color: #E6A23C"></i> 已做标记,可认为是收藏,接口详情点击可切换标记状态</div> |
|
|
|
|
<div><i class="el-icon-star-off" style="color: #E6A23C"></i> 未做标记</div> |
|
|
|
|
<div><i style="color:#F56C6C;" class="el-icon-s-check"></i>必须使用Token验证</div> |
|
|
|
|
<div><i style="color:#67C23A;" class="el-icon-s-check"></i>使用Token数据, 不验证</div> |
|
|
|
|
<div><i style="color:#909399;" class="el-icon-s-check"></i> 无需token</div> |
|
|
|
|
<div><i class="el-icon-s-promotion"></i> 发送模拟请求</div> |
|
|
|
|
</el-alert> |
|
|
|
|
<el-alert title="响应介绍" type="warning"> |
|
|
|
|
<div><b>code:</b> 状态码</div> |
|
|
|
|
<div><b>data:</b> 数据</div> |
|
|
|
|
<div><b>msg:</b> 响应提示语</div> |
|
|
|
|
<div><b>ts:</b> 当前时间戳(秒)</div> |
|
|
|
|
<hr> |
|
|
|
|
<div><b>code 值说明:</b></div> |
|
|
|
|
<div><b style="margin-left: 10px">200:</b>成功</div> |
|
|
|
|
<div><b style="margin-left: 10px">202:</b>失败</div> |
|
|
|
|
<div><b style="margin-left: 10px">1001:</b>刷新token,此时响应数据会带上新的token</div> |
|
|
|
|
<div><b style="margin-left: 10px">1002:</b>token无效,应要求用户重新登录</div> |
|
|
|
|
</el-alert> |
|
|
|
|
</div> |
|
|
|
|
</el-main> |
|
|
|
|
</el-container> |
|
|
|
|
</el-container> |
|
|
|
|
<el-dialog title="编辑API文档" :fullscreen="true" :visible.sync="editApiDoc"> |
|
|
|
|
123123123123 |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
@ -250,7 +267,11 @@
|
|
|
|
|
scriptAfterRequest:`// 请求之后调用此段代码\n// ApiInfo 对象包含接口信息\n// response 对象包含响应的数据\n// console.log(ApiInfo);\n// console.log(response);`, |
|
|
|
|
response:{}, |
|
|
|
|
currentApiInfo:{}, |
|
|
|
|
ApiInfo:{} |
|
|
|
|
ApiInfo:{}, |
|
|
|
|
myMark:[], |
|
|
|
|
showMark:false, |
|
|
|
|
searchText:"", |
|
|
|
|
apiActive:-1 |
|
|
|
|
}, |
|
|
|
|
created(){ |
|
|
|
|
if (localStorage.getItem("ScBefore")){ |
|
|
|
@ -260,13 +281,54 @@
|
|
|
|
|
this.scriptAfterRequest = localStorage.getItem("ScAfter"); |
|
|
|
|
} |
|
|
|
|
this.getApiInfo(); |
|
|
|
|
this.myMark = localStorage.getItem("myMark").split(','); |
|
|
|
|
}, |
|
|
|
|
mounted(){ |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
mark(url){ |
|
|
|
|
let index = this.myMark.indexOf(url); |
|
|
|
|
if(index >= 0){ |
|
|
|
|
this.myMark.splice(index, 1); |
|
|
|
|
}else{ |
|
|
|
|
this.myMark.push(url); |
|
|
|
|
} |
|
|
|
|
localStorage.setItem("myMark", this.myMark); |
|
|
|
|
}, |
|
|
|
|
searchP(item){ |
|
|
|
|
let show = true; |
|
|
|
|
if(this.showMark && item.children.filter(a => this.myMark.includes(a.url)).length === 0){ |
|
|
|
|
show = false; |
|
|
|
|
} |
|
|
|
|
if(this.searchText){ |
|
|
|
|
let length = item.children.filter(a => { |
|
|
|
|
return a.url.indexOf(this.searchText) < 0 || a.name.indexOf(this.searchText) < 0 |
|
|
|
|
}); |
|
|
|
|
if (length > 0) show = false; |
|
|
|
|
} |
|
|
|
|
return show; |
|
|
|
|
}, |
|
|
|
|
search(a){ |
|
|
|
|
let show = true; |
|
|
|
|
if(this.showMark && !this.myMark.includes(a.url)){ |
|
|
|
|
show = false; |
|
|
|
|
} |
|
|
|
|
if(this.searchText && (a.url.indexOf(this.searchText) < 0 || a.name.indexOf(this.searchText) < 0)){ |
|
|
|
|
show = false; |
|
|
|
|
} |
|
|
|
|
return show; |
|
|
|
|
}, |
|
|
|
|
handleSelect(key, keyPath) { |
|
|
|
|
let s = key.split('-') |
|
|
|
|
let currentApiInfo = this.ApiInfo.apiLists[s[0]].children[s[1]]; |
|
|
|
|
this.currentApiInfo = JSON.parse(JSON.stringify(currentApiInfo)); |
|
|
|
|
this.form = this.requestParamsResolve(this.currentApiInfo.requestParams); |
|
|
|
|
this.paramShowJsonEl && this.paramShowJsonEl.set(this.form); |
|
|
|
|
}, |
|
|
|
|
clearCurrentApi(){ |
|
|
|
|
this.currentApiInfo = {}; |
|
|
|
|
this.form = {}; |
|
|
|
|
}, |
|
|
|
|
getPath(){ |
|
|
|
|
try{ |
|
|
|
@ -306,6 +368,7 @@
|
|
|
|
|
}, |
|
|
|
|
paramShowTypeToggle(el){ |
|
|
|
|
if (el.name === 'json') { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
if (!this.paramShowJsonEl) { |
|
|
|
|
this.paramShowJsonEl = new JSONEditor( |
|
|
|
|
document.getElementById("paramShowJson"), |
|
|
|
@ -315,7 +378,8 @@
|
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.paramShowJsonEl.set(this.form); |
|
|
|
|
setTimeout(() => this.paramShowJsonEl.set(this.form), 5); |
|
|
|
|
}, 10); |
|
|
|
|
} else if (el.name === 'scriptBefore') { |
|
|
|
|
if (!this.scriptBeforeRequestEl) { |
|
|
|
|
let myTextArea = document.getElementById('requestBefore'); |
|
|
|
@ -373,7 +437,8 @@
|
|
|
|
|
let ApiInfo = JSON.parse(JSON.stringify(this.currentApiInfo)); |
|
|
|
|
if (this.scriptBeforeRequestEl){ |
|
|
|
|
(function (){ |
|
|
|
|
eval(APP.scriptBeforeRequestEl.getValue()); |
|
|
|
|
let script = APP.scriptBeforeRequestEl ? APP.scriptBeforeRequestEl.getValue() : this.scriptBeforeRequest; |
|
|
|
|
eval(script); |
|
|
|
|
})(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -383,7 +448,8 @@
|
|
|
|
|
this.responseJsonHandle(); |
|
|
|
|
(function (){ |
|
|
|
|
let response = JSON.parse(JSON.stringify(res.data)); |
|
|
|
|
eval(APP.scriptAfterRequestEl.getValue()); |
|
|
|
|
let script = APP.scriptAfterRequestEl ? APP.scriptAfterRequestEl.getValue() : this.scriptAfterRequest; |
|
|
|
|
eval(script); |
|
|
|
|
})(); |
|
|
|
|
}).catch((error) => { |
|
|
|
|
this.response = error; |
|
|
|
@ -404,7 +470,8 @@
|
|
|
|
|
} else { |
|
|
|
|
this.responseJsonEl = null; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
console.log(this.response); |
|
|
|
|
}, 10); |
|
|
|
|
}, |
|
|
|
|
jsonEditorInitOptions(defaultMode = 'tree', change){ |
|
|
|
|
return { |
|
|
|
@ -433,7 +500,6 @@
|
|
|
|
|
url:"/admin/plugins/api-doc/doc-data" |
|
|
|
|
}).then(res => { |
|
|
|
|
this.ApiInfo = res.data.data; |
|
|
|
|
console.log(111); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
tableVersionClass({row, rowIndex}){ |
|
|
|
|