使用Angular2及WebApi开发SPA类型的企业应用 - Part 6- RESTful 和 WebApi

使用Angular2及RESTful WebApi开发SPA类型的企业应用 - Part 6 RESTful 和 WebApi
作者：techcoaching，翻译：飘落寒冰
原文 有道
注：第一次翻译文章，有错译之处还请多多包涵，欢迎指出以便改进。

在本文中，我们将简单介绍本项目如何使用RESTful/WebApi
从Github上下载源码

该系列的全部文章

1. 概览
2. 添加新角色
3. 项目结构
4. 多语言
5. 依赖注入和控制反转-为什么和为什么不?
6. RESTful & WebApi
7. 应用生命周期管理
8. 应用构建与部署

简介

本项目中，我们是用angular2（typescript）处理客户端逻辑和请求服务器端处理业务逻辑（C#）。

客户端和服务器通过WebApi（RESTful的Web Servic）来通信

客户端请求

在组件中，我们调用了相关的服务

@Component({    selector: "roles",    templateUrl: "app/modules/security/permission/permissions.html",    directives: [Grid, PageActions, Page]})export class Permissions extends BasePage {    private router: Router;    public model: PermissionsModel;    constructor(router: Router) {        super();        let self: Permissions = this;        self.router = router;        self.model = new PermissionsModel(self.i18nHelper);        self.loadPermissions();        this.model.addPageAction(new PageAction("btnAddPer", "security.permissions.addPermissionAction", () => self.onAddNewPermissionClicked()));    }    private loadPermissions() {        let self: Permissions = this;        permissionService.getPermissions().then(function (items: Array<any>) {            self.model.importPermissions(items);        });    }}

permissionService实际上是通过IConnector（IConnect是angular中调用Http的接口）向服务器发送请求。

import configHelper from "../../../../common/helpers/configHelper";import {Promise} from "../../../../common/models/promise";import {IoCNames} from "../../../../common/enum";import {IConnector} from "../../../../common/connectors/iconnector";let permissionService = {    getPermissions: getPermissions};export default permissionService;function getPermissions(): Promise {    let connector: IConnector = window.ioc.resolve(IoCNames.IConnector);    let url = String.format("{0}permissions", configHelper.getAppConfig().api.baseUrl);    return connector.get(url);}

IConnector中，我们用了Http服务

export class RESTConnector implements IConnector {    private static http: Http;    private static eventManager: EventManager;    constructor() {        let http: Http = window.appState.getInjector().get(Http);        this.setHttp(http);    }    public get(url: string): Promise {        RESTConnector.eventManager.publish(LoadingIndicatorEvent.Show);        let def = PromiseFactory.create();        let headers = new JsonHeaders();        RESTConnector.http.get(url, { headers: headers })            .map((response: any) => response.json())            .subscribe(            (data: any) => this.handleResponse(def, data),            (exception: any) => this.handleException(def, exception)            );        return def;    }}

服务器端API

我们通过PermissionsController接收请求

namespace App.Api.Features.Security{    [RoutePrefix("api/permissions")]    public class PermissionsController : ApiController    {        [HttpGet]        [Route()]        public IResponseData<IList<PermissionAsKeyNamePair>> GetPermissions()        {            IResponseData<IList<PermissionAsKeyNamePair>> response = new ResponseData<IList<PermissionAsKeyNamePair>>();            try            {                IPermissionService permissionService = IoC.Container.Resolve<IPermissionService>();                IList<PermissionAsKeyNamePair> pers = permissionService.GetPermissions();                response.SetData(pers);            }            catch (ValidationException ex)            {                response.SetErrors(ex.Errors);                response.SetStatus(System.Net.HttpStatusCode.PreconditionFailed);            }            return response;        }    }}

如果我们需要在请求时向server端传递参数，这些参数必须是DTO对。

RESTful规定了每种操作使用特定的Http Verb (Get, Create, Update, Delete) 和请求路径。我们不介绍这些内容。

我只想澄清一些不同之处：

我们定义了两种累行errors/excetion，分别用来返回：基础错误和业务错误

• Infrastructure Error

用来处理网络错误（找不到路径,超时,…）, IIS配置错误configuration on IIS。这意味着业务逻辑部分尚未执行。

• Business Error

用来处理客户端传递到服务器端用来处理业务逻辑的数据有错误。

例如：用户的用户名和密码不匹配。这种情况下，我们不能用通过HttpCode 500传递，客户端不明白服务器端发生了什么事情。

所有我们需要把此错误返回给客户端

IResponseData<IList<PermissionAsKeyNamePair>> response = new ResponseData<IList<PermissionAsKeyNamePair>>();try{}catch (ValidationException ex){    response.SetErrors(ex.Errors);    response.SetStatus(System.Net.HttpStatusCode.PreconditionFailed);}return response;

REST工具的输出：

我们可以发现，API返回了多个校验错误，我们可以在UI中将他们展示出来。这种方式比返回一个通用错误要更友好。

在相应的service中，我们校验的了请求中的参数，如果校验失败，我们将抛出如下异常：

private void ValidateUserLoginRequest(UserSignInRequest request){    ValidationException exception = new ValidationException();    if (request == null)    {        exception.Add(new ValidationError("common.invalidRequest"));    }    if (String.IsNullOrWhiteSpace(request.Email))    {        exception.Add(new ValidationError("registration.signin.validation.emailRequired"));    }    if (String.IsNullOrWhiteSpace(request.Pwd))    {        exception.Add(new ValidationError("registration.signin.validation.pwdRequired"));    }    IUserRepository userRepository = IoC.Container.Resolve<IUserRepository>();    User userProfile = userRepository.GetByEmail(request.Email);    if (userProfile == null || EncodeHelper.EncodePassword(request.Pwd) != userProfile.Password)    {        exception.Add(new ValidationError("registration.signin.validation.invalidEmailOrPwd"));    }    exception.ThrowIfError();}

总结

本例中，API成功返回了处理结果（HttpCode 200），但是收到的确是业务逻辑错误。

一些朋友认为这可能令人困惑。如果您有更好的解决方案，我很高兴与各位一起探讨。

授权

本文，以及所包含的源码，文件遵循CPOL协议