allbet开户:[译]使用DOT语言和GraphvizOnline来可视化你的ASP.NETCore3.0终结点01

admin 2个月前 (07-16) 科技 34 0

这是系列文章中的第一篇:使用GraphvizOnline可视化ASP.NETCore3.0终结点。.

  1. 第1部门-使用DOT语言来可视化你的ASP.NETCore3.0终结点(本文)
  2. 第2部门-向ASP.NET Core应用程序添加终结点图
  3. 第3部门-使用ImpromptuInterface建立一个自界说的DfaGraphWriter,以便于反射

作者:依乐祝
原文:https://andrewlock.net/visualizing-asp-net-core-endpoints-using-graphvizonline-and-the-dot-language/
译文:https://www.cnblogs.com/yilezhu/p/13301981.html

在这篇文章中,我将展示若何在ASP.NETCore3.0应用程序中使用GraphvizOnline服务。这使您可以建立如下所示的图表,这些图表形貌了应用程序中的所有端点:

用GraphvizOnline和DOT语言绘制图形

GraphvizOnline是一个GitHub上的开源项目,它为DOT图形形貌语言 提供了一个在线可视化工具。这是一种简朴的语言,它允许您界说各种类型的图形,它将节点与边毗邻起来。

例如,一个基本的无向图可以界说为

graph MyGraph {
  a -- b -- c;
  b -- d;
}

它形貌了以下图表:

每个节点都有一个名称(a, b, c, d),而且--界说节点之间的边缘。边界说节点之间的毗邻,但它们没有偏向(因此名称,无向【undirected】).

固然,你也可以界说一个有向图,其中边是有偏向的。对于有向边,使用->而不是--。例如:

digraph MyGraph {
  a -> b -> c;
  d -> b;
}

它形貌了以下图表:

您可以自界说节点和边缘以多种方式显示的方式。例如,可以符号节点和边缘:

digraph MySimpleGraph {
   // The label attribute can be used to change the label of a node...
   a [label="Foo"];
   b [label="Bar"];
   // ... or an edge
   a -> b [label="Baz"];
}

allbet开户:[译]使用DOT语言和GraphvizOnline来可视化你的ASP.NETCore3.0终结点01 第1张

你可以使用DOT图形形貌语言做更多的事情,这正是我们现在所需要的。那么,这若何应用于ASP.NET Core应用程序呢?

使用有向图来可视化ASP.NET Core终结点

ASP.NETCore中的终结点路由系统通过建立端点URL段的有向图来有效地事情。然后将传入的请求与图举行匹配(一次一个段),以确定要执行的终结点。

例如,以下简朴有向图示意ASP.NET Core3.0 RazorPages 默认应用程序模板中的终结点(dotnet new webapp),其中包罗三个Razor页面:Index.cshtml, Error.cshtmlPrivacy.cshtml:

digraph DFA {
  1 [label="/Error/"]
  2 [label="/Index/"]
  3 [label="/Privacy/"]
  4 -> 1 [label="/Error"]
  4 -> 2 [label="/Index"]
  4 -> 3 [label="/Privacy"]
  4 [label="/"]
}

其中形貌为如下图表:

allbet开户:[译]使用DOT语言和GraphvizOnline来可视化你的ASP.NETCore3.0终结点01 第2张.

在上面的DOT文件中,节点被赋予顺序的整数名,1, 2, 3等,并使用端点名称举行符号。这是ASP.NET Core用于示意终结点图的花样。

对于Razor页面,路由异常简朴,以是图异常显著。ASP.NET Core WebAPI应用程序天生了一个更有趣的图表。例如,下面显示的ASP.NET Core 2.0默认模板中包罗的ValuesController。它使用多个HTTP谓词,以及稍微庞大的URL结构:

[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
    // GET api/values
    [HttpGet]
    public ActionResult<IEnumerable<string>> Get() => new string[] { "value1", "value2" };

    // GET api/values/5
    [HttpGet("{id}")]
    public ActionResult<string> Get(int id) => "value";

    // POST api/values
    [HttpPost]
    public void Post([FromBody] string value) { }

    // PUT api/values/5
    [HttpPut("{id}")]
    public void Put(int id, [FromBody] string value) { }

    // DELETE api/values/5
    [HttpDelete("{id}")]
    public void Delete(int id) { }
}

为了更好地器量,我还添加了一个基本的健康检查端点。UseEndpoints():

app.UseEndpoints(endpoints =>
{
    endpoints.MapHealthChecks("/healthz");
    endpoints.MapControllers();
});

此应用程序天生以下图表:

digraph DFA {
  1 [label="/healthz/"] 
  2 [label="/api/Values/{...}/ HTTP: GET"] 
  3 [label="/api/Values/{...}/ HTTP: PUT"] 
  4 [label="/api/Values/{...}/ HTTP: DELETE"] 
  5 [label="/api/Values/{...}/ HTTP: *"] 
  6 -> 2 [label="HTTP: GET"]
  6 -> 3 [label="HTTP: PUT"]
  6 -> 4 [label="HTTP: DELETE"]
  6 -> 5 [label="HTTP: *"]
  6 [label="/api/Values/{...}/"] 
  7 [label="/api/Values/ HTTP: GET"] 
  8 [label="/api/Values/ HTTP: POST"] 
  9 [label="/api/Values/ HTTP: *"] 
  10 -> 6 [label="/*"]
  10 -> 7 [label="HTTP: GET"]
  10 -> 8 [label="HTTP: POST"]
  10 -> 9 [label="HTTP: *"]
  10 [label="/api/Values/"] 
  11 -> 10 [label="/Values"]
  11 [label="/api/"] 
  12 -> 1 [label="/healthz"]
  12 -> 11 [label="/api"]
  12 [label="/"] 
}

表现为如下图表:

allbet开户:[译]使用DOT语言和GraphvizOnline来可视化你的ASP.NETCore3.0终结点01 第3张

在这个图中另有许多事情要做,由于我们现在有了可变的路由参数值(路由模板中的{id},在图中显示为{...})和HTTP动词约束(GET/PUT/POST等等)

当我第一次看到这个图表时,我很难明白它。每个节点都是终结点吗?固然不是,如/api/不应该发生响应。那这个呢?至于HTTP: *端点呢,它们会发生响应吗?

为了进一步领会,我查阅了可以天生这些图的ASP.NET Core中的代码,但它有点庞大,不幸的是,由于大量使用internal类。我将在稍后的文章中探讨这些代码。

为了更好地明白端点图,我们需要领会并非所有的节点都是相同的。在下一节中,我们将深入研究这个简朴图中的差别类型的节点,然后研究一个更好的图形示意(至少在我看来!)

领会差别类型的节点。

图中的每个节点都与给定的“深度”相关联。这是应该已经匹配的URL段数。例如,/api/Values/节点的深度为2-它要求空段//api段已经匹配。

当请求到达EndpointRoutingMiddleware(由UseRouting()添加)时,将传入的请求URL与此图举行对照。试图从树梢的根节点最先,通过图表找到一条路径。URL段与图中的边举行增量匹配,并在图中遍历一条路径,直到整个请求URL匹配为止。

每个节点(由在ASP.NET Core中的DfaNode中)有几个属性。我们现在感兴趣的属性是:

  • Matches*这是与该节点相关联的Endpoint(S)。若是通过路由匹配此节点,则这是将被选择用于执行的Endpoint
  • Literals这些是毗邻节点的边缘。若是DfaNodeLiterals,它具有可以进一步遍历以到达其他节点的文字段。例如,/api/节点包罗一个有/Values值的Literal,则指向/api/Values节点。
  • PolicyEdges这些边缘是基于URL以外的约束举行匹配的。例如,图中基于动词的边,如HTTP: GET,是计谋的边缘,指的是差别的DfaNode.
  • Parameters若是节点具有支持路由参数的边缘(例如,{id}), Parameters指向处置匹配参数的节点。这在图中是用/*边示意的。.

另有一个附加的属性,CatchAll,这在某些图形中是相关的,但我现在将忽略它,由于我们的API图并不需要它。

基于这些特征,我们可以通过使用DOT语言的其他特征,如形状、颜色、线型和箭头:

allbet开户:[译]使用DOT语言和GraphvizOnline来可视化你的ASP.NETCore3.0终结点01 第4张

上图中添加了以下内容:

  • 没有任何关联的节点Endpoint都以默认样式显示,即玄色气泡。
  • Matches的显示为填充的棕色盒子。这些节点具有Endpoint,这可以发生响应。对于上面的API示例,这适用于已选择谓词的节点以及健康检查端点。
  • 文字段边缘显示为默认的玄色边缘,带有一个填充箭头。
  • Parameters边缘(/*)以蓝色显示,使用菱形箭头。
  • PolicyEdges以红色显示,带有虚线和空三角形箭头。

现在,我认可我的设计技巧很烂,然则我以为您可以赞成这个图表显示的信息比默认的要多!--这是天生上面的图形的界说,请记着,您可以使用在线编辑来可视化和播放显示。

digraph DFA {
  1 [label="/healthz/" shape=box style=filled color="brown" fontcolor="white"]
  2 [label="/api/Values/{...}/ HTTP: GET" shape=box style=filled color="brown" fontcolor="white"]
  3 [label="/api/Values/{...}/ HTTP: PUT" shape=box style=filled color="brown" fontcolor="white"]
  4 [label="/api/Values/{...}/ HTTP: DELETE" shape=box style=filled color="brown"  fontcolor="white"]
  5 [label="/api/Values/{...}/ HTTP: *" shape=box style=filled color="brown" fontcolor="white"]
  6 -> 2 [label="HTTP: GET" color="red" style=dashed arrowhead=open]
  6 -> 3 [label="HTTP: PUT" color="red" style=dashed arrowhead=open]
  6 -> 4 [label="HTTP: DELETE" color="red" style=dashed arrowhead=open]
  6 -> 5 [label="HTTP: *" color="red" style=dashed arrowhead=open]
  6 [label="/api/Values/{...}/"]
  7 [label="/api/Values/ HTTP: GET" shape=box style=filled color="brown" fontcolor="white"]
  8 [label="/api/Values/ HTTP: POST" shape=box style=filled color="brown" fontcolor="white"]
  9 [label="/api/Values/ HTTP: *" shape=box style=filled color="brown" fontcolor="white"]
  10 -> 6 [label="/*" arrowhead=diamond color="blue"]
  10 -> 7 [label="HTTP: GET" color="red" style=dashed arrowhead=open]
  10 -> 8 [label="HTTP: POST" color="red" style=dashed arrowhead=open]
  10 -> 9 [label="HTTP: *" color="red" style=dashed arrowhead=open]
  10 [label="/api/Values/"]
  11 -> 10 [label="/Values"]
  11 [label="/api/"]
  12 -> 1 [label="/healthz"]
  12 -> 11 [label="/api"]
  12 [label="/"]
}

注重"HTTP: *"节点与端点关联,纵然您可能不期望它,由于它们返回405 Method Not Allowed.

在下一篇文章中,我将展示若何自动为自己的ASP.NET Core应用程序天生端点图。

总结

在这篇文章中,我先容了用于形貌图形的DOT语言,并展示了若何使用在线编辑从图表中建立图像。然后,我展示了若何将ASP.NETCore 3.x应用程序中的端点路由示意为有向图。我形貌了端点图中差别节点和边缘之间的差异,并调整了图形的显示以更好地示意这些差异。在后面的文章中,我将展示若作甚应用程序天生自己的端点图,若何自界说显示,以及若何做的不仅仅是查看图形。

,

联博统计接口

www.326681.com采用以太坊区块链高度哈希值作为统计数据,联博以太坊统计数据开源、公平、无任何作弊可能性。联博统计免费提供API接口,支持多语言接入。

欧博app下载声明:该文看法仅代表作者自己,与本平台无关。转载请注明:allbet开户:[译]使用DOT语言和GraphvizOnline来可视化你的ASP.NETCore3.0终结点01

网友评论

  • (*)

最新评论

站点信息

  • 文章总数:1453
  • 页面总数:0
  • 分类总数:8
  • 标签总数:2545
  • 评论总数:297
  • 浏览总数:33369