好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Swagger UI

Swagger UI 介绍

Swagger是个前后端协作的利器,解析 代码 里的注解 生成 jsON 文件 ,通过Swagger UI 生成 网页版的 接口文档 ,可以在上面做简单的接口调试 。

实现原理:

因为Swagger-ui读取的数据来源于/v2/api-docs,并且返回的是json数据。?

所以只要自己写 一个 页面 去解析json数据,并展现就可以实现 自定义 swagger的UI界面了?

如何使用Swagger

1、引入 jar包

首首先需要在你的 pom.xml 中引入swagger的包

<dependency>

<groupId>io.springfox</groupId>

<artifactId>springfox-swagger2</artifactId>

<version>2.2.2</version>

</dependency>

2.启用swagger

启用swagger,创建SwaggerCon fig 文件 , 内容 如下,

@Con fig uration

@EnableSwagger2

public class SwaggerCon fig {

@Bean

public Docket ProductApi() {

return new Docket(DocumentationType.SWAGGER_2)

.genericModelSubstitutes(DeferredResult.class)

.useDefaultResponseMessages(false)

.forCodeGeneration(false)

.pathMapping("/")

.select()

.build()

.apiInfo(productApiInfo());

}

private ApiInfo productApiInfo() {

ApiInfo apiInfo = new ApiInfo("XXX系统数据 接口文档 ",

"文档描述。。。",

"1.0.0",

"API TERMS URL",

"联系人邮箱",

"license",

"license url");

return apiInfo;

}

}

3. 添加 swagger注解

常用的swagger注解?

Api?

ApiModel?

ApiModelProperty?

ApiOperation?

ApiP ara m?

ApiResponse?

ApiResponses?

ResponseHeader?

具体可以参考swagger官方注解文档:http://docs.swagger.io/swagger-core/apidocs/index.html

4. 添加 自定义 UI界面

有两种方式?

1.可以在项目的基础上新增 一个 servlet,指向对应的html 文件 ?

html 文件 里再去解析json,并渲染UI

2.新建 一个 项目,用webjars将前端资源打成 jar包 ,再供其他项目使用?

网站地址 : http://swagger.io

GitHub: https://github.com/swagger-api/swagger-ui

网站描述: 一个 Restful风格接口的文档在线 自动 生成 和测试的框架

Swagger UI官方网站

官方网站: http://swagger.io

如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。

查看更多关于Swagger UI的详细内容...

  阅读:36次

上一篇

下一篇

第1节:ng-alain    第2节:sing-app    第3节:Adminify    第4节:ant-design-pro    第5节:evergreen    第6节:rsuite    第7节:UIkit    第8节:CoreUI    第9节:RageFrame    第10节:BlurAdmin    第11节:Ace Admin    第12节:SUI    第13节:vue ui    第14节:Laravel-admin    第15节:luda    第16节:gentelella    第17节:storybook    第18节:Grommet    第19节:iView ui    第20节:react-kawaii    第21节:Semantic-UI    第22节:Swagger UI    第23节:Office UI Fabric    第24节:react-native-web    第25节:拼图.pintuer    第26节:antd-admin    第27节:Skeleton    第28节:edex-ui    第29节:vue-beauty    第30节:Cf-ui    第31节:react-tv    第32节:material-dashboard    第33节:charisma    第34节:quickui    第35节:vue-blu    第36节:lulu ui    第37节:Gestalt    第38节:React95    第39节:ZUI    第40节:vuestic-admin    第41节:html5-boilerplate    第42节:Materialize    第43节:React Suite    第44节:AdminLTE    第45节:Rebass    第46节:material-ui    第47节:Element UI    第48节:vue-multiselect    第49节:iView Admin    第50节:Flat UI    第51节:Rubik UI    第52节:best-resume-ever    第53节:sb-admin    第54节:ng2-admin    第55节:Jquery EasyUI    第56节:react-desktop    第57节:at-ui    第58节:rdash-angular    第59节:wxa-plugin-canvas    第60节:xy-ui    第61节:vue-strap    第62节:vuetify    第63节:buefy    第64节:bootswatch    第65节:H+    第66节:mdui    第67节:AlloyUI    第68节:Bootflat    第69节:TileBoard    第70节:primeng    第71节:Structor    第72节:mp_canvas_drawer    第73节:ng-zorro-antd    第74节:UXCore    第75节:Vali    第76节:Muse-UI    第77节:virtual-scroller    第78节:DXY-UI    第79节:zhengAdmin    第80节:avue    第81节:vue-element-admin    第82节:Vue-Access-Control    第83节:Dcat Admin    第84节:awesome-react-components    第85节:Vuesax    第86节:vue-design-system    第87节:tabler    第88节:jquery-ui    第89节:vue-framework-wz    第90节:bideo.js    第91节:Auto-Layout    第92节:pageResponse    第93节:ice 飞冰    第94节:Elemental UI    第95节:ok-admin    第96节:form-generator    第97节:layui    第98节:Muuri    第99节:ngx-admin    第100节:ant-design-pro-vue    第101节:Kendo UI    第102节:Nebular    第103节:pearProject    第104节:BUI    第105节:marko    第106节:Magic-Grid    第107节:Atui    第108节:react-toolbox    第109节:vali-admin    第110节:d2-admin    第111节:DevUI Design