Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
任推邦
APP推广项目分发和流量变现平台
美图设计室
AI智能一键生成海报,免费平面设计
茅茅虫
茅茅虫AI论文写作助手,AIGC论文查重
Trae
字节跳动推出的 AI原生编程工具
豆包AI
字节跳动旗下 AI 智能助手
蜂小推
不扣量的项目推广平台
即梦AI
一站式智能创作平台,即刻造梦
AiPPT
全智能AI一键生成 PPT
我要自学网
免费视频教程,提供全方位软件学习
堆友AI
零门槛,多风格AI绘画免费生成,电商海报设计神器

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

Swagger UI

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://swagger.io
GitHub:https://github.com/swagger-api/swagger-ui
网站描述:一个Restful风格接口的文档在线自动生成和测试的框架
访问官网
GitHub

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 ,创建SwaggerConfig文件,内容如下,

@Configuration
@EnableSwagger2
public class SwaggerConfig {

    @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 
ApiParam 
ApiResponse 
ApiResponses 
ResponseHeader 
具体可以参考swagger官方注解文档:http://docs.swagger.io/swagger-core/apidocs/index.html


4.添加自定义UI界面

有两种方式 
1.可以在项目的基础上新增一个servlet ,指向对应的html文件 
html文件里再去解析json,并渲染UI

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


仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/910

更多»
热门资源
bootstrap
最流行的HTML,CSS和JavaScript框架,用于开发响应式,移动端先行的web项目
官网
GitHub
Materialize
基于Material Design的现代响应式前端框架
官网
GitHub
Element UI
一套基于 Vue 2.0 的桌面端组件库
官网
GitHub
Material Design(MDB)
领先的Bootstrap UI套件之一
点击进入
Muse-UI
基于 Vue2.0 的 Material Design UI 库
官网
GitHub
sb-admin
基于Bootstrap简约美观的后台管理模板
官网
GitHub
Magic UI
为设计工程师打造的UI库
官网
GitHub
Vue-Access-Control
Vue权限管理解决方案
官网
GitHub
RmlUI
桌面端GUI开发框架
官网
GitHub
HeroUI
基于TailwindCSS构建的React 现代UI框架
官网
GitHub
tweakcn
shadcn/ui组件可视化无代码编辑器
官网
GitHub
kitty-ui
基于 Vue + Element 实现的权限管理系统
点击进入
GitHub
类似于Swagger UI的资源
vuestic-admin
一个响应式的后台管理模板
官网
GitHub
vue-beauty
基于 vue.js 和 ant-design样式 的PC端 UI库
官网
GitHub
ng-bootstrap
一个angular UI bootstrap库
官网
GitHub
tweakcn
shadcn/ui组件可视化无代码编辑器
官网
GitHub
Cf-ui
Cloudflare 开发的一个 Web UI 框架。
官网
vue-select
基于Vue的select下拉框组件
官网
GitHub
sing-app
Bootstrap 4构建的免费和开源管理仪表板模板
官网
GitHub
Arco Design
基于 Arco Design 的 React UI 组件库
官网
GitHub
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。