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

2019年8月24日 210次阅读 来源: 黄先生

上一节简朴引见了一下应用angular构建的主路由模块，依据上一节的引见，主页面加载时直接跳转到用户治理界面，下面就来引见一下用户治理模块。启动应用后，初始界面应该是如许的：

《应用angular4和nodejs-express构建一个简朴的网站（五）—用户的注册和登录-HttpClient》
用户治理模块（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范例的非常。在这个要领平分别针对这两种毛病举行处置惩罚。

    原文作者：黄先生
    原文地址: https://segmentfault.com/a/1190000013336169
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞