【swagger】前后端分离联调利器——swagger安装和使用

蔚落 2022-06-05 03:48 311阅读 0赞

# 一、前言 #

互联网发展越来越迅速，近来项目中使用了前后端分离的模式。前端开发使用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

<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的配置文件里添加 ##

添加完后的效果：

![这里写图片描述][SouthEast]

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

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

会看到如下界面：

![这里写图片描述][SouthEast 1]

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

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

![这里写图片描述][SouthEast 2]

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

![这里写图片描述][SouthEast 3]

经过操作后，就会看到操作的结果：

![这里写图片描述][SouthEast 4]

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

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

![这里写图片描述][SouthEast 5]

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

# 四、小结 #

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

[SouthEast]: /images/20220605/5b2ae407ee74473283aa9d5e3628988e.png
[http_localhost_8081_swagger-ui.html]: http://localhost:8081/swagger-ui.html#/
[SouthEast 1]: /images/20220605/eb7a7b14aef145369bdd36b204858929.png
[SouthEast 2]: /images/20220605/3bdf05e66d7242248bb6b6d4eaee0f13.png
[SouthEast 3]: /images/20220605/9c214d3ddf9247baac8e111e08e6134f.png
[SouthEast 4]: /images/20220605/306e0b766e784a3f9d597c3780e2aac8.png
[SouthEast 5]: /images/20220605/11f83688caf5492487584cab532958a7.png