在 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 默认页面。
如果启动后看到的是如下报错,大概率是因为有的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、打开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"));
});
重新编译项目,然后刷新浏览器即可看到,注释中已经有我们在代码里加的文档注释了。
至此,一个非常丑的接口文档就出来了。如果前端不是好看的小姐姐,就这样给他们用吧,不用往下看了。
那么如果前端是个好看的小姐姐呢,可以试着用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界面。
所以,用了某个东西,跟用好某个东西,往往是天壤之别。
未完待续 ...