一、前言

互联网发展越来越迅速,近来项目中使用了前后端分离的模式。前端开发使用Angular4,后端开发使用SSM框架。这样的话就有了前后端联调的问题,接口数据类型,接口返回参数等等问题。项目初期的时候使用postman进行测试,但是测试比较麻烦,需要把url粘贴进去,然后再测试,后来发现了一个联调利器——swagger。

经过了3个月使用,发现这个联调利器真的是很好使,所以记录下来,让大家一起研究。

二、安装部署

与其说是安装部署,不如说是在项目中添加swagger的相关jar包,然后把swagger交给spring管理。通过访问相关url,就可以看到swagger的管理界面了。

2.1 在项目中依赖swagger相关的jar

小编在web的项目pom中依赖:

包括了springfox-swagger2和springfox-swagger-ui,小编引入的版本都是2.7.0

<!--swagger-->
     <dependency>
         <groupId>io.springfox</groupId>
         <artifactId>springfox-swagger2</artifactId>
         <version>2.7.0</version>
     </dependency>
     <dependency>
         <groupId>io.springfox</groupId>
         <artifactId>springfox-swagger-ui</artifactId>
         <version>2.7.0</version>
     </dependency>

2.2 1. Springmvc的配置文件里添加

<bean class="springfox.documentation.swagger2.configuration.Swagger2DocumentationConfiguration" id="swagger2Config"/>
    <mvc:resources location="classpath:/meta-inf/resources/" mapping="swagger-ui.html"/>
    <mvc:resources location="classpath:/meta-inf/resources/webjars/" mapping="/webjars/**"/>

添加完后的效果:

2.3 运行项目,打开swagger联调界面

小编给web配置的tomcat的端口是8081,运行项目中,在浏览器中输入:http://localhost:8081/swagger-ui.html#/

会看到如下界面:

在显示的界面中会有所有的Controller,在每个Controller中会有包含的所有的接口,可以进行调试,举个例子:

在小编项目中的place-manage-controller中,会有下面的接口,在swagger中也通过不同的颜色显示出了每个接口的responseMethod类型,绿色是post类型,棕色是put类型,红色是delete类型,蓝色是get类型。

选择一个接口会有相关的调试方法:

经过操作后,就会看到操作的结果:

三、swagger可以帮助提高代码质量

在使用springmvc的时候我们需要制定接口的responseMethod类型,如果不写,在swagger中会把所的类型都显示出来:

下次自己就知道要添加相关的类型了。

四、小结

通过研究和使用swagger,个人感觉前后台联调的效率真的提高了,有的时候真的需要通过可视化界面来显示内容,如果还要通过excel来统计各个接口,是非常不方便的,而且接口变化还是很频繁的。欢迎更多前后端分离的项目来使用swagger。

【swagger】前后端分离联调利器——swagger安装和使用的更多相关文章

  1. 如何利用Python+Vue实现简单的前后端分离

    因为python开发的高效性,python web开发也受到越来越多人的关注,下面这篇文章主要给大家介绍了关于如何利用Python+Vue实现简单的前后端分离的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  2. swagger中如何给请求添加header

    这篇文章主要介绍了swagger中如何给请求添加header,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 解决Swagger修改请求对象字段文档不更新问题

    这篇文章主要为大家介绍了解决Swagger修改请求对象字段文档不更新的问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. 基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案

    本文就在前后端分离模式的架构下,针对前端在Web开发中,所遇到的安全问题以及应对措施和注意事项,并提出解决方案。

  5. Flask实现swagger在线文档与接口测试流程详解

    Flask是一个使用Python编写的轻量级Web应用框架。其WSGI工具箱采用 Werkzeug,模板引擎则使用Jinja2。Flask使用 BSD 授权。Flask也被称为“microframework”,因为它使用简单的核心,用 extension 增加其他功能,本篇带你用Flask实现swagger在线文档与接口测试

  6. 在nodejs中使用swagger方式

    这篇文章主要介绍了在nodejs中使用swagger方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  7. 详解Swagger接口文档和常用注解的使用

    Swagger是一款遵循 Restful 风格的接口文档开发神器,支持基于 API 自动生成接口文档。本文将为大家讲讲Swagger接口文档和常用注解的使用方法,需要的可以参考一下

  8. springBoot详解集成Swagger流程

    Swagger是一个规范和完整的框架,用于生成、描述、调用和可视化 Restful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法、参数和模型紧密集成到服务器端的代码,允许API来始终保持同步

  9. 基于 Node.js 实现前后端分离

    为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异。痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式。

  10. vue前后端分离如何解决每次请求session都会变的问题

    这篇文章主要介绍了vue前后端分离如何解决每次请求session都会变的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部