在 ASP.NET Core 中使用 Knife4jUI 作为 Swagger UI

Swagger的默认 UI 太丑太难用,而且还不能复制文档上的文字和代码,那么本文就提供一种美化的方法。

第一步:安装Swashbuckle.AspNetCore

这个就不多说了,在 Nuget 包管理器里面搜一下Swashbuckle.AspNetCore安装就行了。

第二步:添加并启用 Swagger 服务

打开Program.cs文件(有的项目是Startup.cs文件),添加如下代码:

// 添加Swagger
builder.Services.AddSwaggerGen();

// 启用Swagger
app.UseSwagger();
app.UseSwaggerUI();

然后按Ctrl+F5启动浏览器,然后在浏览器地址后面加上/swagger/index.html,然后回车即可看到 Swagger 默认页面。

图 1

如果启动后看到的是如下报错,大概率是因为有的ApiController头上没有加[HttpGet][HttpPost]这种 Request Method 标签,因为Swagger要求所有ApiController都必须明确指定 Request Method,只要有任意一个没指定,它就报错。

第三步:将生成的文档文件作为注释源

1、生成文档文件

这个需要在项目的【属性】页面,然后依次展开左侧导航【生成】-【输出】,然后在【输出】页面中找到文档文件选项,然后勾上生成包含 API 文档的文件。然后找到XML 文档文件路径选项,把它下方的文本框清空。注意:一定要把这个文本框清空,只有清空了才会使用默认路径,这个默认路径就是跟你项目程序集输出的路径一致。另外,这个路径还可以通过编程的方式获取到:Path.Combine(AppContext.BaseDirectory,$"{this.GetType().Assembly.GetName().Name}.xml")

我见过有人喜欢填D:\xxx\abc.xml这种路径,结果一生成项目,ViualStudio就会往这个路径写文件,如果项目是你一个人写的那无所谓,但是如果是多人协作,你等于是往每个人的D盘都写入了这些乱七八糟的东西,太恶心人;再说如果别人的没有D盘只有C盘,生成项目时就会报错。所以,多人协作的项目在做一些配置项的时候要多考虑别人。

一般来说,如果项目是多层架构的话,那么至少要让WebApi这一层和Models这一层生成文档文件。

图2

2、打开Program.cs文件(有的项目是Startup.cs文件),修改代码如下:

builder.Services.AddSwaggerGen(config =>
{
config.IncludeXmlComments(Path.Combine(AppContext.BaseDirectory, nameof(WebApplication1) + ".xml"));
config.IncludeXmlComments(Path.Combine(AppContext.BaseDirectory, nameof(Models) + ".xml"));
});

重新编译项目,然后刷新浏览器即可看到,注释中已经有我们在代码里加的文档注释了。

图3

至此,一个非常丑的接口文档就出来了。如果前端不是好看的小姐姐,就这样给他们用吧,不用往下看了。

那么如果前端是个好看的小姐姐呢,可以试着用knife4j美化一下。

四、使用knife4j美化Swagger

knife4j原本是为Java MVC框架集成Swagger生成Api文档的增强解决方案,后来支持了ASP.NET Core。

1、安装IGeekFan.AspNetCore.Knife4jUI包。

2、打开Program.cs文件,替换Swagger默认UI:

//app.UseSwaggerUI();
app.UseKnife4UI(config =>
{
//config.RoutePrefix的默认值是swagger,所以文档访问地址就是/swagger/index.html
//现在把这个路由的前缀值设为空值,那么文档访问地址就是/index.html
config.RoutePrefix = String.Empty;
config.SwaggerEndpoint("/swagger/v1/swagger.json","设备管理");
});

重新编译项目,然后按Ctrl+F5启动浏览器即可看到新的UI界面。

图4
图5
图6

所以,用了某个东西,跟用好某个东西,往往是天壤之别。

未完待续 ...

Tags: knife4j swagger