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

Lin_R 发布于2019-08-26 11:47 / 1334人阅读

摘要：后台注册成功后，会返回状态的认证信息。后台数据的处理，详见利用和构建一个简单的网站三访问。在这个方法中分别针对这两种错误进行处理。

上一节简单介绍了一下利用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>对象，当我们调用这两个方法后，需要使用Observable的subscribe方法进行订阅，才能真正发起一次请求并获得后端返回的数据。
handleError()方法负责错误处理，它接收一个HttpErrorResponse类型的参数。对于HttpClient的错误一般有两种，如果后端返回了一个失败的返回码（如404、500等），它会返回一个错误。如果在客户端这边出了错误（比如在RxJS操作符中抛出的异常或某些阻碍完成这个请求的网络错误），就会抛出一个Error类型的异常。在这个方法中分别针对这两种错误进行处理。

云服务器私有云 linux的用户和组 ecs的用户名和密码系统登录用户名和密码云服务器的用户名和密码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107582.html

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

摘要：后台注册成功后，会返回状态的认证信息。后台数据的处理，详见利用和构建一个简单的网站三访问。在这个方法中分别针对这两种错误进行处理。上一节简单介绍了一下利用angular构建的主路由模块，根据上一节的介绍，主页面加载时直接跳转到用户管理界面，下面就来介绍一下用户管理模块。启动应用后，初始界面应该是这样的： showImg(https://segmentfault.com/img/bV3...

feng409 2019-08-01 18:37 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（五）—用户的注册和登录-Htt

摘要：后台注册成功后，会返回状态的认证信息。后台数据的处理，详见利用和构建一个简单的网站三访问。在这个方法中分别针对这两种错误进行处理。上一节简单介绍了一下利用angular构建的主路由模块，根据上一节的介绍，主页面加载时直接跳转到用户管理界面，下面就来介绍一下用户管理模块。启动应用后，初始界面应该是这样的： showImg(https://segmentfault.com/img/bV3...

Moxmi 2019-08-05 17:59 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（六）—用户模块和路由分析

摘要：上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块用户路由。用户管理模块分析主要代码如下数组中，是构建子组件必须引入的模块。当点击标签时，根据路由定义直接跳转到组件，进行用户的注册操作。上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块、用户路由。## 用户管理模块UserModule分析 ##UserModule主要代码如下： import { NgMo...

cfanr 2019-08-22 15:04 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（六）—用户模块和路由分析

摘要：上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块用户路由。用户管理模块分析主要代码如下数组中，是构建子组件必须引入的模块。当点击标签时，根据路由定义直接跳转到组件，进行用户的注册操作。上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块、用户路由。## 用户管理模块UserModule分析 ##UserModule主要代码如下： import { NgMo...

lemanli 2019-08-05 18:01 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

摘要：好了，废话少说，继续吧这一章主要讲利用控制用户登录。在前面的用户注册表单中使用了的响应式表单。在构造函数中声明了一个对象一个对象和对象对象。并在构造函数中用的方法更新了网页的标题。接下来导航到下一个页面，并提示用户登录成功。最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！这一章主要讲利用angularJs控制...

Snailclimb 2019-08-30 14:21 评论0 收藏0