本篇分为以下几个部分：

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);

}

}

View Code

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‘;

declarevarMiniProfiler: any;

@Injectable()

export class MiniProfilerInterceptor implements HttpInterceptor {

intercept(

req: HttpRequest,next: HttpHandler

): Observable>{returnnext.handle(req).pipe(

tap(evt=>{if (evt instanceofHttpResponse) {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);

});

}

}

View Code

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 { }

View Code

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

View Code

5、页面效果

在vue中显示Miniprofier

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

1、App.vue 主组件

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

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

import axios from‘axios‘;

@Component({

components: {

MiniProfiler,Dummy,},})

exportdefaultclass 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`;

}

font-family: ‘Avenir‘,Helvetica,Arial,sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

View Code

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

Click Me!

import axios from‘axios‘;

@Component

exportdefaultclass Dummy extends Vue {

private getProfiler() {

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

}

}

View Code

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

import axios from‘axios‘;

@Component

exportdefaultclass 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(functionsuccess(config) {

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

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

miniProfiler.fetchResults(miniProfilerIds);returnconfig;

},functionbug(error) {returnPromise.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);

}

}

View Code

4、界面效果

在swagger中显示Miniprofier

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

首先给swagger添加拦截器

拦截器代码如下：

usingMicrosoft.AspNetCore.Http;usingStackExchange.Profiling;usingSwashbuckle.AspNetCore.Swagger;usingSwashbuckle.AspNetCore.SwaggerGen;namespaceMiniprofilerApi.MiniProfierHelp

{public classInjectMiniProfiler : IDocumentFilter

{private readonlyIHttpContextAccessor _httpContext;publicInjectMiniProfiler(IHttpContextAccessor httpContext)

{

_httpContext=httpContext;

}public voidApply(SwaggerDocument swaggerDoc,DocumentFilterContext context)

{

swaggerDoc.Info.Contact= newContact()

{

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

};

}

}

}

View Code

此时运行项目，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(‘‘);

})();

View Code

配置swagger执行js：

3、界面效果如下：