MiniProfiler：如何配置AngularJS WebAPI应用程序？

交叉发布 on the MiniProfiler community.

我正在尝试将MiniProfiler放入我当前的堆栈中.我认为我主要是设置,但我错过了UI方法,并希望得到关于最佳方法的建议.

当前堆栈

> sql for DB(包括MiniProfiler表)
> EF 6
> WebAPI 2 API应用程序
> Angular 1.x.用户界面的应用程序(单独的应用程序,没有MVC支持它) – 我认为此时它是1.5.x.

因此,我无法使用RenderIncludes()的当前方法.

包含JS文件并将其设置为从sql Server存储中检索信息的最佳方法是什么？我知道文件包含在in the UI repo中,但我没有看到显式配置的文档.

我到目前为止所尝试的内容 – Web API应用程序

>安装了MiniProfiler和MiniProfiler.EF6包.

Web.Config – 添加了Handler

(不确定是否有必要)：

<add name="MiniProfiler" path="mini-profiler-resources/*" verb="*" type="System.Web.Routing.UrlRoutingModule" resourceType="Unspecified" preCondition="integratedMode" />

添加了CORS过滤器以将MiniProfiler ID公开给我的客户端应用程序：

public class AddMiniProfilerCORSHeaderFilter : ActionFilterattribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        actionExecutedContext.Response.Headers.Add("Access-Control-Expose-Headers","X-MiniProfiler-Ids");
    }
}

添加该过滤器作为启动的一部分：

config.Filters.Add(new AddMiniProfilerCORSHeaderFilter());`

在Global.asax中,添加到Application_Start()：

var connectionString = ConfigurationReader.GetConnectionString(Constants.ConfigSettings.CONNECTION_STRING_NAME);

MiniProfiler.Settings.Storage = new sqlServerStorage(connectionString);
MiniProfilerEF6.Initialize();

更新开始/结束请求：

protected void Application_BeginRequest()
    {
        if (Request.IsLocal || ConfigurationReader.GetAppSetting(Constants.ConfigSettings.USE_PROFILER,false))
        {
            var sessionId = Guid.NewGuid().ToString();
            MiniProfiler.Start(sessionId);
        }
    }

    protected void Application_EndRequest()
    {
        MiniProfiler.Stop();
    }

到目前为止我尝试过的 – 客户端(Angular)App

>从the Github Repo抓取UI文件
>将UI目录复制到项目的输出中

参考CSS：

<link rel="stylesheet" href="js/lib/miniprofiler/includes.css" />

调用JavaScript

<script async type="text/javascript" 
    id="mini-profiler" 
    src="js/lib/miniprofiler/includes.js?v=1.0.0.0" 
    data-current-id="" 
    data-path="https://localhost:44378/api/profiler/" 
    data-children="true" 
    data-ids="" 
    data-version="1.0.0.0" 
    data-controls="true" 
    data-start-hidden="false" 
    data-trivial-milliseconds="5">
  </script>

当前状态

当我做这些事情时,看起来它找不到合适的WebAPI控制器来呈现结果.如果我能弄清楚控制器的位置或复制它(正如我现在试图做的那样),我想我会做生意.

解决方法

RenderIncludes函数导致< script>标签输出到页面.它在UI Repo中定义为 include.partial.html,目前看起来像这样：

<script async type="text/javascript" id="mini-profiler" 
        src="{path}includes.js?v={version}" data-version="{version}" 
        data-path="{path}" data-current-id="{currentId}" 
        data-ids="{ids}" data-position="{position}" 
        data-trivial="{showTrivial}" data-children="{showChildren}" 
        data-max-traces="{maxTracesToShow}" data-controls="{showControls}"
        data-authorized="{authorized}" data-toggle-shortcut="{toggleShortcut}" 
        data-start-hidden="{startHidden}" data-trivial-milliseconds="{trivialMilliseconds}">
</script>

这是运行渲染的Javascript.

RenderIncludes函数 is defined here.它执行以下操作：

>确保您已设置存储空间
>检查当前请求是否有权查看结果
>获取当前用户的未查看配置文件的ID
>将Ids与您传递给函数的任何其他参数一起使用,并将它们插入include.partial.html中定义的脚本中的占位符
>输出此< script>

因此,如果你不能调用RenderIncludes,那么就没有理由不能将脚本文件放在适当的位置,检索未查看的ID,但是它们以及你想要的任何其他设置值进入< script>标记,并输出标记.

用于检索Id值的关键代码行是：

var ids = authorized 
            ? MiniProfiler.Settings.Storage.GetUnviewedIds(profiler.User) 
            : new List<Guid>();
ids.Add(profiler.Id);

其中profiler是MiniProfiler的当前实例(在当前请求上运行).

您可能还需要确保可以处理脚本将对/ mini-profiler-resources / results进行的调用(将profiler的id作为参数传递).这个is located here的内容在GetSingleProfilerResult(HttpContext context)函数中

MiniProfiler：如何配置AngularJS WebAPI应用程序？

解决方法

相关推荐