本篇分为以下几个部分：

Swagger的简单应用

1、首先新建一个Api项目

2、使用Nuget添加Swashbuckle.AspNetCore，我使用的版本为1.1.0（版本不一样，后面的配置可能不一样）

3、为了在swagger上显示注释，右键项目MiniprofilerApi，属性=>生成=>输出为XML文档文件

4、右键项目=>编辑.csproj添加如下代码，避免一些警告：

4、在Startup类的ConfigureServices方法和Configure方法中配置如下：

5、添加接口注释：

6、修改项目运行端口，访问路径，关闭ssl，右键项目=>属性=>调试，配置如下：

7、启动项目，界面效果如下：

Miniprofier的后台配置

1、安装MiniProfiler.AspNetCore.Mvc

2、在Startup类的ConfigureServices方法和Configure方法中配置如下：

3、运行程序：访问http://localhost:5000/mini-profiler-resources/results

跨域配置：

在angular中显示Miniprofier

1、在页面创建Miniprofier需要的js和css

import { Component } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  private src: string = 'http://localhost:5000/mini-profiler-resources/';

  private scriptSrc: string = `${this.src}includes.min.js`;

  private cssSrc: string = `${this.src}includes.min.css`;

  private id: string = 'mini-profiler';

  private dataPath: string = `${this.src}`;

  private dataVersion: string = '';

  private dataPosition: string = 'right';

  private dataChildren: boolean = true;

  private dataMaxTraces: number = 35;

  private dataAuthorized: boolean = true;

  private dataStartHidden: string = 'false';

  private dataToggleShortcut: string = 'Alt+P';

  private dataTrivialMilliseconds: number = 35;

  private dataTrivial: boolean = true;

  private dataControls: boolean = true;

  private dataCurrentId: string = '';

  private dataIds: string = '';

  private scriptAsync: boolean = true;

  private innerHTML: string = '';

  constructor(private http: HttpClient){

  }

  ngAfterViewInit(): void {

    //添加Miniprofier的js

    this.appendDivElement();

    //添加Miniprofier的css

    this.appendCssLink();

  }

  //请求后台接口

  send(): void{

    let serverurl: string = "http://localhost:5000//api/Values";

    this.http.get(serverurl)

    .toPromise()

    .then(response => {

      console.log()

    }).catch(error => {

    });

  }

  private appendDivElement(): void {

    const body = document.body as HTMLDivElement;

    const script = document.createElement('script');

    script.innerHTML = this.innerHTML;

    script.src = this.scriptSrc;

    script.setAttribute('data-version', this.dataVersion);

    script.setAttribute('data-path', this.dataPath);

    script.setAttribute('data-position', this.dataPosition);

    script.setAttribute('id', this.id);

    script.setAttribute('data-current-id', this.dataCurrentId);

    script.setAttribute('data-ids', this.dataIds);

    script.setAttribute('data-trivial', this.dataTrivial.toString());

    script.setAttribute('data-children', this.dataChildren.toString());

    script.setAttribute('data-max-traces', this.dataMaxTraces.toString());

    script.setAttribute('data-controls', this.dataControls.toString());

    script.setAttribute('data-authorized', this.dataAuthorized.toString());

    script.setAttribute('data-start-hidden', this.dataStartHidden.toString());

    script.setAttribute('data-toggle-shortcut', this.dataToggleShortcut);

    script.setAttribute('data-trivial-milliseconds', this.dataTrivialMilliseconds.toString());

    script.async = this.scriptAsync;

    body.appendChild(script);

  }

  private appendCssLink(): void {

      const body = document.body as HTMLDivElement;

      const css = document.createElement('link');

      css.href = this.cssSrc;

      css.rel = 'stylesheet';

      body.appendChild(css);

  }

}

2、添加Http拦截器，动态显示监听结果

import { Injectable } from '@angular/core';

import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse, HttpHeaders }

  from '@angular/common/http';

import { Observable } from 'rxjs';

import { tap } from 'rxjs/operators';

declare var MiniProfiler: any;

@Injectable()

export class MiniProfilerInterceptor implements HttpInterceptor {

  intercept(

    req: HttpRequest<any>,

    next: HttpHandler

  ): Observable<HttpEvent<any>> {

    return next.handle(req).pipe(

        tap(evt => {

            if (evt instanceof HttpResponse) {

              if (evt && evt.headers) {

                this.makeMiniProfilerRequests(evt.headers);

              }

            }

          })

    )

  }

  private makeMiniProfilerRequests(headers: HttpHeaders) {

    const miniProfilerHeaders = headers.getAll('x-miniprofiler-ids');

    if (!miniProfilerHeaders) {

      return;

    }

    miniProfilerHeaders.forEach(miniProfilerIdHeaderValue => {

      const ids = JSON.parse(miniProfilerIdHeaderValue) as string[];

      MiniProfiler.fetchResults(ids);

    });

  }

}

3、在app.module.ts中的配置

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { MiniProfilerInterceptor } from './mini-profiler-http';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    HttpClientModule

  ],

  providers: [{

    provide: HTTP_INTERCEPTORS,

    useClass: MiniProfilerInterceptor, multi: true

  }],

  bootstrap: [AppComponent]

})

export class AppModule { }

4、在app.component.html页面添加一个请求按钮

<div style="text-align:center;margin:100px auto">

  <button (click)="send()">click</button>

</div>

5、页面效果

在vue中显示Miniprofier

和在angular中的操作步骤一致，下面放主要代码：

1、App.vue 主组件

<template>

  <div id="app">

    <MiniProfiler

      :scriptSrc="scriptSrc"

      :dataPath="src"

      :cssSrc="cssSrc"/>

      <Dummy />

  </div>

</template>

<script lang="ts">

import { Component, Vue } from 'vue-property-decorator';

import MiniProfiler from './components/MiniProfiler.vue';

import Dummy from './components/Dummy.vue';

import axios from 'axios';

@Component({

  components: {

    MiniProfiler,

    Dummy,

  },

})

export default class App extends Vue {

  private src: string = 'http://localhost:5000/mini-profiler-resources/';

  private scriptSrc: string = `${this.src}includes.min.js`;

  private cssSrc: string = `${this.src}includes.min.css`;

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

2、Dummy.vue 子组件用于发送接口请求

<template>

    <button type="button" @click="getProfiler">Click Me!</button>

</template>

<script lang="ts">

import { Component, Vue } from 'vue-property-decorator';

import axios from 'axios';

@Component

export default class Dummy extends Vue {

    private getProfiler() {

        axios.get('http://localhost:5000/api/values');

    }

}

</script>

3、MiniProfiler.vue 子组件用于添加拦截器和创建Miniprofier需要的js和css

<template>

</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator';

import axios from 'axios';

@Component

export default class MiniProfiler extends Vue {

    @Prop({ default: 'mini-profiler' }) private id!: string;

    @Prop() private scriptSrc!: string;

    @Prop() private cssSrc!: string;

    @Prop() private dataPath!: string;

    @Prop({ default: '' }) private dataVersion!: string;

    @Prop({ default: 'right' }) private dataPosition!: string;

    @Prop({ default: true }) private dataChildren!: boolean;

    @Prop({ default: 35 }) private dataMaxTraces!: number;

    @Prop({ default: true }) private dataAuthorized!: boolean;

    @Prop({ default: false }) private dataStartHidden!: string;

    @Prop({ default: 'Alt+P' }) private dataToggleShortcut!: string;

    @Prop({ default: 35 }) private dataTrivialMilliseconds!: number;

    @Prop({ default: true }) private dataTrivial!: boolean;

    @Prop({ default: true }) private dataControls!: boolean;

    @Prop({ default: '' }) private dataCurrentId!: string;

    @Prop({ default: '' }) private dataIds!: string;

    @Prop({ default: true }) private scriptAsync!: boolean;

    @Prop({ default: '' }) private innerHTML!: string;

    private created(): void {

        this.axiosSetUp();

        this.appendDivElement();

        this.appendCssLink();

    }

    private axiosSetUp(): void {

        const key: string = 'MiniProfiler';

        axios.interceptors.response.use(function success(config) {

            const miniProfiler: any = (window as any)[key];

            const miniProfilerIds = JSON.parse(config.headers['x-miniprofiler-ids']) as string[];

            miniProfiler.fetchResults(miniProfilerIds);

            return config;

        }, function bug(error) {

            return Promise.reject(error);

        });

    }

    private appendDivElement(): void {

        const body = document.body as HTMLDivElement;

        const script = document.createElement('script');

        script.innerHTML = this.innerHTML;

        script.src = this.scriptSrc;

        script.setAttribute('data-version', this.dataVersion);

        script.setAttribute('data-path', this.dataPath);

        script.setAttribute('data-position', this.dataPosition);

        script.setAttribute('id', this.id);

        script.setAttribute('data-current-id', this.dataCurrentId);

        script.setAttribute('data-ids', this.dataIds);

        script.setAttribute('data-trivial', this.dataTrivial.toString());

        script.setAttribute('data-children', this.dataChildren.toString());

        script.setAttribute('data-max-traces', this.dataMaxTraces.toString());

        script.setAttribute('data-controls', this.dataControls.toString());

        script.setAttribute('data-authorized', this.dataAuthorized.toString());

        script.setAttribute('data-start-hidden', this.dataStartHidden.toString());

        script.setAttribute('data-toggle-shortcut', this.dataToggleShortcut);

        script.setAttribute('data-trivial-milliseconds', this.dataTrivialMilliseconds.toString());

        script.async = this.scriptAsync;

        body.appendChild(script);

    }

    private appendCssLink(): void {

        const body = document.body as HTMLDivElement;

        const css = document.createElement('link');

        css.href = this.cssSrc;

        css.rel = 'stylesheet';

        body.appendChild(css);

    }

}

</script>

4、界面效果

在swagger中显示Miniprofier

1、将性能分析监测信息从后端发送到Swagger界面。

首先给swagger添加拦截器

拦截器代码如下：

using Microsoft.AspNetCore.Http;

using StackExchange.Profiling;

using Swashbuckle.AspNetCore.Swagger;

using Swashbuckle.AspNetCore.SwaggerGen;

namespace MiniprofilerApi.MiniProfierHelp

{

    public class InjectMiniProfiler : IDocumentFilter

    {

        private readonly IHttpContextAccessor _httpContext;

        public InjectMiniProfiler(IHttpContextAccessor httpContext)

        {

            _httpContext = httpContext;

        }

        public void Apply(SwaggerDocument swaggerDoc, DocumentFilterContext context)

        {

            swaggerDoc.Info.Contact = new Contact()

            {

                Name = MiniProfiler.Current.RenderIncludes(_httpContext.HttpContext).ToString()

            };

        }

    }

}

此时运行项目，swagger界面显示如下：

2、通过js解析MIniprofier的脚本，代码如下：

(function () {

    window.angular=true;

    //Create a mini profiler script tag with the right properites

    var MiniProfiler = $('#api_info > div:nth-child(3)').text();

    const attributes = [

        'src', 'data-version', 'data-path', 'data-current-id', 'data-ids',

        'data-position', 'data-trivial-milliseconds', 'data-max-traces',

        'data-authorized', 'data-toggle-shortcut', 'data-ignored-duplicate-execute-types'

    ];

    var GetAttr = function (input, attributeName) {

        const myRegexp = attributeName + '="(.*?)"';

        const re = new RegExp(myRegexp, "g");

        const match = re.exec(input);

        return match[1];

    }

    var s = document.createElement("script");

    s.type = "text/javascript";

    s.id = "mini-profiler";

    s.async = true; 

    for (var i = 0; i < attributes.length; i++) {

        var element = attributes[i];

        s.setAttribute(element, GetAttr(MiniProfiler, element));

    }

    document.body.appendChild(s);

    // Remove injected tag from view

    $('#api_info > div:nth-child(3)').text('');

})();

配置swagger执行js：

3、界面效果如下：

全部源代码见：https://github.com/zrkcode/Miniprofiler.git

监听EF执行的Sql语句或更多NetCore+Miniprofiler相关配置见：https://miniprofiler.com/dotnet/AspDotNetCore

Miniprofiler在swagger、vue、angular中的使用的更多相关文章

angular.js和vue.js中实现函数去抖（debounce）
问题描述搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...
Vue.js中Directive知识
近期所学的Vue.js这个MVVM前端技术缓解了我一直愁于前后端开发杂糅所带来的痛苦.今天就来说说关于Vue.js里面的Directive知识. Directive Directive看上去虽然和An ...
Angular中的数据绑定
(1)HTML绑定:{{}} (2)属性绑定:[] 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量) 必须用引号括起来,如<img [src]="'../../assets ...
.net core WebAPI性能监控-MiniProfiler与Swagger集成
------------恢复内容开始------------ 安装Nuget Install-Package MiniProfiler.AspNetCore.Mvc Install-Package M ...
Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容
问题: 在使用 vscode 以及 eslint 来检测基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过下载 ...
angular 中父元素ng-repeat后子元素ng-click失效
在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...
angular中的compile和link函数
angular中的compile和link函数前言这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
Deferred在jQuery和Angular中的使用与简单实现
Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...

随机推荐

Time range (447392) for take 'Take 001' is larger than maximum allowed(100000).
http://www.cnblogs.com/lopezycj/archive/2012/05/16/unity3d_tuchao.html https://forum.unity3d.com/thr ...
Django的cookie学习
为什么要有cookie,因为http是无状态的,每次请求都是独立的,但是我们还需要保持状态,所以就有了cookie cookie就是保存在客户端浏览器上的键值对,别人可以利用他来做登陆 rep = r ...
SQL SERVER 和ACCESS、EXCEL的数据导入导出
SQL SERVER 与ACCESS.EXCEL之间的数据转换SQL SERVER 和ACCESS的数据导入导出[日期:2007-05-06] 来源:Linux公社作者:Linux 熟悉 ...
runloop - CFRunLoopObserverRef
1.
创建HTML元素的方法
第一种:使用 parent.appendchild()方法 HTML页面 <div id="div1"></div> JS文件 //第一步创建标签元素节点 ...
12-matlab简单读excel
数据读入: clc; clear; AllNeedDate = xlsread('E:\a-建模\2018-5月校赛\2018年数学建模校内挑战赛题目\挑战赛A题\附件2:各城镇月度需求数据.xlsx ...
struts框架问题五之向值栈中保存数据
5. 问题五: 向值栈保存数据 (主要针对root栈) > valueStack.push(Object obj); * push方法的底层调用root对象的push方法(把元素添加到0位置) ...
C#控制台自定义背景颜色，字体颜色大全
效果: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...
证书吊销列表(CRL)介绍
一.证书吊销列表(CRL) 证书吊销列表 (Certificate Revocation List ,简称: CRL) 是 PKI 系统中的一个结构化数据文件,该文件包含了证书颁发机构 (CA) 已经 ...
全基因组测序从头测序(de novo sequencing) 重测序(re-sequencing)
全基因组测序全基因组测序分为从头测序(de novo sequencing)和重测序(re-sequencing). 从头测序(de novo)不需要任何参考基因组信息即可对某个物种的基因组进行测序 ...

Miniprofiler在swagger、vue、angular中的使用