Swagger 自定义UI界面
Swagger 自定义UI界面
- Swagger简单介绍
- 如何使用Swagger
- 添加自定义UI界面
- 使用swagger-ui-layer
Swagger ui 的原生UI界面如下:
个人感觉原生UI显示的有些不够漂亮和清晰,特别是request 的model部分
所以想重新设计一个更加友好美观的UI界面。
最后的效果图如下:
- 接口文档信息界面
- 接口文档调试界面
实现原理:
因为Swagger-ui读取的数据来源于/v2/api-docs,并且返回的是json数据。
所以只要自己写一个页面去解析json数据,并展现就可以实现自定义swagger的UI界面了
添加自定义UI界面
有两种方式
1.可以在项目的基础上新增一个servlet ,指向对应的html文件 html文件里再去解析json,并渲染UI
2.新建一个项目,用webjars将前端资源打成jar包,再供其他项目使用 项目结构如图
主要文件是docs.html,此文件作用是解析json和渲染UI
通过ajax请求v2/api-docs,再解析json。
$.ajax({
url : "v2/api-docs",
//url : "http://petstore.swagger.io/v2/swagger.json",
dataType : "json",
type : "get",
success : function(data) {
//do something
console.log(data);
}
});
Swagger 自定义UI界面的更多相关文章
- AI剪辑和自定义UI,打造更智能的剪辑体验
为满足开发者构建高效的应用内视频编辑能力,7月的HMS Core 6.0 推出了视频编辑服务(Video Editor Kit),一站式的视频处理能力获得了积极反响.同时,我们也关注到开发者需要集成丰 ...
- Asp.net Core WebApi 使用Swagger做帮助文档,并且自定义Swagger的UI
WebApi写好之后,在线帮助文档以及能够在线调试的工具是专业化的表现,而Swagger毫无疑问是做Docs的最佳工具,自动生成每个Controller的接口说明,自动将参数解析成json,并且能够在 ...
- Android开发1:基本UI界面设计——布局和组件
前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...
- BCG界面库下的Windows8 UI界面样式www.webui8.com
BCG界面库下的Windows8 UI界面样式(Metro风格)控件主要有以下一些功能: 规则的大块磁贴 支持完整键盘导航 Tile组 标题(Caption) 标题按钮(Caption buttons ...
- Wix 安装部署教程(三)自定义安装界面和行为
接上一篇自定义安装界面,这篇继续探索,首先介绍下,Wix为我们定义了五种风格,每种风格的UI都是有一定顺序的.我们可以改变安装顺序,也可以完全自定义一个Dialog插入其中.比如Wix_Mondo 风 ...
- Android——控制UI界面
一.使用XML布局文件控制UI界面 res\layout\activity_main.xml代码如下: <FrameLayout xmlns:android="http://schem ...
- Wix打包系列(四) 自定义UI
原文:Wix打包系列(四) 自定义UI 除了标准的安装界面,如果我们要在安装时需要提供一些额外的信息时,这时就需要自定义界面来显示和录入这些信息. 4.1 自定义对话框 如上一章中我们测试数据库的连 ...
- 转载:21个免费的UI界面设计工具、资源及网站
我们刚刚介绍了移动设计初探:触屏网页设计.本文将介绍一些UI界面与设计使用的元素.软件和网站.内容很丰富,适合用户体验设计师.界面设计师.产品设计师.JS前段开发.手机产品设计以及iPad和平板电脑产 ...
- 微服务架构 - 搭建docker本地镜像仓库并提供权限校验及UI界面
搭建docker本地镜像仓库并提供权限校验及UI界面 docker本地镜像仓库的作用跟maven私服差不多,特别是公司级或者是小组级开发好的docker仓库可以上传到本地镜像仓库中,需要用时,直接从本 ...
随机推荐
- Mysql使用ReplicationDriver驱动实现读写分离
数据库的主从复制环境已经配好,该要解决系统如何实现读写分离功能了.Mysql的jdbc驱动提供了一种实现ReplicationDriver. 1 数据库地址的两种写法 参考:https://dev.m ...
- Qt for Android使用grpc探索
利用Qt在Android上使用grpc需要*.a的静态库,Windows上编译的lib库以及linux编译出来的.a,经过尝试,均无法链接成功.本文尝试使用NDK来编译Android版本的grpc静态 ...
- Fundebug后端Node.js插件更新至0.2.0,支持监控Express慢请求
摘要: 性能问题也是BUG,也需要监控. Fundebug后端Node.js异常监控服务 Fundebug是专业的应用异常监控平台,我们Node.js插件fundebug-nodejs可以提供全方位的 ...
- 团队第五次作业——Alpha2版本
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 这个作业要求在哪里 https:// ...
- 模仿51cto搜索框
做这个demo遇见的问题 1==>input type=submit有默认样式 padding:1px 6px所以将他去除 2==>input submit有默认样式 去除默认边框 bor ...
- os模块补充以及序列化模块
os模块补充以及序列化模块 一.os模块的补充 1.os.path.abspath 能把存在的相对路径的绝对路径显示出来 path = os.path.abspath("连达day19. ...
- c# 第10节 表达式
本节内容: 1:表达式是什么 2:表达式实例 1:表达式是什么 2:表达式实例 3:运算符分类
- 201871010123-吴丽丽 《面向对象程序设计(Java)》第十四周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- 201871010118-唐敬博《面向对象程序设计(JAVA)》第十四周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 <<https://home.cnblogs.com/u/nwnu-daizh/>> 这个作业的要求在哪里 < ...
- Linux用户态与内核态通信的几种方式
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Linux 用 ...