利用angular4和nodejs-express構建一個簡單的網站（五）—用戶的註冊和登陸-HttpClient - JavaShuo

上一節簡單介紹了一下利用angular構建的主路由模塊，根據上一節的介紹，主頁面加載時直接跳轉到用戶管理界面，下面就來介紹一下用戶管理模塊。啓動應用後，初始界面應該是這樣的：node

用戶管理模塊（users）包括主模塊UsersModule和HomeComponent、LoginComponent、RegistComponent、UsersComponent幾個組件和路由模塊UsersRoutingModule還有一個服務類UserService，由於這個服務還要在其餘模塊中使用，先把它放在AppModule的providers中，如今AppModule的providers應該爲這樣：mysql

providers: [
    JumbotronServive,
    UserService,
  ],

UserService服務

UserService類主要負責向服務器傳遞用戶的註冊和登陸信息，代碼以下：sql

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類的代碼：express

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的錯誤通常有兩種，若是後端返回了一個失敗的返回碼（如40四、500等），它會返回一個錯誤。若是在客戶端這邊出了錯誤（好比在RxJS操做符中拋出的異常或某些阻礙完成這個請求的網絡錯誤），就會拋出一個Error類型的異常。在這個方法中分別針對這兩種錯誤進行處理。json