Spring Boot集成swagger-ui时，如何解决swagger-ui.html无法访问显示404错误的问题？

本文共计802个文字，预计阅读时间需要4分钟。

最近给graphserver添加了Swagger，记录以下过程与问题解决。

Swagger是一个规范和框架，用于生成、描述、调用和可视化RESTful Web服务。集成Swagger后，可以提供接口文档和交互界面，方便前端开发和测试。

具体步骤如下：

1. 安装Swagger依赖

在graphserver项目中，通过npm安装swagger-ui和swagger-node-express模块。

bashnpm install swagger-ui swagger-node-express

2. 配置Swagger

在项目根目录下创建`swagger.json`文件，定义API文档结构。

json{ swagger: 2.0, info: { title: GraphServer API, version: 1.0.0, description: GraphServer RESTful API }, host: localhost:3000, basePath: /api, paths: {}}

3. 创建Swagger中间件

在项目入口文件中，引入swagger-node-express模块，并使用`swaggerSpecMiddleware`中间件。

javascriptconst swaggerSpecMiddleware=require('swagger-node-express').swaggerSpecMiddleware;const app=require('express')();

// 使用Swagger中间件swaggerSpecMiddleware(app, '/api-docs');

// 其他路由配置

app.listen(3000, ()=> { console.log('Server running on port 3000');});

4. 定义API接口

在`swagger.json`中，为每个API接口添加路径、方法、参数和响应等信息。

jsonpaths: { /graph: { get: { summary: Get graph information, parameters: [ { name: graphId, in: query, type: string } ], responses: { 200: { description: Success, schema: { type: object, properties: { name: { type: string }, nodes: { type: array, items: { type: object, properties: { id: { type: string }, name: { type: string } } } }, edges: { type: array, items: { type: object, properties: { source: { type: string }, target: { type: string } } } } } } } } } }}

5. 验证Swagger

访问`http://localhost:3000/api-docs`，查看生成的API文档和交互界面。

至此，graphserver已成功集成Swagger，方便了前端开发和测试。

最近给graphserver增加swagger，记录下过程与问题解决。

Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务，后端集成下Swagger，然后就可以提供一个在线文档地址给前端同学。

引入 Swagger

pom中加入相关配置：

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

增加Swagger2Config, 添加@EnableSwagger2,可以通过定义Docket bean实现自定义。

@Configuration @EnableSwagger2 @Profile("swagger") @ComponentScan("xxx.controller") public class Swagger2Config { @Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .enable(true) .select() .apis(RequestHandlerSelectors.basePackage("xxx.controller")) .paths(PathSelectors.any()) .build(); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("XXX Rest Server") .description("XXXRest接口") .contact(new Contact("contract", "url", "email")) .version("1.0") .build(); } }

swagger-ui.html 404问题

项目中有web配置，因此怀疑是这些配置影响了，搜索下发现这位仁兄有类似经历：www.cnblogs.com/pangguoming/p/10551895.html

于是在WebMvcConfig 配置中，override addResourceHandlers

@Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/**").addResourceLocations("classpath:/static/"); registry.addResourceHandler("swagger-ui.html") .addResourceLocations("classpath:/META-INF/resources/"); registry.addResourceHandler("/webjars/**") .addResourceLocations("classpath:/META-INF/resources/webjars/"); }

搞定收工。

延伸阅读

server端有了swagger，前端如何更优先的调用？

参见：Vue 使用typescript， 优雅的调用swagger API,笔者提供了一个开源npm库，可以为前端生成调用axios调用代码。

参考 www.jb51.net/article/130207.htm

总结

到此这篇关于Spring Boot引入swagger-ui 后swagger-ui.html无法访问404的问题的文章就介绍到这了,更多相关Spring Boot引入 swagger-ui.html无法访问404内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！