再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

这篇具有很好参考价值的文章主要介绍了再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一般在使用 Spring Boot 开发前后端分离项目的时候,都会用到 Swagger。Swagger 是一个规范和完整的框架,用于生成、描述、调试和可视化 RESTful 风格的 Web API 服务框架。

但随着系统功能的不断增加,接口数量的爆炸式增长,Swagger 的使用体验就会变得越来越差,比如请求参数为 JSON 的时候没办法格式化,返回结果没办法折叠,还有就是没有提供搜索功能。

刚好最近发现 Knife4j 弥补了这些不足,赋予了 Swagger 更强的生命力,于是就来给大家安利一波。

一、关于 Knife4j

Knife4j 的前身是 swagger-bootstrap-ui,是 springfox-swagger-ui 的增强 UI 实现。swagger-bootstrap-ui 采用的是前端 UI 混合后端 Java 代码的打包方式,在微服务的场景下显得非常臃肿,改良后的 Knife4j 更加小巧、轻量,并且功能更加强大。

springfox-swagger-ui 的界面长这个样子,说实话,确实略显丑陋。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

swagger-bootstrap-ui 增强后的样子长下面这样。单纯从直观体验上来看,确实增强了。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

改良后的 Knife4j 不仅在界面上更加优雅、炫酷,功能上也更加强大:后端 Java 代码和前端 UI 模块分离了出来,在微服务场景下更加灵活;更提供了专注于 Swagger 的增强解决方案。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

官方文档:

https://doc.xiaominfo.com/knife4j/documentation/

码云地址:

https://gitee.com/xiaoym/knife4j

示例地址:

https://gitee.com/xiaoym/swagger-bootstrap-ui-demo

二、整合 Swagger

为了对比 Knife4j 和 Swagger,我们先来整合体验一把 Swagger。

第一步,在 pom.xml 中添加 springfox 的官方 Swagger 依赖:

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-boot-starter</artifactId>
    <version>3.0.0</version>
</dependency>

第二步,添加 Swagger 的 Java 配置,只需要配置基本的 API 信息和需要扫描的类路径即可。

@Configuration
public class SwaggerConfig {
    @Bean
    public Docket docket() {
        Docket docket = new Docket(DocumentationType.OAS_30)
                .apiInfo(apiInfo()).enable(true)
                .select()
                //apis: 添加swagger接口提取范围
                .apis(RequestHandlerSelectors.basePackage("com.codingmore.controller"))
                .paths(PathSelectors.any())
                .build();

        return docket;
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("编程猫学习网站的 admin 管理端 API")
                .description("codingmore")
                .contact(new Contact("沉默王二&石磊", "https://tobebetterjavaer.com", "983436076@qq.com"))
                .version("1.0")
                .build();
    }
}

第二步,访问 API 文档,访问地址如下所示:

http://localhost:9002/swagger-ui/

在项目路径后面添加上 swagger-ui 就可以了。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

在 Controller 类中,可以看到常见的 Swagger 注解 @Api 和 @ApiOperation:

@Controller
@Api(tags = "文章 ")
@RequestMapping("/posts")
public class PostsController {
    @RequestMapping(value = "/delete", method = RequestMethod.GET)
    @ResponseBody
    @ApiOperation("删除")
    public ResultObject<String> delete(long postsId) {
        return ResultObject.success(postsService.removePostsById(postsId) ? "删除成功" : "删除失败");
    }
}
  • @Api 注解用在类上,该注解将一个 Controller 类标记位一个 Swagger 资源(API)。默认情况下,Swagger 只会扫描解析具有 @Api 注解的类。

  • @ApiOperation 注解用在方法上,该注解在指定的方法上,对一个方法进行描述。

Swagger 还有很多其他的注解,比如说 @ApiParam、@ApiResponses 等等,这里就不再一一说明。

三、整合 Knife4j

Knife4j 完全遵循了 Swagger 的使用方式,所以可以无缝切换。

第一步,在 pom.xml 文件中添加 Knife4j 的依赖(不需要再引入 springfox-boot-starter)。

<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-spring-boot-starter</artifactId>
    <!--在引用时请在maven中央仓库搜索3.X最新版本号-->
    <version>3.0.2</version>
</dependency>

第二步,在 Java 配置类上添加 @EnableOpenApi 注解,开启 Knife4j 增强功能。

@Configuration
@EnableOpenApi
public class SwaggerConfig {}

第三步,重新运行 Spring Boot 项目,访问 API 文档,查看效果。

访问地址:http://localhost:9002/doc.html

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

如果项目中加了权限认证的话,记得给 Knife4j 添加白名单。我的项目用的是 SpringSecurity,所以需要在 application.yml 文件中添加。

secure:
  ignored:
    urls: #安全路径白名单
      - /doc.html
      - /swagger-ui/**
      - /swagger/**
      - /swagger-resources/**
      - /**/v3/api-docs

四、Knife4j 的功能特点

1)支持登录认证

Knife4j 和 Swagger 一样,也是支持头部登录认证的,点击「authorize」菜单,添加登录后的信息即可保持登录认证的 token。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

如果某个 API 需要登录认证的话,就会把之前填写的信息带过来。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

2)支持 JSON 折叠

Swagger 是不支持 JSON 折叠的,当返回的信息非常多的时候,界面就会显得非常的臃肿。Knife4j 则不同,可以对返回的 JSON 节点进行折叠。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

3)离线文档

Knife4j 支持把 API 文档导出为离线文档(支持 markdown 格式、HTML 格式、Word 格式),

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

使用 Typora 打开后的样子如下,非常的大方美观。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

4)全局参数

当某些请求需要全局参数时,这个功能就很实用了,Knife4j 支持 header 和 query 两种方式。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

之后进行请求的时候,就会把这个全局参数带过去。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

5)搜索 API 接口

Swagger 是没有搜索功能的,当要测试的接口有很多的时候,当需要去找某一个 API 的时候就傻眼了,只能一个个去拖动滚动条去找。

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

在文档的右上角,Knife4j 提供了文档搜索功能,输入要查询的关键字,就可以检索筛选了,是不是很方便?

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

目前支持搜索接口的地址、名称和描述。

五、尾声

除了我上面提到的增强功能,Knife4j 还提供了很多实用的功能,大家可以通过官网的介绍一一尝试下,生产效率会提高不少。

https://doc.xiaominfo.com/knife4j/documentation/enhance.html

再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

如果项目中之前使用过 Swagger 生成接口文档,切换到 Knife4j 可以说是非常的丝滑,只需要两步:

  • 在 pom.xml 文件中把 springfox-boot-starter 替换为 knife4j-spring-boot-starter
  • 访问地址由原来的 http://${host}:${port}/swagger-ui.html 切换到 http://${host}:${port}/doc.html,如果有权限限制的话,记得开白名单。

本篇已收录至 GitHub 上星标 1.4k+ star 的开源专栏《Java 程序员进阶之路》,该专栏风趣幽默、通俗易懂,对 Java 爱好者极度友好和舒适😄,内容包括但不限于 Java 基础、Java 集合框架、Java IO、Java 并发编程、Java 虚拟机、Java 企业级开发(Git、SSM、Spring Boot)等核心知识点

https://github.com/itwanger/toBeBetterJavaer

star 了这个仓库就等于你拥有了成为了一名优秀 Java 工程师的潜力。也可以戳下面的链接跳转到《Java 程序员进阶之路》的官网网址,开始愉快的学习之旅吧。

https://tobebetterjavaer.com/
再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高

没有什么使我停留——除了目的,纵然岸旁有玫瑰、有绿荫、有宁静的港湾,我是不系之舟文章来源地址https://www.toymoban.com/news/detail-402649.html

到了这里,关于再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • cloud Alibab+nacos+gateway集成swaggerui,统一文档管理(注意点)

    首先说明:本文只说整合注意点 效果图和功能参考链接 在网关服务添加依赖即可解决 请注意排查:webflux的依赖是否有效。并且排除spring-boot-starter-web 注意查看gateway的相关配置是否有错误 原因:一定是你的依赖或者配置有问题 有问题请留言

    2024年02月13日
    浏览(36)
  • aps.net core 6.0 web API & SwaggerUI & IIS部署

    本文章的流程概述如下: 1、将 asp.net core web API 部署到 IIS 2、将 Swagger UI 设为起始页 3、设置内网穿透,允许其他内网用户访问 web API 我使用的是 VS2022社区版,WebAPI的版本是 .netcore6.0,其他版本可能略有不同,请根据情况适当更改。 创建webapi项目 默认选项即可 运行项目会默

    2024年02月09日
    浏览(31)
  • 【Java可执行命令】(三)API文档生成工具javadoc: 深入解析Java API文档生成工具javadoc ~

    javadoc 是Java的一个可执行命令程序,它旨在为Java源代码生成API文档。它由Sun Microsystems(现为Oracle Corporation)于1995年引入,是Java开发工具包(JDK)的一部分。 javadoc 是通过分析源代码中的注释来生成API文档的工具 。在编写Java代码时,开发人员可以使用特殊的注释标签来描述

    2024年02月16日
    浏览(34)
  • API文档生成(sphinx)

    1.安装 pip install Sphinx 2.使用 2.1文档手册 Sphinx 1.3.1 中文手册 (推荐查看)教程https://fengxc.me/基于python注释使用sphinx自动化生成API文档.html 2.2创建工程 新建一个文件夹sphinx_test, 并创建两个子文件夹code, doc。目录结构如下: 进去到doc目录, 打开powershell, 执行下边命令创建工程 s

    2024年01月23日
    浏览(29)
  • SpringBoot生成RESTful API文档

    由于我一开始学习的SpringBoot是3以上版本,所以我这里用到的也是支持和SpringBoot3能够整合的SpringDoc 这里先说一下,其实SpringDoc就是Swagger3版本,我一开始整合的2版本,比较麻烦况且最后SpringBoot程序都启动不了了,后面查资料才看到SpringDoc,好使的一批!! 官网地址:http:

    2024年02月08日
    浏览(45)
  • 用了这款 IDEA 神器,领导都夸我代码写得好!

    CheckStyle作为检验代码规范的插件,除了可以使用配置默认给定的开发规范,如Sun的,Google的开发规范啊,也可以导入像阿里的开发规范的插件。 事实上,每一个公司都存在不同的开发规范要求,所以大部分公司会给定自己的check规范,一般导入给定的 checkstyle.xml 文件即可实

    2024年02月16日
    浏览(35)
  • 【这款神器可以有】3DMAX一键墙体门洞窗洞插件使用教程

     3DMAX一键墙体门洞窗洞插件,只需导入户型图,单/双面墙体一键生成。 【主要功能】 --一键生成墙体 --一键门洞 --一键窗洞 --支持单/双面墙体生成 【安装方法】 无需安装,直接拖动插件脚本到3dmax窗口即可打开插件。 【快速开始】 将3dmax系统单位设置为“毫米(mm)”。

    2024年01月18日
    浏览(60)
  • 取代 Postman + Swagger 这款神器功能更强大,界面更炫酷

    然后打开导入界面,选择Swagger-URL导入,输入Swagger的数据URL; 导入时将显示导入预览,显示要导入的接口和数据模型,Apifox将会把我们接口返回的实体类转换为数据模型,以便进行复用; 导入成功后界面效果如下,Apifox将查看文档和修改文档做了区分,方便我们管理接口文

    2024年04月26日
    浏览(28)
  • 扔掉okhttp、httpClient,这款轻量级 HTTP 神器好用到爆

    前言 功能特性 快速使用 HTTP请求相关注解 配置项说明 高级功能 全局拦截器 调用适配器和数据转码器 总结 在 SpringBoot 项目直接使用 okhttp 、 httpClient 或者 RestTemplate 发起 HTTP 请求,既繁琐又不方便统一管理。因此,在这里推荐一个适用于 SpringBoot 项目的轻量级HTTP客户端框架

    2024年02月07日
    浏览(58)
  • Apikit 自学日记:自动生成 API 文档

    功能入口 :API管理应用 / 选中某个项目 / 其他菜单 / 数据源同步(API文档自动生成) 该功能可通过配置数据源信息,实现基于数据源的API信息自动生成API文档。 当前支持5种数据源: Swagger URL、apiDoc、Github、gitlab、码云 。 Swagger URL和apiDoc的数据源配置方式一致,仅需填写来

    2024年02月11日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包