利用angular4和nodejs-express构建一个简单的网站（五）—用户的注册和登录-HttpClient

上一节简单介绍了一下利用angular构建的主路由模块，根据上一节的介绍，主页面加载时直接跳转到用户管理界面，下面就来介绍一下用户管理模块。启动应用后，初始界面应该是这样的：

用户管理模块（users）包括主模块UsersModule和HomeComponent、LoginComponent、RegistComponent、UsersComponent几个组件和路由模块UsersRoutingModule还有一个服务类UserService，因为这个服务还要在其他模块中使用，先把它放在AppModule的providers中，现在AppModule的providers应该为这样：

providers: [
    JumbotronServive,
    UserService,
  ],

UserService服务

UserService类主要负责向服务器传递用户的注册和登录信息，代码如下：

import { Injectable } from '@angular/core';
import { User } from './user';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class UserService {
    constructor(
        private http: HttpClient) { }
    //注册用户
    saveUser(user: User) {
        const savedUser = {
            name: user.name,
            password: user.password,
            email: user.email
        }
        return this.http.post('http://localhost:3000/users/register', savedUser, {
            responseType: "json"
        });

    }
    //登录
    getUser(user: User) {
        const loginUser = {
            name: user.name,
            password: user.password
        };
        return this.http.post('http://localhost:3000/users/login', loginUser, {
            observe: 'response'
        });

    }

    //错误处理
    handleError(err: HttpErrorResponse): string {
        if (err.error instanceof Error) {
            return '发生错误，错误信息:' + err.error.message;
        } else {
            console.log(`Backend returned code ${err.status}, body was: ${err.error['msg']}`);
            return err.error['msg'];
        }
    }
}

这里面要用到User类，User类的代码：

export class User{
    constructor(
        public id:number,
        public name:string,
        public password:string,
        public email:string
    ){}
}

在UserService中最主要的是HttpClient，它是angular4以后新功能，Angular 为应用程序提供了一个简化的 API 来实现 HTTP 功能。它基于浏览器提供的XMLHttpRequest接口。 HttpClient带来的其它优点包括：可测试性、强类型的请求和响应对象、发起请求与接收响应时的拦截器支持，以及更好的、基于可观察（Observable）对象的错误处理机制。要使用HttpClient，先要引入HttpClientModule，将HttpClientModule引入到AppModule的NgModule的imports属性的数组中。
saveUser()方法负责将用户的注册信息post给后台服务器，它接收一个User类的对象为参数，通过HttpClient类型的对象http的post方法将包含用户名、密码和用户邮箱(可以为空值)的saveUser对象传递到服务器。后台注册成功后，会返回状态200的认证信息。(后台数据的处理，详见利用angular4和nodejs-express构建一个简单的网站（三）—express访问mysql)。
getUser()方法也接收一个User类的对象为参数，将登陆的用户名和密码post到后台服务器，如果用户名和密码匹配同样返回返回状态200的认证信息。
saveUser和getUser方法返回的都是一个 Observable<HttpResponse<Object>>对象，当我们调用这两个方法后，需要使用Observable的subscribe方法进行订阅，才能真正发起一次请求并获得后端返回的数据。
handleError()方法负责错误处理，它接收一个HttpErrorResponse类型的参数。对于HttpClient的错误一般有两种，如果后端返回了一个失败的返回码（如404、500等），它会返回一个错误。如果在客户端这边出了错误（比如在RxJS操作符中抛出的异常或某些阻碍完成这个请求的网络错误），就会抛出一个Error类型的异常。在这个方法中分别针对这两种错误进行处理。