Skip to content

NSwag

Jump to bottom
L edited this page Apr 16, 2019 · 22 revisions

Nswag的作用

NSwag是一个Swagger / OpenAPI 2.0和3.0工具链，用于.NET，.NET Core，Web API，ASP.NET Core，TypeScript（jQuery，AngularJS，Angular 2 +，Aurelia，KnockoutJS等）等诸多平台。 NSwag项目提供了以下工具：
1.支持从现有ASP.NET Web API控制器生成Swagger规范(Swagger规范使用JSON和JSON Schema来描述RESTful Web API。)
2.支持从Swagger规范生成api客户端消费代码
该项目将Swashbuckle（Swagger生成）和AutoRest（客户端生成）的功能集成在一个工具链中。 这样可以避免许多不兼容的问题。

4种代码生成方法

Nswag提供4种代码生成方法
1、使用 NSwagStudio，这是一款 Windows 桌面应用，用于在 C# 和 TypeScript 中为 API 生成客户端代码。
2、使用 NSwag.CodeGeneration.CSharp 或 NSwag.CodeGeneration.TypeScript NuGet 包在项目中执行代码生成。
3、使用命令行中的 NSwag。
4、使用 NSwag.MSBuild NuGet 包。

这里仅讨论通过NSwagStudio，将swagger.json生成ts的接口，提供给前端使用
并建立批处理文件，每次接口有更改的时候运行一次即可
更多内容访问 NSwag 和 NSwag 和 ASP.NET Core 入门

下载并使用NSwagStudio

下载NSwagStudio
NSwagStudio是独立软件，在菜单栏找到并打开
如图所示，设置好swagger.json的网址，生成哪几种代码以及其他相关内容
3
注意根据自己的环境，设置好以下内容
1
Settings的最后一栏为输出目录Output
运行Generrate Outputs预览，运行Generrate Files生成文件
File-Save，保存该配置文件为service.config.nswag

建立前端更新

这里参考了52abp项目的代码
1.在service.config.nswag中设置了extensionCode

"extensionCode": "service.extensions.ts"

所以创建service.extensions.ts文件，写如下代码

import 'rxjs/add/operator/finally';

service.extensions.ts相当于添加自定义引用
如果不设置service.extensions.ts，则需要删除extensionCode这行，否则会在生成的文件末尾有一个service.extensions.ts的文件路径，提示没有找到该文件
2.再写一个refresh.bat用于执行命令刷新接口，功能是找到node_modules下的nswag，执行

"..\node_modules\.bin\nswag" run

所以前端需要安装nswag(install相关内容)

npm install nswag --save-dev

3.将其放在前端代码根目录的/nswag中
则共有三个文件

refresh.bat
service.config.nswag
service.extensions.ts

4.执行refresh.bat后，根据Output的路径，生成对应ts文件service-proxies.ts
1
2
之后就是angular+ts的问题了，为service-proxies.ts的服务写module注入service-proxy.module.ts

设置API_BASE_URL

生成的service-proxies.ts文件中，有一个API_BASE_URL变量，即请求基地址，需要进行设置，在Module的providers中设置

import { API_BASE_URL } from '../../shared/service-proxies/service-proxies';

export function getApiBaseUrl(): string {
  return 'your api base url';
}

@NgModule({
  providers:[
    { provide: API_BASE_URL, useFactory: getApiBaseUrl },
  ]
})

参考资料:
Angular 2 Provider
FactoryProvider

使用前端更新

1.启动swagger服务
2.配置service.config.nswag 可以通过NSwagStudio或者文本文档配置

"swaggerGenerator": {
    "fromSwagger": {
        //这里
        "url": "https://localhost:44399/swagger/v1/swagger.json",
        "output": null
    }
},

3.启动bat文件refresh.bat
4.查看前端源代码，已经生成ServiceProxy
1
5.在service-proxy.module.ts中添加新的服务
2
6.在Component中注入、使用

import { Component, OnInit } from '@angular/core';
import { AppComponentBase } from '@shared/component-base';
import { Injector } from '@angular/core';
import { XXXServiceProxy } from '@shared/service-proxies/service-proxies';

@Component({
  selector: 'app-personal-center',
  templateUrl: './XXX.component.html',
  styles: []
})

// AppComponentBase本地化
export class XXXComponent extends AppComponentBase implements OnInit {
  public settingsData: any = {};

  constructor(
    injector: Injector,
    private _XXXServiceProxy: XXXServiceProxy
  ) {
      super(injector);
  }

  ngOnInit() {
   this.settingsData = this._XXXServiceProxy.getXXX();
  }

}

ng-alain框架前端请求401的问题

报错内容

401 from simple interceptor

原因是ng-alain拦截器，原来默认的SimpleInterceptor与swagger不符，可以替代为abpHttpInterceptor
或者简单一点，注释掉SimpleInterceptor，只使用DefaultInterceptor
2. ng-alain 入门
angular HTTP拦截器 HttpInterceptor
abp-ng2-module

示例代码

示例代码1-NSwag
示例代码2-使用ServiceProxy

参考资料

NSwag Tutorial: Generate an Angular TypeScript client from an existing ASP.NET Web API web assembly
SwaggerToTypeScriptClientGenerator
SwaggerToTypeScriptClientGenerator Angular
Building Single Page Applications on ASP.NET Core 2.1 with Angular 6 – Part 3: Implementing Open API
.NetCore2.1 WebAPI 根据swagger.json自动生成客户端代码
NSwagStudio
Infrastructure Angular NSwag
SwaggerToTypeScriptClientCommand

Clone this wiki locally