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界面的更多相关文章

  1. AI剪辑和自定义UI,打造更智能的剪辑体验

    为满足开发者构建高效的应用内视频编辑能力,7月的HMS Core 6.0 推出了视频编辑服务(Video Editor Kit),一站式的视频处理能力获得了积极反响.同时,我们也关注到开发者需要集成丰 ...

  2. Asp.net Core WebApi 使用Swagger做帮助文档,并且自定义Swagger的UI

    WebApi写好之后,在线帮助文档以及能够在线调试的工具是专业化的表现,而Swagger毫无疑问是做Docs的最佳工具,自动生成每个Controller的接口说明,自动将参数解析成json,并且能够在 ...

  3. Android开发1:基本UI界面设计——布局和组件

    前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...

  4. BCG界面库下的Windows8 UI界面样式www.webui8.com

    BCG界面库下的Windows8 UI界面样式(Metro风格)控件主要有以下一些功能: 规则的大块磁贴 支持完整键盘导航 Tile组 标题(Caption) 标题按钮(Caption buttons ...

  5. Wix 安装部署教程(三)自定义安装界面和行为

    接上一篇自定义安装界面,这篇继续探索,首先介绍下,Wix为我们定义了五种风格,每种风格的UI都是有一定顺序的.我们可以改变安装顺序,也可以完全自定义一个Dialog插入其中.比如Wix_Mondo 风 ...

  6. Android——控制UI界面

    一.使用XML布局文件控制UI界面 res\layout\activity_main.xml代码如下: <FrameLayout xmlns:android="http://schem ...

  7. Wix打包系列(四) 自定义UI

    原文:Wix打包系列(四) 自定义UI 除了标准的安装界面,如果我们要在安装时需要提供一些额外的信息时,这时就需要自定义界面来显示和录入这些信息. 4.1  自定义对话框 如上一章中我们测试数据库的连 ...

  8. 转载:21个免费的UI界面设计工具、资源及网站

    我们刚刚介绍了移动设计初探:触屏网页设计.本文将介绍一些UI界面与设计使用的元素.软件和网站.内容很丰富,适合用户体验设计师.界面设计师.产品设计师.JS前段开发.手机产品设计以及iPad和平板电脑产 ...

  9. 微服务架构 - 搭建docker本地镜像仓库并提供权限校验及UI界面

    搭建docker本地镜像仓库并提供权限校验及UI界面 docker本地镜像仓库的作用跟maven私服差不多,特别是公司级或者是小组级开发好的docker仓库可以上传到本地镜像仓库中,需要用时,直接从本 ...

随机推荐

  1. Mysql使用ReplicationDriver驱动实现读写分离

    数据库的主从复制环境已经配好,该要解决系统如何实现读写分离功能了.Mysql的jdbc驱动提供了一种实现ReplicationDriver. 1 数据库地址的两种写法 参考:https://dev.m ...

  2. Qt for Android使用grpc探索

    利用Qt在Android上使用grpc需要*.a的静态库,Windows上编译的lib库以及linux编译出来的.a,经过尝试,均无法链接成功.本文尝试使用NDK来编译Android版本的grpc静态 ...

  3. Fundebug后端Node.js插件更新至0.2.0,支持监控Express慢请求

    摘要: 性能问题也是BUG,也需要监控. Fundebug后端Node.js异常监控服务 Fundebug是专业的应用异常监控平台,我们Node.js插件fundebug-nodejs可以提供全方位的 ...

  4. 团队第五次作业——Alpha2版本

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 这个作业要求在哪里 https:// ...

  5. 模仿51cto搜索框

    做这个demo遇见的问题 1==>input type=submit有默认样式 padding:1px 6px所以将他去除 2==>input submit有默认样式 去除默认边框 bor ...

  6. os模块补充以及序列化模块

    os模块补充以及序列化模块   一.os模块的补充 1.os.path.abspath 能把存在的相对路径的绝对路径显示出来 path = os.path.abspath("连达day19. ...

  7. c# 第10节 表达式

    本节内容: 1:表达式是什么 2:表达式实例 1:表达式是什么 2:表达式实例 3:运算符分类

  8. 201871010123-吴丽丽 《面向对象程序设计(Java)》第十四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  9. 201871010118-唐敬博《面向对象程序设计(JAVA)》第十四周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 <<https://home.cnblogs.com/u/nwnu-daizh/>> 这个作业的要求在哪里 < ...

  10. Linux用户态与内核态通信的几种方式

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Linux 用 ...