asp.net core 集成swagger ui的原理解析

什么是swagger?

说swagger 之前，我们先说一下openapi 规范。

openapi 是一种和语言无关的用于描述restapis 接口功能的一种规范，对restapis 接口的描述包括： 接口参数信息、接口返回值信息、api 功能描述、请求路径等。

这里我们说openapi 只是一种规范，既然是一种规范，就必然有相应的实现，swagger 就是其中一个实现了open api 规范的工具。

.net 中restapis的代表便是 web api ，并且.net 针对web api 也有相应的swagger 实现，主要有：swashbuckle 和 nswag，本文主要讲解如何通过 swashbuckle库 将swaggerui集成到asp.net core项目中去，并快速生成asp.net web api 接口文档。

基本原理分析

在开始进入正题前，我们先看下我的 web api 示例站点中快速集成swagger ui 后的效果，并记住下面提到的 swaggerui 界面 和 openapi json 信息 两个关键词，因为后面会多次提到这两个词语。

swaggerui 界面如下图：

openapi json 信息如下（该json信息描述了web api 所有接口，按照openapi规范生成）：

大致的原理就是，当我们浏览器中输入：http://localhost:5000/swagger/index.html 请求swaggerui 页面，swaggerui 中间件拦截到这个请求后，读取内置swaggerui 页面内容并响应给浏览器,浏览器再发起一个异步请求去请求openapi json 信息，然后根据openapi json 信息生成上面第一张图中所有的接口信息，我们可以通过浏览器的开发人员工具看到这个请求。

ok，了解完swaggerui 的基本原理后，下面我们来讲解如何快速将swaggerui 集成到 web api 项目中去。

安装swagger相关nuget包

在需要集成swagger的项目中安装nuget 包：swashbuckle.aspnetcore

注入swaggerapi文档生成服务，添加swaggerui 响应中间件

打开swaggerdemo下的startup.cs文件，修改configuservice 方法，将api文档生成服务添加到依赖注入容器中。

  public void configureservices(iservicecollection services)
        {
            //这里将openapi json 信息生成服务添加到依赖注入容器中，负责根据web api 的定义生成相应的openapi json 信息。
            services.addswaggergen();
            services.addcontrollerswithviews();
        }

修改startup.cs 下的 configure 方法，将swagger ui 请求拦截中间件、openapi json 信息请求拦截中间件加入到请求中间件管道列表中去。

 public void configure(iapplicationbuilder app, iwebhostenvironment env)
        {
            if (env.isdevelopment())
            {
                app.usedeveloperexceptionpage();
            }
            else
            {
                app.useexceptionhandler("/home/error");
            }
            app.usestaticfiles();
            //useswagger添加了一个中间件，这个中间件主要是拦截 浏览器中发送过来的 获取openapi json 信息的http请求，并把webapi 描述信息返回给swaggerui，上图中，我么可以看到默认请求openapi json 信息的http地址是：http://localhost:5000/swagger/v1/swagger.json
            app.useswagger();
            
            //useswaggerui 添加了一个中间件，主要用于拦截swaggerui界面的访问请求，并根据openapi json 信息动态生成接口列表，在上面的基本原理讲述中，默认请求swaggerui 界面的http地址是：http://localhost:5000/swagger/index.html
            app.useswaggerui((options) =>
            {
                //swaggerendpoint 方法用于告诉swaggerui 请求哪个地址来获取openapi json 信息，后面我们会讲解如何自定义这个路径。
                options.swaggerendpoint("/swagger/v1/swagger.json", "my api v1");
            });

            app.userouting();

            app.useauthorization();

            app.useendpoints(endpoints =>
            {
                endpoints.mapcontrollerroute(
                    name: "default",
                    pattern: "{controller=home}/{action=index}/{id?}");
            });
        }

ok，至此，swaggerui 就已经集成到了我们的webapi 项目中去了，如果不出意外，那么可以正常看到我上面 基本原理分析中提到的效果图了，是不是很简单，下面我们来讲解一些更深入一些的用法。

如何自定义openapi json 信息请求http地址?

默认openapi json 信息的请求地址为：/swagger/v1/swagger.json,如果我们想换成其他地址，比如改成：/blogapis/v1/swagger.json 该如何操作呢？

首先配置拦截swaggerui界面请求的中间件，告诉swaggerui 从哪个地址去请求获取 openapi json 信息。

app.useswaggerui((options) =>
{
      //options.swaggerendpoint("/swagger/v1/swagger.json", "my api v1");
      //这里告诉swaggerui从/bogapis/v1/swagger.json 获取 openapi json 信息。
        options.swaggerendpoint("/blogapis/v1/swagger.json", "blogapis");
});    

然后配置拦截openapi json 信息的中间件，重新定义openapi json信息的请求路径格式，如下：

app.useswagger(swaggeroptions =>
{
       //告诉openapi json 信息请求拦截中间件，收到以下格式的请求时返回openapi json信息
       //注意：路径中必须包含: {documentname}，swagger 中间件从请求路径中{documentname}占位符位置提取出api 文档名称，以便显示分组到该文档名称下的 
       //所有api信息。
       swaggeroptions.routetemplate = "/blogapis/{documentname}/swagger.json";
});

顺便提一下，通过查看swagger 源码，我们可以看到默认的openapi json解析路由就是 swagger/{documentname}/swagger.json ，这就是为什么我们一开始默认必须使用 /swagger/v1/swagger.json 格式去请求openapi json 信息的原因。

如何在swaggerui 中分组展示指定的api?

上面我们在 openapi json 请求地址的解析路由中提到了必须包含{documentname}参数，比如：/blogapis/{documentname}/swagger.json,同时上面也提到了openapi json 信息请求地址和这个路由是一一对应的，如：我们上面定义的openapi json 信息的请求地址是：/blogapis/v1/swagger.json，当浏览器访问swaggerui 页面并请求 /blogapis/v1/swagger.json 地址时，根据路由模板：/blogapis/{documentname}/swagger.json 从openapi json 请求地址的第二段中提取出v1作为 api 文档名称，然后默认加载出所有 分组名称为 v1 或者 未定义分组名称的api 信息，并显示，那么我们如何通过documentname 对api 进行分组展示呢？

打开startup.cs ,找到 configureservices 方法，添加如下代码：

  services.addswaggergen(options =>
            {
                //这里我们将用户相关的api分成一组,这里的user就是文档名称(documentname)
                options.swaggerdoc("user", new microsoft.openapi.models.openapiinfo()
                {
                    title = "用户管理",
                    version = "1.0"
                });
                //这里我们将文章管理相关的api分成一组。
                options.swaggerdoc("post", new microsoft.openapi.models.openapiinfo()
                {
                    title = "文章管理",
                    version = "1.0"
                });
                //以下是设置swaggerui中所有web api 的参数注释、返回值等信息从哪里获取。
                var xmlfile = $"{assembly.getexecutingassembly().getname().name}.xml";
                var xmlpath = path.combine(appcontext.basedirectory, xmlfile);
                options.includexmlcomments(xmlpath);
            });

找到configure方法，按照如下配置：

 app.useswaggerui((options) =>
            {
                //options.swaggerendpoint("/swagger/v1/swagger.json", "my api v1");
                //options.swaggerendpoint("/blogapis/v1/swagger.json", "blogapis");

                //定义用户管理相关api的openapi json 信息请求路径。
                options.swaggerendpoint("/blogapis/user/swagger.json", "usermanagerapis");
                //定义文章管理相关api的openapi json 信息请求路径。
                options.swaggerendpoint("/blogapis/user/swagger.json", "postmanagerapis");
            });

分别在usercontroller 、 postcontroller 上面添加 [apiexplorersettings]特性，并设置分组名称

[route("api/[controller]"), apiexplorersettings(groupname = "user")]
    [apicontroller]
    public class usercontroller : controllerbase
    {
        /// <summary>
        /// 用户登录
        /// </summary>
        /// <param name="username">用户名</param>
        /// <param name="password">密码</param>
        /// <returns></returns>
        [httppost]
        [producesresponsetype(200, type = typeof(userinfo))]
        public userinfo login([fromform] string username, [fromform] string password)
        {
            if (username == "chenxin" && password == "123456")
            {
                return new userinfo() { username = "chenxin", age = 31 };
            }
            return null;
        }

        [httpget]
        public list<userinfo> getallusers()
        {
            return new list<userinfo>()
            {
                new userinfo()
                {
                    username="chenxin",
                    age=31
                },
                new userinfo()
                {
                    username="zhangsan",
                    age=35
                }
            };
        }

 [route("api/{controller}")]
    [apiexplorersettings(groupname = "post")]
    public class postcontroller : controllerbase
    {
        /// <summary>
        /// 获取所有文章
        /// </summary>
        /// <returns></returns>
        [httpget]
        public list<post> getallposts()
        {
            return new list<post> { new post()
            {
                title="测试文章",
                content="测试内容..."
            } };
        }
    }
    public class post
    {
        public string title { get; set; }
        public string content { get; set; }
        public datetime publishtime { get; set; } = datetime.now;
    }

按照上述步骤操作完成后，我们可以看到已经实现了api的分组。

好了，问题来了，为什么默认没有使用swaggerdoc 方法定义任何文档名称默认也能找到api信息呢，其实还是swagger 中间件默认给我们增加了一个名为v1的文档。

如何自定义swaggerui的请求路径?

如果不想输入 swagger/index.html 来访问swaggerui ， 比如想改成 /blogapisdocs,打开startup.cs 找到 configure 方法，添加如下代码：

   app.useswaggerui((options) =>
            {
                //options.swaggerendpoint("/swagger/v1/swagger.json", "my api v1");
                //options.swaggerendpoint("/blogapis/v1/swagger.json", "blogapis");

                //定义用户管理相关api的openapi json 信息请求路径。
                options.swaggerendpoint("/blogapis/user/swagger.json", "usermanagerapis");
                //定义文章管理相关api的openapi json 信息请求路径。
                options.swaggerendpoint("/blogapis/user/swagger.json", "postmanagerapis");

                //这里我们告诉swaggerui 请求拦截中间件，当收到浏览器发送过来的/blogapisdocs 的请求则返回swaggerui 页面。
                options.routeprefix = "blogapisdocs";
            });

如何将api 方法注释、参数注释自动通过swaggerui展示？

打开startup.cs 找到 configureservices方法增加如下代码：

   services.addswaggergen(options =>
            {
                //这里我们将用户相关的api分成一组。
                options.swaggerdoc("user", new microsoft.openapi.models.openapiinfo()
                {
                    title = "用户管理",
                    version = "1.0"
                });
                //这里我们将文章管理相关的api分成一组。
                options.swaggerdoc("post", new microsoft.openapi.models.openapiinfo()
                {
                    title = "文章管理",
                    version = "1.0"
                });
                //以下是设置swaggerui中所有web api 的参数注释、返回值等信息从哪里获取。
                //这里表示从站点根目录下的指定xml配置文件中去读取api的注释信息。
                var xmlfile = $"{assembly.getexecutingassembly().getname().name}.xml";
                var xmlpath = path.combine(appcontext.basedirectory, xmlfile);
                options.includexmlcomments(xmlpath);
            });

然后需要设置webapi 项目在生成项目时自动生成描述api信息的xml文件，并需要将生成的xml配置文件swaggerdemo.xml 设置为始终复制到输出目录：

好了，基本用法就讲到这里了，本文主要讲解了如何对api进行分组，这里仅仅是举了一个按照api功能进行分组的例子，其实在实际开发中，要按照何种方式分组，可以按照需求灵活定义，比如按照api版本进行分组。

如果您在阅读本文的过程中有任何疑问，欢迎给我的个人博客：http://www.lovecoding.com.cn 留言，看到会及时回复！

到此这篇关于asp.net core 集成swagger ui的文章就介绍到这了,更多相关asp.net core 集成swagger ui内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！