VUE重写的Swagger-ui,使其更方便,更美观
首先需要引入swagger的配置包信息,过程自行百度
将项目jar目录下的jar包引入到项目中(加入 Build Path),如果项目使用的是maven则加入本地依赖,(本项目暂时未加入**仓库,只能从本地依赖,后续有时间会申请提交到**仓库)
<dependency>
<groupId>com.github.yq3</groupId>
<artifactId>vue-swager-ui</artifactId>
<version>1.0-SNAPSHOT</version>
<scope>system</scope>
<systemPath>${project.basedir}/../ds-config/src/main/resources/lib/vue-swager-ui-1.0-SNAPSHOT.jar</systemPath>
</dependency>
上面路径为本地jar包所在目录
用npm 将项目打包后,将打包后的build目录放入到你项目静态页面的目录中,vue-doc.html必须为第一层目录,列如:localhost:8080/vue-doc.html,这样就可以了,如果需要改变路径,则修改本项目源代码store.js中的v2/api-docs路径即可
swagger封装给出的请求地址默认是/v2/api-docs,所以vue-swagger-ui调用后台也是/v2/api-docs,不能带后缀,且需返回json格式数据,框架如果是spring boot的可以不用修改,直接使用,如果是Spring MVC在web.xml中配置了DispatcherServlet,则需要追加一个url匹配规则,如下:
<servlet>
<servlet-name>demo</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:config/spring.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!--默认配置,.htm|.do|.json等等配置-->
<servlet-mapping>
<servlet-name>demo</servlet-name>
<url-pattern>*.htm</url-pattern>
</servlet-mapping>
<!-- 配置vue-swagger-ui的url请求路径-->
<servlet-mapping>
<servlet-name>demo</servlet-name>
<url-pattern>/v2/api-docs</url-pattern>
</servlet-mapping>
localhost:8080/vue-doc.html
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
For a detailed explanation on how things work, check out the guide and docs for vue-loader.