Miniprofiler在swagger、vue、angular中的使用

時間 2019-11-13

標籤 miniprofiler swagger vue angular 使用欄目 AngularJS 简体版

原文原文鏈接

本篇分爲如下幾個部分：javascript

Swagger的簡單應用

一、首先新建一個Api項目css

二、使用Nuget添加Swashbuckle.AspNetCore，我使用的版本爲1.1.0（版本不同，後面的配置可能不同）

三、爲了在swagger上顯示註釋，右鍵項目MiniprofilerApi，屬性=>生成=>輸出爲XML文檔文件

四、右鍵項目=>編輯.csproj添加以下代碼，避免一些警告：

四、在Startup類的ConfigureServices方法和Configure方法中配置以下：html

五、添加接口註釋：vue

六、修改項目運行端口，訪問路徑，關閉ssl，右鍵項目=>屬性=>調試，配置以下：java

七、啓動項目，界面效果以下：ios

Miniprofier的後臺配置

一、安裝MiniProfiler.AspNetCore.Mvcgit

二、在Startup類的ConfigureServices方法和Configure方法中配置以下：github

三、運行程序：訪問http://localhost:5000/mini-profiler-resources/resultsweb

跨域配置：

在angular中顯示Miniprofier

一、在頁面建立Miniprofier須要的js和cssbootstrap

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

二、添加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);
    });

  }
}

View Code

三、在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

四、在app.component.html頁面添加一個請求按鈕

<div style="text-align:center;margin:100px auto">
  <button (click)="send()">click</button>
</div>

View Code

五、頁面效果

在vue中顯示Miniprofier

和在angular中的操做步驟一致，下面放主要代碼：

一、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>

View Code

二、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>

View Code

三、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>

View Code

四、界面效果

在swagger中顯示Miniprofier

一、將性能分析監測信息從後端發送到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()
            };
        }
    }
}

View Code

此時運行項目，swagger界面顯示以下：

二、經過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('');
})();