标签：orm mob rate 处理 post 提高 col jsonp current
本文介绍“ 为ASP.NET Web API生成TypeScript客户端API ”，重点介绍Angular 2+代码示例和各自的SDLC。如果您正在开发.NET Core Web API后端，则可能需要阅读为ASP.NET Core Web API生成C＃Client API。
自WebApiClientGenAngular 2仍然在RC2时，自2016年6月v1.9.0-beta 以来，对Angular2的支持已经可用。并且在WebApiClientGenv2.0中提供了对Angular 2产品发布的支持。希望NG2的发展不会如此频繁地破坏我的CodeGen和我的Web前端应用程序。:)
在2016年9月底发布Angular 2的第一个产品发布几周后，我碰巧启动了一个使用Angular2的主要Web应用程序项目，因此我WebApiClientGen对NG2应用程序开发的使用方法几乎相同。
并且可选地，如果您或您的团队支持基于Trunk的开发，那么更好，因为使用的设计WebApiClientGen和工作流程WebApiClientGen假设基于Trunk的开发，这比其他分支策略（如Feature Branching和GitFlow等）更有效。对于熟练掌握TDD的团队。
为了跟进这种开发客户端程序的新方法，最好有一个ASP.NET Web API项目。您可以使用现有项目，也可以创建演示项目。
本文重点介绍Angular 2+的代码示例。假设您有一个ASP.NET Web API项目和一个Angular2项目作为VS解决方案中的兄弟项目。如果你将它们分开，那么为了使开发步骤无缝地编写脚本应该不难。
我认为您已阅读“ 为ASP.NET Web API生成TypeScript客户端API ”。为jQuery生成客户端API的步骤几乎与为Angular 2生成客户端API的步骤相同。演示TypeScript代码基于TUTORIAL：TOUR OF HEROES，许多人从中学习了Angular2。因此，您将能够看到如何WebApiClientGen适应并改进Angular2应用程序的典型开发周期。
这是Web API代码：
using System; using System.Collections.Generic; using System.Linq; using System.Web.Http; using System.Runtime.Serialization; using System.Collections.Concurrent; namespace DemoWebApi.Controllers { [RoutePrefix("api/Heroes")] public class HeroesController : ApiController { public Hero[] Get() { return HeroesData.Instance.Dic.Values.ToArray(); } public Hero Get(long id) { Hero r; HeroesData.Instance.Dic.TryGetValue(id, out r); return r; } public void Delete(long id) { Hero r; HeroesData.Instance.Dic.TryRemove(id, out r); } public Hero Post(string name) { var max = HeroesData.Instance.Dic.Keys.Max(); var hero = new Hero { Id = max + 1, Name = name }; HeroesData.Instance.Dic.TryAdd(max + 1, hero); return hero; } public Hero Put(Hero hero) { HeroesData.Instance.Dic[hero.Id] = hero; return hero; } [HttpGet] public Hero[] Search(string name) { return HeroesData.Instance.Dic.Values.Where(d => d.Name.Contains(name)).ToArray(); } } [DataContract(Namespace = DemoWebApi.DemoData.Constants.DataNamespace)] public class Hero { [DataMember] public long Id { get; set; } [DataMember] public string Name { get; set; } } public sealed class HeroesData { private static readonly Lazy<HeroesData> lazy = new Lazy<HeroesData>(() => new HeroesData()); public static HeroesData Instance { get { return lazy.Value; } } private HeroesData() { Dic = new ConcurrentDictionary<long, Hero>(new KeyValuePair<long, Hero>[] { new KeyValuePair<long, Hero>(11, new Hero {Id=11, Name="Mr. Nice" }), new KeyValuePair<long, Hero>(12, new Hero {Id=12, Name="Narco" }), new KeyValuePair<long, Hero>(13, new Hero {Id=13, Name="Bombasto" }), new KeyValuePair<long, Hero>(14, new Hero {Id=14, Name="Celeritas" }), new KeyValuePair<long, Hero>(15, new Hero {Id=15, Name="Magneta" }), new KeyValuePair<long, Hero>(16, new Hero {Id=16, Name="RubberMan" }), new KeyValuePair<long, Hero>(17, new Hero {Id=17, Name="Dynama" }), new KeyValuePair<long, Hero>(18, new Hero {Id=18, Name="Dr IQ" }), new KeyValuePair<long, Hero>(19, new Hero {Id=19, Name="Magma" }), new KeyValuePair<long, Hero>(20, new Hero {Id=29, Name="Tornado" }), }); } public ConcurrentDictionary<long, Hero> Dic { get; private set; } } }
安装还将安装依赖的NuGet包Fonlow.TypeScriptCodeDOM和Fonlow.Poco2Ts项目引用。
此外，用于触发CodeGen的CodeGenController.cs被添加到Web API项目的Controllers文件夹中。
将CodeGenController只在调试版本开发过程中应该是可用的，因为客户端API应该用于Web API的每个版本生成一次。
如果您正在使用@ angular / http中定义的Angular2的Http服务，那么您应该使用WebApiClientGenv2.2.5。如果您使用的HttpClient是@ angular / common / http中定义的Angular 4.3中可用的服务，并且在Angular 5中已弃用，那么您应该使用WebApiClientGenv2.3.0。
下面的JSON配置数据是POSTCodeGen Web API：
{ "ApiSelections": { "ExcludedControllerNames": [ "DemoWebApi.Controllers.Account" ], "DataModelAssemblyNames": [ "DemoWebApi.DemoData", "DemoWebApi" ], "CherryPickingMethods": 1 }, "ClientApiOutputs": { "ClientLibraryProjectFolderName": "DemoWebApi.ClientApi", "GenerateBothAsyncAndSync": true, "CamelCase": true, "TypeScriptNG2Folder": "..\\DemoAngular2\\clientapi", "NGVersion" : 5 } }
Angular 6正在使用RxJS v6，它引入了一些重大变化，特别是对于导入Observable。默认情况下，WebApiClientGen2.4和更高版本默认将导入声明为import { Observable } from ‘rxjs‘; 。如果您仍在使用Angular 5.x，则需要"NGVersion" : 5在JSON配置中声明，因此生成的代码中的导入将是更多详细信息，import { Observable } from ‘rxjs/Observable‘; . 请参阅RxJS v5.x至v6更新指南和RxJS：版本6的TSLint规则。
您应确保“ TypeScriptNG2Folder”存在的文件夹存在，因为WebApiClientGen不会为您创建此文件夹，这是设计使然。
建议到JSON配置数据保存到与文件类似的这一个位于Web API项目文件夹。
如果您在Web API项目中定义了所有POCO类，则应将Web API项目的程序集名称放在“ DataModelAssemblyNames” 数组中。如果您有一些专用的数据模型程序集可以很好地分离关注点，那么您应该将相应的程序集名称放入数组中。您可以选择为jQuery或NG2或C＃客户端API代码生成TypeScript客户端API代码，或者全部三种。
“ TypeScriptNG2Folder”是Angular2项目的绝对路径或相对路径。例如，“ .. \\ DemoAngular2 \\ ClientApi ”表示DemoAngular2作为Web API项目的兄弟项目创建的Angular 2项目“ ”。
在CodeGen根据“从POCO类生成强类型打字稿接口CherryPickingMethods，其在下面的文档注释描述”：
/// <summary> /// Flagged options for cherry picking in various development processes. /// </summary> [Flags] public enum CherryPickingMethods { /// <summary> /// Include all public classes, properties and properties. /// </summary> All = 0, /// <summary> /// Include all public classes decorated by DataContractAttribute, /// and public properties or fields decorated by DataMemberAttribute. /// And use DataMemberAttribute.IsRequired /// </summary> DataContract =1, /// <summary> /// Include all public classes decorated by JsonObjectAttribute, /// and public properties or fields decorated by JsonPropertyAttribute. /// And use JsonPropertyAttribute.Required /// </summary> NewtonsoftJson = 2, /// <summary> /// Include all public classes decorated by SerializableAttribute, /// and all public properties or fields /// but excluding those decorated by NonSerializedAttribute. /// And use System.ComponentModel.DataAnnotations.RequiredAttribute. /// </summary> Serializable = 4, /// <summary> /// Include all public classes, properties and properties. /// And use System.ComponentModel.DataAnnotations.RequiredAttribute. /// </summary> AspNet = 8, }
默认选项是DataContract选择加入。您可以使用任何方法或组合方法。
在IIS Express上的IDE中运行Web项目。
然后使用Curl或Poster或任何您喜欢的客户端工具POST到http：// localhost：10965 / api / CodeGen，with content-type=application/json。
基本上，每当Web API更新时，您只需要步骤2来生成客户端API，因为您不需要每次都安装NuGet包或创建新的JSON配置数据。
编写一些批处理脚本来启动Web API和POST JSON配置数据应该不难。为了您的方便，我实际起草了一个：Powershell脚本文件CreateClientApi.ps1，它在IIS Express上启动Web（API）项目，然后发布JSON配置文件以触发代码生成。
基本上，您可以制作Web API代码，包括API控制器和数据模型，然后执行CreateClientApi.ps1。而已！WebApiClientGen和CreateClientApi.ps1将为您完成剩下的工作。
现在您在TypeScript中生成了客户端API，类似于以下示例：
import { Injectable, Inject } from ‘@angular/core‘;
import { Http, Headers, Response } from ‘@angular/http‘;
import { Observable } from ‘rxjs/Observable‘;
export namespace DemoWebApi_DemoData_Client {
export enum AddressType {Postal, Residential}
export enum Days {Sat=1, Sun=2, Mon=3, Tue=4, Wed=5, Thu=6, Fri=7}
export interface PhoneNumber {
fullNumber?: string;
phoneType?: DemoWebApi_DemoData_Client.PhoneType;
}
export enum PhoneType {Tel, Mobile, Skype, Fax}
export interface Address {
id?: string;
street1?: string;
street2?: string;
city?: string;
state?: string;
postalCode?: string;
country?: string;
type?: DemoWebApi_DemoData_Client.AddressType;
location?: DemoWebApi_DemoData_Another_Client.MyPoint;
}
export interface Entity {
id?: string;
name: string;
addresses?: Array<DemoWebApi_DemoData_Client.Address>;
phoneNumbers?: Array<DemoWebApi_DemoData_Client.PhoneNumber>;
}
export interface Person extends DemoWebApi_DemoData_Client.Entity {
surname?: string;
givenName?: string;
dob?: Date;
}
export interface Company extends DemoWebApi_DemoData_Client.Entity {
businessNumber?: string;
businessNumberType?: string;
textMatrix?: Array<Array<string>>;
int2DJagged?: Array<Array<number>>;
int2D?: number[][];
lines?: Array<string>;
}
export interface MyPeopleDic {
dic?: {[id: string]: DemoWebApi_DemoData_Client.Person };
anotherDic?: {[id: string]: string };
intDic?: {[id: number]: string };
}
}
export namespace DemoWebApi_DemoData_Another_Client {
export interface MyPoint {
x: number;
y: number;
}
}
export namespace DemoWebApi_Controllers_Client {
export interface FileResult {
fileNames?: Array<string>;
submitter?: string;
}
export interface Hero {
id?: number;
name?: string;
}
}
@Injectable()
export class Heroes {
constructor(@Inject(‘baseUri‘) private baseUri: string = location.protocol + ‘//‘ +
location.hostname + (location.port ? ‘:‘ + location.port : ‘‘) + ‘/‘, private http: Http){
}
/**
* Get all heroes.
* GET api/Heroes
* @return {Array<DemoWebApi_Controllers_Client.Hero>}
*/
get(): Observable<Array<DemoWebApi_Controllers_Client.Hero>>{
return this.http.get(this.baseUri + ‘api/Heroes‘).map(response=> response.json());
}
/**
* Get a hero.
* GET api/Heroes/{id}
* @param {number} id
* @return {DemoWebApi_Controllers_Client.Hero}
*/
getById(id: number): Observable<DemoWebApi_Controllers_Client.Hero>{
return this.http.get(this.baseUri + ‘api/Heroes/‘+id).map(response=> response.json());
}
/**
* DELETE api/Heroes/{id}
* @param {number} id
* @return {void}
*/
delete(id: number): Observable<Response>{
return this.http.delete(this.baseUri + ‘api/Heroes/‘+id);
}
/**
* Add a hero
* POST api/Heroes?name={name}
* @param {string} name
* @return {DemoWebApi_Controllers_Client.Hero}
*/
post(name: string): Observable<DemoWebApi_Controllers_Client.Hero>{
return this.http.post(this.baseUri + ‘api/Heroes?name=‘+encodeURIComponent(name),
JSON.stringify(null), { headers: new Headers({ ‘Content-Type‘:
‘text/plain;charset=UTF-8‘ }) }).map(response=> response.json());
}
/**
* Update hero.
* PUT api/Heroes
* @param {DemoWebApi_Controllers_Client.Hero} hero
* @return {DemoWebApi_Controllers_Client.Hero}
*/
put(hero: DemoWebApi_Controllers_Client.Hero): Observable<DemoWebApi_Controllers_Client.Hero>{
return this.http.put(this.baseUri + ‘api/Heroes‘, JSON.stringify(hero),
{ headers: new Headers({ ‘Content-Type‘: ‘text/plain;charset=UTF-8‘
}) }).map(response=> response.json());
}
/**
* Search heroes
* GET api/Heroes?name={name}
* @param {string} name keyword contained in hero name.
* @return {Array<DemoWebApi_Controllers_Client.Hero>} Hero array matching the keyword.
*/
search(name: string): Observable<Array<DemoWebApi_Controllers_Client.Hero>>{
return this.http.get(this.baseUri + ‘api/Heroes?name=‘+
encodeURIComponent(name)).map(response=> response.json());
}
}
如果您希望生成的TypeScript代码符合JavaScript和JSON的camel大小写，则可以在WebApiConfigWeb API的脚手架代码类中添加以下行：
config.Formatters.JsonFormatter.SerializerSettings.ContractResolver =
new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver();
然后属性名称和函数名称将在camel大小写中，前提是C＃中的相应名称都在Pascal大小写中。有关详细信息，请查看camelCasing或PascalCasing。
在像Visual Studio这样的正常文本编辑器中编写客户端代码时，您可能会获得很好的智能感知。
import { Component, OnInit } from ‘@angular/core‘;
import { Router } from ‘@angular/router‘;
import * as namespaces from ‘../clientapi/WebApiNG2ClientAuto‘;
import DemoWebApi_Controllers_Client = namespaces.DemoWebApi_Controllers_Client;
@Component({
moduleId: module.id,
selector: ‘my-heroes‘,
templateUrl: ‘heroes.component.html‘,
styleUrls: [‘heroes.component.css‘]
})
通过IDE进行设计时类型检查，并在生成的代码之上进行编译时类型检查，可以更轻松地提高客户端编程的效率和产品质量。
不要做计算机可以做的事情，让计算机为我们努力工作。我们的工作是为客户提供自动化解决方案，因此最好先自行完成自己的工作。
在典型的角2个教程，包括官方的一个 这已经存档，作者经常督促应用程序开发者制作一个服务类，如“ HeroService”，而黄金法则是：永远委托给配套服务类的数据访问。
WebApiClientGen为您生成此服务类DemoWebApi_Controllers_Client.Heroes，它将使用真正的Web API而不是内存中的Web API。在开发过程中WebApiClientGen，我创建了一个演示项目DemoAngular2和各自用于测试的Web API控制器。
典型的教程还建议使用模拟服务进行单元测试。WebApiClientGen使用真正的Web API服务要便宜得多，因此您可能不需要创建模拟服务。您应该在开发期间平衡使用模拟或实际服务的成本/收益，具体取决于您的上下文。通常，如果您的团队已经能够在每台开发机器中使用持续集成环境，那么使用真实服务运行测试可能非常无缝且快速。
在典型的SDLC中，在初始设置之后，以下是开发Web API和NG2应用程序的典型步骤：
对于第5步，有其他选择。例如，您可以使用VS IDE同时以调试模式启动Web API和NG2应用程序。一些开发人员可能更喜欢使用“ npm start”。
本文最初是为Angular 2编写的，具有Http服务。Angular 4.3中引入了WebApiClientGen2.3.0支持HttpClient。并且生成的API在接口级别保持不变。这使得从过时的Http服务迁移到HttpClient服务相当容易或无缝，与Angular应用程序编程相比，不使用生成的API而是直接使用Http服务。
顺便说一句，如果你没有完成向Angular 5的迁移，那么这篇文章可能有所帮助： 升级到Angular 5和HttpClient。如果您使用的是Angular 6，则应使用WebApiClientGen2.4.0+。
使用ASP.NET Web API和Web API Client Gen使Angular 2应用程序的开发更加高效
标签：orm mob rate 处理 post 提高 col jsonp current
原文地址：https://www.cnblogs.com/langda/p/11079802.html
