Swagger Ui + Editor搭建,解决跨域问题
2017-10-13 本文已影响0人
我是大导演
公司项目用java开发,现在准备切换到前后端分离,于是搭建swagger环境用于接口对接
1. 简单介绍 swagger ui与editor的功能
swagger-editor: 相当于编译接口的工具,好比编辑器,有一些语法检查等功能,可以把
编辑好的接口导出成json文件,用于swagger ui加载
![](https://img.haomeiwen.com/i4281434/10f9ef9a50f743ce.png)
swagger-ui: 相当于展示的web, 可以把swagger-editor编辑好的文件加载过来页面展示
![](https://img.haomeiwen.com/i4281434/5649fa1585734e09.png)
2. 环境搭建:
1. 环境准备 node环境搭建
2. 下载
https://github.com/swagger-api/swagger-editor
swagger-editor: 下载以后在根目录直接npm start
![](https://img.haomeiwen.com/i4281434/208cf7b459a51047.png)
https://github.com/swagger-api/swagger-ui
swagger-ui: 下载以后启一个web服务器访问dist目录就可以了
例如我用ittun 的公网映射web配置,可以公网查看接口
自带http server功能,指定其是dist目录即可.
![](https://img.haomeiwen.com/i4281434/6205eb30f3ebe0fa.png)
![](https://img.haomeiwen.com/i4281434/59eecea0c49cb096.png)
![](https://img.haomeiwen.com/i4281434/7eabba0e31188ddc.png)
3. 解决跨域问题
项目 pom.xml 引入jar包
![](https://img.haomeiwen.com/i4281434/85d878aa25e33450.png)
web.xml配置过滤器
![](https://img.haomeiwen.com/i4281434/e118aced5bd67798.png)