Swagger-UI展示接口

简单介绍API的管理工具Swagger的UI模块。

简介：swagger ui就是一个能整合到项目中让api的注释能够生成到一个网页上。能简单测试和给前端看。

第一步：添加引用

打开NuGet程序包管理器，搜索Swagger。安装搜索出来的这个Swashbuckle。

第二步：修改配置文件

安装完成后会在根目录App_Start文件夹下生成SwaggerConfig.cs。

打开此文件，按照西面配置即可，注意命名空间。

 1 using System.Web.Http;

 2 using WebActivatorEx;

 3 using WebApplication1;

 4 using Swashbuckle.Application;

 5 using Swashbuckle.Swagger;

 6 using System.Collections.Concurrent;

 7 using System.Collections.Generic;

 8 using System.IO;

 9 using System.Xml;

10

11 [assembly: PreApplicationStartMethod(typeof(SwaggerConfig), "Register")]

12

13 namespace WebApplication1

14 {

15     public class SwaggerConfig

16     {

17         public static void Register()

18         {

19             var thisAssembly = typeof(SwaggerConfig).Assembly;

20

21             GlobalConfiguration.Configuration

22                 .EnableSwagger(c =>

23                     {

24                         c.SingleApiVersion("v1", "WebApplication1");

25                         c.IncludeXmlComments(System.AppDomain.CurrentDomain.BaseDirectory + "/bin/WebApplication1.XML");

26                         c.CustomProvider((defaultProvider) => new CachingSwaggerProvider(defaultProvider));

27                     })

28                 .EnableSwaggerUi(c =>

29                     {

30                         c.InjectJavaScript(thisAssembly, "WebApplication1.Scripts.swagger.js");

31                     });

32         }

33     }

34     public class CachingSwaggerProvider : ISwaggerProvider

35     {

36         private static ConcurrentDictionary<string, SwaggerDocument> _cache = new ConcurrentDictionary<string, SwaggerDocument>();

37

38         private readonly ISwaggerProvider _swaggerProvider;

39

40         public CachingSwaggerProvider(ISwaggerProvider swaggerProvider)

41         {

42             _swaggerProvider = swaggerProvider;

43         }

44

45         public SwaggerDocument GetSwagger(string rootUrl, string apiVersion)

46         {

47             var cacheKey = string.Format("{0}_{1}", rootUrl, apiVersion);

48             SwaggerDocument srcDoc = null;

49             if (!_cache.TryGetValue(cacheKey, out srcDoc))

50             {

51                 srcDoc = _swaggerProvider.GetSwagger(rootUrl, apiVersion);

52

53                 srcDoc.vendorExtensions = new Dictionary<string, object> { { "ControllerDesc", GetControllerDesc() } };

54                 _cache.TryAdd(cacheKey, srcDoc);

55             }

56             return srcDoc;

57         }

58

59         /// <summary>

60         /// 从API文档中读取控制器描述

61         /// </summary>

62         /// <returns>所有控制器描述</returns>

63         public static ConcurrentDictionary<string, string> GetControllerDesc()

64         {

65             string xmlpath = string.Format("{0}/bin/WebApplication1.XML", System.AppDomain.CurrentDomain.BaseDirectory);

66             ConcurrentDictionary<string, string> dic = new ConcurrentDictionary<string, string>();

67             if (!File.Exists(xmlpath))

68             {

69                 return dic;

70             }

71             XmlDocument doc = new XmlDocument();

72             doc.Load(xmlpath);

73             XmlNodeList list = doc.SelectNodes("//member[contains(@name,'T:')]");

74             foreach (XmlNode item in list)

75             {

76                 string val = item.Attributes["name"].Value;

77                 string key = val.Substring(val.LastIndexOf('.') + 1).Replace("Controller", "");

78                 XmlNode node = item.FirstChild;

79                 if (!dic.ContainsKey(key))

80                 {

81                     dic.TryAdd(key, node.InnerText.Trim());

82                 }

83             }

84             return dic;

85         }

86     }

87 }

第三步：修改项目的输出XML文件

右键项目的属性，生成，勾选

第四步：显示控制器的别称

需要自己创建第二步中需要的swagger.js文件。在项目的Scripts文件夹中添加名为swagger.js文件。内容如下：

 1 $(function () {

 2     var init = function () {

 3         $.getJSON($("#input_baseUrl").val(), {}, function (res) {

 4             $("#resources_container .resource").each(function (i, item) {

 5                 var _id = $(item).attr("id");

 6                 if (!_id) { return; }

 7                 var strSummary = res.ControllerDesc[_id.substring(9)];

 8                 if (strSummary) {

 9                     $(item).children(".heading").children(".options").prepend('<li style="color:#000">' + strSummary + '</li>');

10                 }

11             });

12         });

13     };

14     init();

15 });

第五步：添加方法得特性标签

1         [HttpGet]

2         [Route("api/values/GetMyName/id")]

3         public string GetMyName(int id)

4         {

5             return "value";

6         }

到这里所有步骤全部完成，接下来我们只需要运行项目。然后在地址栏中加上/swagger/ui/index.

http://localhost:port/swagger/ui/index

最后界面如下：

然后我们试一下是否成功。

点开这个方法界面如下，输入参数，点击try it out. 我们会得到接口返回的“value”字符串。测试配置成功！

巴特西

Swagger-UI展示接口

最新文章

热门文章