vue 根据swagger 生成接口_Miniprofiler在swagger、vue、angular中的使用

本篇分为以下几个部分：

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

t