Java SpringMVC+Swagger UI生成可视图的API文档(详细图解)

Swagger UI
关于Swagger UI官方解释是这样的:The Swagger UI is an open source project to visually render documentation for a Swagger defined API directly from the API’s Swagger specifcation 官网地址 下面是官方的效果图:

5F19E5D5-9FB4-45A0-BBF8-613E2014A5C1.png

我将上图分成了两部分
文档地址:从改地址请求数据,获取JSON格式数据,交给第二步显示
API文档显示:将JSON数据转化成可视图的效果

Swagger可以将某种固定格式的JSON数据生成可以视图的在线API文档,支持在线测试,可以清楚的观察到IO数据
SpringMVC + Swagger
目的:在原有的SpringMVC系统中添加Swagger,通过在接口上添加注解实现,接口文档的同步效果。 下图为我实现之后的效果:

10B721C3-92EB-467F-B7A9-D1764CF96CA8.png

项目搭建
我的工具:Eclipse开发工具(安装spring插件,当然也可以不要,就是麻烦点),Maven,Tomcat,Internet访问,Chrome浏览器 1.创建Simple Spring Web Maven工程 右键New->Spring Project,选择对应类型,finish, 如下图:[图片上传中。。。(3)] 我的工程的结构,注意那两个配置文件,名称不重要,可以随便改,注意要对应好web.xml中的名称就行。[图片上传中。。。(4)] 想了想还是把三个配置文件贴出来吧。 web.xml
<?xml version="1.0" encoding="ISO-8859-1"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>SwaggerDemo</display-name> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/application-config.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/mvc-config.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping></web-app>

application-config.xml
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> </beans>

mvc-config.xml
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <mvc:annotation-driven /> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/view/"/> <property name="suffix" value=".jsp"/> </bean></beans>

这样配置到后面配置Swagger会出现无法自动注入的问题,后面再说,以上为工具自动生成的代码。
2.添加Swagger-Spring MVC包、JSON和jackson pom.xml文件中 properties标签里面添加jackson版本号
<version.jackson>2.4.4</version.jackson>

dependencies标签中添加
<dependency> <groupId>com.mangofactory</groupId> <artifactId>swagger-springmvc</artifactId> <version>0.9.5</version> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> <classifier>jdk15</classifier> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>{version.jackson}</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>{version.jackson}</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>${version.jackson}</version> </dependency>

3.下面是重点,Swagger所有API文档都在这里存储,添加Swagger配置类 创建一个配置类MySwaggerConfig,添加私有成员SpringSwaggerConfig,set方法使用@Autowired注解自动注入,使用@Bean注解添加SwaggerSpringMvcPlugin,并使用自定义的ApiInfo,SwaggerConfig类需要添加@Configuration以及@EnableSwagger
package com.edu.xk;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.EnableWebMvc;import com.mangofactory.swagger.configuration.SpringSwaggerConfig;import com.mangofactory.swagger.models.dto.ApiInfo;import com.mangofactory.swagger.plugin.EnableSwagger;import com.mangofactory.swagger.plugin.SwaggerSpringMvcPlugin;@Configuration@EnableSwagger@EnableWebMvcpublic class MySwaggerConfig { private SpringSwaggerConfig springSwaggerConfig; /** * Required to autowire SpringSwaggerConfig / @Autowired public void setSpringSwaggerConfig(SpringSwaggerConfig springSwaggerConfig) { this.springSwaggerConfig = springSwaggerConfig; } /* * Every SwaggerSpringMvcPlugin bean is picked up by the swagger-mvc * framework - allowing for multiple swagger groups i.e. same code base * multiple swagger resource listings. / @Bean public SwaggerSpringMvcPlugin customImplementation() { // 暂时不用过滤 /return new SwaggerSpringMvcPlugin(this.springSwaggerConfig).apiInfo(apiInfo()).includePatterns(".pet.");*/ return new SwaggerSpringMvcPlugin(this.springSwaggerConfig).apiInfo(apiInfo()); } private ApiInfo apiInfo() { ApiInfo apiInfo = new ApiInfo( "My Apps API Title", "My Apps API Description", "My Apps API terms of service", "My Apps API Contact Email", "My Apps API Licence Type", "My Apps API License URL" ); return apiInfo; }}

官方原话: The @EnableSwagger annotation, in this example, enables swagger-springmvc out of the box. The generated swagger json Resource Listing is available at /api-docs 4.添加Controller:WebServiceForCSS,Swagger文档在此处添加
package com.edu.xk.webservice;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import com.edu.xk.model.User;import com.wordnik.swagger.annotations.ApiOperation;import com.wordnik.swagger.annotations.ApiParam;import net.sf.json.JSONObject;/** * @moudle: WebServiceForCSS * @version:v1.0 * @Description: TODO * @author: xukai * @date: 2016年12月1日 下午5:37:30 * */@Controllerpublic class WebServiceForCSS { @ResponseBody @RequestMapping(value = "getUserById", method = RequestMethod.GET, produces = {"application/json; charset=utf-8","application/xml"}) @ApiOperation(value = "通过ID查询USER信息", httpMethod = "GET", notes = "暂无") public String getUserById( @ApiParam(required = true, name = "id", value = "ID") @RequestParam(value = "id") String id,HttpServletRequest request) { User user = new User(); user.setId(id); user.setName("测试人员"); user.setAge(25); JSONObject object = JSONObject.fromObject(user); return object.toString(); }}

5.配置文件修改 context加载的时候需要配置的文件,此处配置文件为application-config.xml
<mvc:annotation-driven /> <context:component-scan base-package="com.edu"/> <bean class="com.edu.xk.configer.SwaggerConfig"/>

6.下载Swagger UI组件 去官网下载Zip包,或者在github上下载也可以,需要将dist文件夹下的所有文件的复制到webapp目录下。
7.修改Project Properties 将jdk1.5换成最新的本地的jdk,对应的Java complier也改为对应的,还有maven包依赖也需要添加,不然启动的时候会找不到ContextLoader.class。
8.添加拦截器,不然无法访问.html后缀文件,在web.xml中添加
<servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.jpg</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.png</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.gif</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.ico</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.js</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.css</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.html</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.xls</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.doc</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.json</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.eot</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.svg</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.ttf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>.woff</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.woff2</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list>

运行项目,可以看到效果图: [图片上传中。。。(5)]可以看到,现在效果还是和官网上一样的。改为自己的API文档可以通过修改index.html中的url = "http://petstore.swagger.io/v2/swagger.json";
或者直接修改访问的地址栏为:http://localhost:8080/SwaggerDemo/api-docs
原理分析
SpringMVC+Swagger其实就是在系统加载的时候,Swagger配置类去扫描所有添加注释的接口,并且储存起来通过下面地址进行访问,返回JSON数据,在前端界面显示出来 [图片上传中。。。(6)] 这里我在网上看到一个汉化的版本(原效果),下载了他工程,将他生成demo.json放入的我的工程中的webapp目录下,下面是效果图 [图片上传中。。。(7)]
遇到的问题
问题1:下载maven的jar包中途失败,工程会出错maven missing 解决方法:选中Project->右键maven->update project->选中Force update 如果此时依然有 missing的jar,按照 buildpath 提示的 jar包missing 路径,去 maven 本地仓库中对应位置(jar包后面有路径),删掉 该 jar 包的 xxx.lastUpdated 文件,之后,再重新执行 项目右键maven->update project
问题2:缺失jackson包会导致出现异常java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/ObjectMapper)
问题3:java.lang.ClassNotFoundException: org.springframework.web.util.Log4jConfigListen,因为工程没有引入maven中的jar包,解决办法:选中工程右键->Properties->Deployment Assembly->add->Java Build Path Entries->Maven Dependencies->OK
问题4:org.springframework.beans.factory.BeanCreationException,出现这个异常是因为SpringSwaggerConfig的私有成员RequestMappingHandlerMapping造成的,将<mvc:annotation-driven />
放入到web.xml的context-param标签对应的配置文件application-config.xml中,完美解决,官网解释该标签作用为: Required so swagger-springmvc can access spring’s RequestMappingHandlerMapping
org.springframework.beans.factory.NoSuchBeanDefinitionException: Noqualifying bean of type[org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping]found for dependency [collection oforg.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping]:expected at least 1 bean which qualifies as autowire candidate forthis dependency. Dependency annotations:{@org.springframework.beans.factory.annotation.Autowired(required=true)}

Swagger UI开发帮助

Swagger Editor

反正顺路,顺便的Editor也写完,Editor个人感觉就是一个文档编辑器,感觉SosoApi还是好些。试着在Swagger官网下载了一个Swagger Editor跑着玩了玩.下载swagger-editor.zip,解压到Tomcat的webapps文件夹中,来看一下效果图 [图片上传中。。。(8)]Swagger UI结合Swagger Editor更好用,但是在线编辑那个太卡了,备份一个本地的,以备不时只需。Swagger UI
关于Swagger UI官方解释是这样的:The Swagger UI is an open source project to visually render documentation for a Swagger defined API directly from the API’s Swagger specifcation 官网地址 下面是官方的效果图:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容