利用angular4和nodejs-express構建一個簡單的網站（八）—註冊之儲存使用者資料

黃先生發表於2019-02-16
AngularNodeJSExpress網站

上一章通過使用者註冊講解了響應式表單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兩方面的知識。下一章將要講解使用者登入的內容，在使用者登入表單中，我將使用模板驅動型表單進行操作。敬請期待……

相關文章