上一节简单介绍了一下利用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类型的异常。在这个方法中分别针对这两种错误进行处理。

本文固定链接: http://www.js-code.com/angularjs/angularjs_28658.html