manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

swagger查看页面路由交互开发

Browse Source
This commit is contained in:
暮光：城中城
2021-10-26 23:49:47 +08:00
parent 395090e958
commit 3a695ebd1a
9 changed files with 67 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
zyplayer-doc-ui/swagger-ui/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>swagger文档管理</title>
<title>Swagger文档管理</title>
</head>
<body>
<div id="app"></div>

73
zyplayer-doc-ui/swagger-ui/src/components/layouts/MenuLayout.vue
View File

@@ -5,26 +5,28 @@
</a-menu>
<a-divider style="margin: 6px 0;"/>
<div v-show="!collapsed" class="doc-tree">
<div style="padding: 10px 5px;">
<a-select placeholder="请选择分组" v-model:value="swaggerDocChoice" @change="swaggerDocChoiceChange" style="width: 100%;">
<a-select-option :value="item.url" v-for="item in swaggerResourceList">{{item.name}}</a-select-option>
</a-select>
</div>
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
<template #title="{ title, isLeaf, method }">
<template v-if="isLeaf">
<a-tag color="pink" v-if="method === 'get'">get</a-tag>
<a-tag color="red" v-else-if="method === 'post'">post</a-tag>
<a-tag color="orange" v-else-if="method === 'put'">put</a-tag>
<a-tag color="green" v-else-if="method === 'head'">head</a-tag>
<a-tag color="cyan" v-else-if="method === 'patch'">patch</a-tag>
<a-tag color="blue" v-else-if="method === 'delete'">delete</a-tag>
<a-tag color="purple" v-else-if="method === 'options'">options</a-tag>
<a-tag color="purple" v-else-if="method === 'trace'">trace</a-tag>
<a-spin tip="加载中..." :spinning="treeDataLoading">
<div style="padding: 10px 5px;">
<a-select placeholder="请选择分组" v-model:value="swaggerDocChoice" @change="swaggerDocChoiceChange" style="width: 100%;">
<a-select-option :value="item.url" v-for="item in swaggerResourceList">{{item.name}}</a-select-option>
</a-select>
</div>
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
<template #title="{ title, isLeaf, method }">
<template v-if="isLeaf">
<a-tag color="pink" v-if="method === 'get'">get</a-tag>
<a-tag color="red" v-else-if="method === 'post'">post</a-tag>
<a-tag color="orange" v-else-if="method === 'put'">put</a-tag>
<a-tag color="green" v-else-if="method === 'head'">head</a-tag>
<a-tag color="cyan" v-else-if="method === 'patch'">patch</a-tag>
<a-tag color="blue" v-else-if="method === 'delete'">delete</a-tag>
<a-tag color="purple" v-else-if="method === 'options'">options</a-tag>
<a-tag color="purple" v-else-if="method === 'trace'">trace</a-tag>
</template>
{{title}}
</template>
{{title}}
</template>
</a-directory-tree>
</a-directory-tree>
</a-spin>
</div>
</div>
</template>
@@ -48,34 +50,17 @@
selectedKeys: [],
openKeys: [],
// 文档树
treeData: [
{
title: '用户管理接口文档',
key: '0-0',
children: [
{
title: '用户信息管理',
key: '0-0-0',
children: [
{title: '/getUserInfo', key: '0-0-0-0', isLeaf: true, query: {path: '/getUserInfo'}},
{title: '/deleteUserInfo', key: '0-0-0-1', isLeaf: true, query: {path: '/deleteUserInfo'}},
{title: '/updateUserInfo', key: '0-0-0-2', isLeaf: true, query: {path: '/updateUserInfo'}},
],
},
],
},
],
treeDataLoading: false,
treeData: [],
expandedKeys: [],
swaggerResourceList: [],
swaggerDocChoice: undefined,
}
},
watch:{
'$store.state.userInfo'(userInfo) {
'$store.state.docChangedNum'() {
this.getSwaggerResourceList();
},
collapsed(x) {
console.log(x, this.collapsed)
}
},
components: {MenuChildrenLayout},
mounted() {
@@ -103,7 +88,7 @@
customApi.get('./swagger-resources').then(res => {
if (res instanceof Array) {
this.swaggerResourceList = res || [];
if (this.swaggerResourceList.length > 0) {
if (this.swaggerResourceList.length > 0 && !this.swaggerDocChoice) {
this.swaggerDocChoice = this.swaggerResourceList[0].url;
this.swaggerDocChoiceChange();
}
@@ -116,16 +101,20 @@
this.loadV2Doc(this.swaggerDocChoice);
},
loadV2Doc(url) {
this.treeDataLoading = true;
customApi.get(url).then(res => {
let v2Doc = this.toJsonObj(res);
if (typeof v2Doc !== 'object') {
if (typeof v2Doc !== 'object' || !v2Doc.swagger) {
this.$message.error('获取文档数据请求失败');
this.treeDataLoading = false;
return;
}
this.$store.commit('setSwaggerDoc', v2Doc);
let metaInfo = {url};
let treeData = createTreeViewByTag(v2Doc);
this.treeData = getTreeDataForTag(v2Doc, treeData.pathIndex, metaInfo);
this.$store.commit('setSwaggerTreePathMap', treeData.treePathDataMap);
setTimeout(() => this.treeDataLoading = false, 300);
});
},
toJsonObj(value) {

4
zyplayer-doc-ui/swagger-ui/src/components/layouts/PageLayout.vue
View File

@@ -4,9 +4,9 @@
<a-tab-pane closable :tab="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" :fullPath="item.fullPath" :key="item.fullPath" v-for="item in pageList"/>
</a-tabs>
<div class="page-body">
<router-view v-slot="{ Component }">
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" />
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</div>

10
zyplayer-doc-ui/swagger-ui/src/routes.js
View File

@@ -6,21 +6,13 @@ let routers = [
path: '/',
name: '主页',
component: () => import('./components/layouts/GlobalLayout.vue'),
redirect: '/doc/console',
redirect: '/doc/info',
children: [
{
path: '/doc',
name: '系统配置',
component: PageLayout,
children: [
{
path: '/doc/console',
name: '控制台',
meta: {
hidden: true,
},
component: () => import('./views/common/Console.vue')
},
{
path: '/doc/info',
name: '文档信息',

10
zyplayer-doc-ui/swagger-ui/src/store/SwaggerDocUtil.js
View File

@@ -102,8 +102,9 @@ function getTreeHtmlForTag(pathData, treeId, metaInfo) {
isLeaf: true,
method: nodeSub.method,
query: {
path: nodeSub.path,
...metaInfo
...metaInfo,
path: nodeSub.url,
method: nodeSub.method,
}
});
} else if (actionArrays.indexOf(key) >= 0) {
@@ -115,8 +116,9 @@ function getTreeHtmlForTag(pathData, treeId, metaInfo) {
isLeaf: true,
method: tempNode.method,
query: {
path: tempNode.path,
...metaInfo
...metaInfo,
path: tempNode.url,
method: tempNode.method,
}
});
} else {

15
zyplayer-doc-ui/swagger-ui/src/store/index.js
View File

@@ -4,19 +4,9 @@ import {getDefinitions, createTreeViewByTag} from './SwaggerDocUtil'
export default createStore({
state() {
return {
docChangedNum: 1,
userInfo: {},
pageTabNameMap: {},
docMap: {
'/getUserInfo': {
name: '获取用户信息'
},
'/deleteUserInfo': {
name: '删除用户信息'
},
'/updateUserInfo': {
name: '修改用户信息'
},
},
swaggerDoc: {},
swaggerDefinitions: {},
swaggerTreePathMap: [],
@@ -26,6 +16,9 @@ export default createStore({
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
},
addDocChangedNum(state) {
state.docChangedNum++;
},
setSwaggerDoc(state, swaggerDoc) {
state.swaggerDoc = swaggerDoc;
state.swaggerDefinitions = getDefinitions(swaggerDoc.definitions);

7
zyplayer-doc-ui/swagger-ui/src/views/doc/DocInfo.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-card style="width: 600px">
<a-form :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-card>
<a-form :label-col="{span: 4}" :wrapper-col="{span: 20}" v-if="swaggerDocInfo">
<a-form-item label="标题">{{swaggerDocInfo.title}}</a-form-item>
<a-form-item label="版本">{{swaggerDocInfo.version}}</a-form-item>
<a-form-item label="作者" v-if="swaggerDocInfo.contact">
@@ -15,6 +15,7 @@
<span v-html="swaggerDocInfo.description"></span>
</a-form-item>
</a-form>
<div v-else style="text-align: center;">暂无文档信息，请先选择文档</div>
</a-card>
</template>
@@ -30,7 +31,7 @@
return this.$store.state.swaggerDoc || {};
},
swaggerDocInfo () {
return this.$store.state.swaggerDoc.info || {};
return this.$store.state.swaggerDoc.info;
}
},
mounted() {

4
zyplayer-doc-ui/swagger-ui/src/views/doc/DocManage.vue
View File

@@ -88,9 +88,11 @@
<script>
import { toRefs, ref, reactive, onMounted } from 'vue';
import {zyplayerApi} from '../../api';
import {useStore} from 'vuex';
export default {
setup() {
const store = useStore()
let docList = ref([]);
let docListLoading = ref(false);
let searchParam = ref({docType: '', openVisit: '', docStatus: ''});
@@ -109,6 +111,7 @@
zyplayerApi.swaggerDocAdd(docEdit.value).then(res => {
searchDocList();
newDocVisible.value = false;
store.commit('addDocChangedNum');
});
}).catch(error => {
console.log('error', error);
@@ -127,6 +130,7 @@
const updateDoc = async (id, docStatus, yn) => {
zyplayerApi.swaggerDocUpdate({id, docStatus, yn}).then(res => {
searchDocList();
store.commit('addDocChangedNum');
});
};
const deleteDoc = async (row) => updateDoc(row.id, null, 0);

23
zyplayer-doc-ui/swagger-ui/src/views/doc/DocView.vue
View File

@@ -1,30 +1,35 @@
<template>
<a-tabs v-model:activeKey="activePage" closable @tab-click="changePage" style="padding: 5px 10px 0;">
<a-tab-pane tab="接口说明" key="doc"/>
<a-tab-pane tab="在线调试" key="debug"/>
<a-tab-pane tab="接口说明" key="doc">
{{activePage}}
</a-tab-pane>
<a-tab-pane tab="在线调试" key="debug">
{{activePage}}
</a-tab-pane>
</a-tabs>
</template>
<script>
import {toRefs, ref, reactive, onMounted} from 'vue';
import { useRouter } from "vue-router";
import {toRefs, ref, reactive, onMounted, onActivated} from 'vue';
import { useRouter, useRoute } from "vue-router";
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
export default {
setup() {
const router = useRouter();
const store = useStore()
const route = useRoute();
const store = useStore();
let activePage = ref('doc');
onBeforeRouteUpdate(async (to, from) => {
let path = to.query.path;
onMounted(() => {
console.log('DocView onMounted', route.query);
let path = route.query.path + '.' + route.query.method;
let docInfo = store.state.swaggerTreePathMap[path];
if (!docInfo) {
message.error('没有找到对应的文档');
return;
}
store.commit('addTableName', {key: to.fullPath, val: docInfo.summary});
store.commit('addTableName', {key: route.fullPath, val: docInfo.summary});
});
const changePage = () => {