采用 Vue 编写的功能强大的 Swagger-ui 页面
swagger-ui
有非常多的版本,觉得不太好用,用postman
,每个接口都要自己进行录入。所以在基于think-vuele
进行了swagger
格式json
的解析,自己实现了一套swaggerui界面。
swagger分为后端数据提供方方和前端页面展示请求方。从一定角度来看,swagger是一种标准的数据格式的定义,对于不同语言进行实现一些注解API式的东西,能快速生成这种描述restful
格式的api
信息的json
串.
此项目模块依赖于 think-vuele
demo:http://sw.tennetcn.com
github:
https://github.com/chfree/think-swagger-ui-vuele
使用方式
自行下载编译
// 下载代码
git clone https://github.com/chfree/think-swagger-ui-vuele
// 安装依赖
npm install
// 直接运行
npm run dev
// 打包
npm run build
java项目 maven直接依赖
<dependency>
<groupId>com.tennetcn.free</groupId>
<artifactId>think-swagger-ui-starter</artifactId>
<version>0.0.4</version>
</dependency>
此jar包的开源项目为think-free-base
中的子项目模块
登陆
登陆界面分为json
模式和swagger
请求地址访问,没多大区别,只有拿到标准的swagger
的json
数据即可。
支持两种主题,一种是后端管理系统模式的主题。另外一种也是类似,中间1024px进行居中,两边留白。
主页
对于我使用过的一个版本的swagger
来说,当接口数量在1000+
以上,会等的时间非常长,原因是他一次将所有接口数据进行解析渲染,这个就是慢的原因。
所以我将此进行优化,改为先解析出api
摘要信息,然后在点击摘要的时候进行请求头、请求体的渲染;基本可以做到秒开
可以自动填充非json
请求体的数据,采用的是mock.Random
。
对于json请求体的数据,可以进行json
格式化编辑,也是非常方便。json
在线格式化编辑使用的是josdejong
大神的jsoneditor
对于响应数据直接采用json
格式化组件进行格式化展示,支持展开层级。再也不用将返回的数据在去找相关的json
格式化工具进行格式化了。格式化控件采用的是chenfengjw163
大神的vue-json-viewer
设置
在后端api请求的时候,一般都会在请求头中带一些token的验证,来进行用户标识,所以在设置中,进行了自定义请求头的设置,可以方便的设置相关的请求头,在任何一个请求都会自动带上设置的请求信息。
swagger 信息展示
来源于后端swagger配置的相关信息在此处进行展示
- codevs 4163 hzwer与逆序对
- ASP.NET Core提供模块化Middleware组件
- CSS预处理器的对比 — sass、less和stylus
- Gensim实现Word2Vec的Skip-Gram模型简介快速上手对语料进行分词使用gensim的word2vec训练模型
- React第三方组件4(状态管理之Reflux的使用②TodoList上)
- 机器学习(六)Sigmoid函数和Softmax函数1 Sigmoid函数2 Softmax函数
- React第三方组件4(状态管理之Reflux的使用①简单使用)
- React第三方组件3(状态管理之Flux的使用⑤异步操作)
- 使用yo-get下载视频网站视频或其
- React多页面应用3(webpack4 多页面实现)
- 洛谷P2345 奶牛集会
- React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)
- React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)
- 洛谷P2345 奶牛集会
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Studio用genymotion运行后小图标无法显示问题
- PHP7数组的底层实现示例
- 浅析Flutter AbsorbPointer 与 IgnorePointer的区别
- php用wangeditor3实现图片上传功能
- Flutter集成到已有iOS工程的方法步骤
- php的命名空间与自动加载实现方法
- Android Studio实现简易计算器(表格布局TableLayout)
- php常用经典函数集锦【数组、字符串、栈、队列、排序等】
- php实现的表单验证类完整示例
- Android studio实现简单的计算器
- Thinkphp5框架实现获取数据库数据到视图的方法
- thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
- Android Studio实现简单计算器功能
- 深入学习微信网址链接解封的防封原理visit_type
- kotlin实现五子棋单机游戏