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

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

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

提交注册信息

向服务器提交信息是通过模板中<form [formGroup]="registForm" (ngSubmit)="onSubmit()" novalidate>标签中的(ngSubmit)="onSubmit()进行提交的。在填写好正确的信息后,按钮<button type="submit" class="btn btn-primary" [disabled]="registForm.invalid">Submit</button>会变为可用状态,点击按钮后,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两方面的知识。下一章将要讲解用户登录的内容,在用户登录表单中,我将使用模板驱动型表单进行操作。敬请期待......

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看