利用angular4和nodejs-express构建一个简单的网站（八）—注册之保存用户数据

haobowd 发布于2019-08-30 14:07 / 3222人阅读

摘要：上一章通过用户注册讲解了响应式表单，这章主要讲解如何向服务器提交注册数据并导航到好友信息模块。利用的方法将这个凭证存储到本地。针对一个进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

上一章通过用户注册讲解了响应式表单ReactiveForm，这章主要讲解如何向服务器提交注册数据并导航到好友信息模块。

提交注册信息

向服务器提交信息是通过模板中

标签中的(ngSubmit)="onSubmit()进行提交的。在填写好正确的信息后，按钮会变为可用状态，点击按钮后，onSubmit()方法就会得到执行，onSubmit()方法的代码为：

onSubmit() {
    this.user = this.prepareSaveUser();
    this.userSer.saveUser(this.user).subscribe(
      () => {
        this.tokenServ.setToken(value["token"]);
        this.router.navigate(["/birthday"]);
        alert("注册成功！");
      },
      (err) =>
        alert(this.userSer.handleError(err)),
      () => {
        console.log("The post observable is now completed.");
      }
    );

prepareSaveUser()方法用于将FormGroup类型对象registForm的属性值赋给一个User对象，并返回这个对象，用于发送用户数据（利用FormGroup构建响应式表单的内容，请看第七章的内容）。prepareSaveUser()方法的代码如下：

prepareSaveUser(): User {
    const formModel = this.registForm.value;
    const saveUser: User = {
      id: this.user.id,
      name: formModel.name as string,
      password: formModel.password as string,
      email: formModel.email
    };
    return saveUser;
  }

把prepareSaveUser()方法的返回值赋值给User对象之后，调用UserService类的saveUser()方法，将注册信息发送到服务器（关于UserService服务类，请看第五章的内容）。如果注册成功，服务器会返回一个token字符串，存储了从服务器获取需要用户认证的内容时凭证。利用AuthTokenService的setToken()方法将这个凭证存储到本地。AuthTokenService类的代码：

import { Injectable } from "@angular/core";
@Injectable()
export class AuthTokenService{
    setToken(token:string){
        sessionStorage.removeItem("token");
        if((token as string).length != 0){
            sessionStorage.token = token;
            console.log("sessionStorage.token: " + sessionStorage.token);
        } 
    }
    getToken(){
        if(sessionStorage.token){
            return sessionStorage.token;
        }else{
            return null;
        }
    }
}

AuthTokenService类是一个服务类，因为其他模块也需要用到，将它放到AppModule的providers数组中：

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
   ...
    AuthTokenService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这个服务提供商的主要工作就是将token的值存储到sessionStorage中，在需要的时候进行取出。 sessionStorage针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如果在注册过程中发现错误，就在对话框中显示UserService的handleError()方法返回的错误提示信息。

导航到下一页面

如果注册成功，就调用Router类的navigate()方法，跳转到/birthday的url,进入BirthdaysModule模块。

重置Form

如果需要重新填写表单内容，按Cancel按钮后，将触发revert()方法，代码如下：

reset() {
    this.user = new User(0, "", "", "");
    this.registForm.reset({
      name: this.user.name,               
      password: this.user.password,
      email: this.user.email
    })
  }

这里主要调用了FormGroup类的reset()方法，将所有属性值设为this.user对象的属性值，从而实现表单的重置。

总结

用户注册的内容大致就是这些，主要知识包括angular的HttpClient、ReactForm两方面的知识。下一章将要讲解用户登录的内容，在用户登录表单中，我将使用模板驱动型表单进行操作。敬请期待......

超融合服务器云服务器网站的构建构建一个买一个网站和域名需要多少钱 linux的用户和组

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

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

利用angular4和nodejs-express构建一个简单的网站（八）—注册之保存用户数据

摘要：上一章通过用户注册讲解了响应式表单，这章主要讲解如何向服务器提交注册数据并导航到好友信息模块。利用的方法将这个凭证存储到本地。针对一个进行数据存储。当用户关闭浏览器窗口后，数据会被删除。上一章通过用户注册讲解了响应式表单ReactiveForm，这章主要讲解如何向服务器提交注册数据并导航到好友信息模块。提交注册信息向服务器提交信息是通过模板中标签中的(ngSubmit)=onSu...

宋华 2019-08-22 15:22 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（八）—注册之保存用户数据

摘要：上一章通过用户注册讲解了响应式表单，这章主要讲解如何向服务器提交注册数据并导航到好友信息模块。利用的方法将这个凭证存储到本地。针对一个进行数据存储。当用户关闭浏览器窗口后，数据会被删除。上一章通过用户注册讲解了响应式表单ReactiveForm，这章主要讲解如何向服务器提交注册数据并导航到好友信息模块。提交注册信息向服务器提交信息是通过模板中标签中的(ngSubmit)=onSu...

mushang 2019-08-05 18:03 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（七）—用户注册之Reactiv

摘要：在提交按钮上的标记，表示当表单有不符合验证规则的输入时，按钮不能使用。取消输入按钮在控件值未发生变化时不能使用。并在构造方法中声明并初始化这三个类。下一步利用创建表单。这一节对用户注册组件进行分析。用户注册组件主要涉及angular4表单的操作。Angular提供了两种构建表单的技术：响应式表单和模板驱动表单。这两项技术都属于@angular/forms库，并且共享一组公共的表单控...

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

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

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

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

feng409 2019-08-01 18:37 评论0 收藏0