成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

利用angular4和nodejs-express構(gòu)建一個簡單的網(wǎng)站（八）—注冊之保存用戶數(shù)據(jù)

宋華 / 1729人閱讀

摘要：上一章通過用戶注冊講解了響應(yīng)式表單，這章主要講解如何向服務(wù)器提交注冊數(shù)據(jù)并導(dǎo)航到好友信息模塊。利用的方法將這個憑證存儲到本地。針對一個進(jìn)行數(shù)據(jù)存儲。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。

上一章通過用戶注冊講解了響應(yīng)式表單ReactiveForm，這章主要講解如何向服務(wù)器提交注冊數(shù)據(jù)并導(dǎo)航到好友信息模塊。

提交注冊信息

向服務(wù)器提交信息是通過模板中

標(biāo)簽中的(ngSubmit)="onSubmit()進(jìn)行提交的。在填寫好正確的信息后，按鈕會變?yōu)榭捎脿顟B(tài)，點(diǎn)擊按鈕后，onSubmit()方法就會得到執(zhí)行，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對象，并返回這個對象，用于發(fā)送用戶數(shù)據(jù)（利用FormGroup構(gòu)建響應(yīng)式表單的內(nèi)容，請看第七章的內(nèi)容）。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對象之后，調(diào)用UserService類的saveUser()方法，將注冊信息發(fā)送到服務(wù)器（關(guān)于UserService服務(wù)類，請看第五章的內(nèi)容）。如果注冊成功，服務(wù)器會返回一個token字符串，存儲了從服務(wù)器獲取需要用戶認(rèn)證的內(nèi)容時憑證。利用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類是一個服務(wù)類，因?yàn)槠渌K也需要用到，將它放到AppModule的providers數(shù)組中：

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

這個服務(wù)提供商的主要工作就是將token的值存儲到sessionStorage中，在需要的時候進(jìn)行取出。 sessionStorage針對一個 session 進(jìn)行數(shù)據(jù)存儲。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。
如果在注冊過程中發(fā)現(xiàn)錯誤，就在對話框中顯示UserService的handleError()方法返回的錯誤提示信息。

導(dǎo)航到下一頁面

如果注冊成功，就調(diào)用Router類的navigate()方法，跳轉(zhuǎn)到/birthday的url,進(jìn)入BirthdaysModule模塊。

重置Form

如果需要重新填寫表單內(nèi)容，按Cancel按鈕后，將觸發(fā)revert()方法，代碼如下：

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

這里主要調(diào)用了FormGroup類的reset()方法，將所有屬性值設(shè)為this.user對象的屬性值，從而實(shí)現(xiàn)表單的重置。

總結(jié)

用戶注冊的內(nèi)容大致就是這些，主要知識包括angular的HttpClient、ReactForm兩方面的知識。下一章將要講解用戶登錄的內(nèi)容，在用戶登錄表單中，我將使用模板驅(qū)動型表單進(jìn)行操作。敬請期待......

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93419.html

相關(guān)文章

  • 利用angular4和nodejs-express構(gòu)建一個簡單的網(wǎng)站（八）—注冊之保存用戶數(shù)據(jù)

    摘要：上一章通過用戶注冊講解了響應(yīng)式表單，這章主要講解如何向服務(wù)器提交注冊數(shù)據(jù)并導(dǎo)航到好友信息模塊。利用的方法將這個憑證存儲到本地。針對一個進(jìn)行數(shù)據(jù)存儲。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。 上一章通過用戶注冊講解了響應(yīng)式表單ReactiveForm，這章主要講解如何向服務(wù)器提交注冊數(shù)據(jù)并導(dǎo)航到好友信息模塊。 提交注冊信息 向服務(wù)器提交信息是通過模板中標(biāo)簽中的(ngSubmit)=onSu...

    haobowd 評論0 收藏0

  • 利用angular4和nodejs-express構(gòu)建一個簡單的網(wǎng)站（五）—用戶的注冊和登錄-Htt

    摘要：后臺注冊成功后，會返回狀態(tài)的認(rèn)證信息。后臺數(shù)據(jù)的處理，詳見利用和構(gòu)建一個簡單的網(wǎng)站三訪問。在這個方法中分別針對這兩種錯誤進(jìn)行處理。 上一節(jié)簡單介紹了一下利用angular構(gòu)建的主路由模塊，根據(jù)上一節(jié)的介紹，主頁面加載時直接跳轉(zhuǎn)到用戶管理界面，下面就來介紹一下用戶管理模塊。啟動應(yīng)用后，初始界面應(yīng)該是這樣的： showImg(https://segmentfault.com/img/bV3...

    Lin_R 評論0 收藏0

  • 利用angular4和nodejs-express構(gòu)建一個簡單的網(wǎng)站（五）—用戶的注冊和登錄-Htt

    摘要：后臺注冊成功后，會返回狀態(tài)的認(rèn)證信息。后臺數(shù)據(jù)的處理，詳見利用和構(gòu)建一個簡單的網(wǎng)站三訪問。在這個方法中分別針對這兩種錯誤進(jìn)行處理。 上一節(jié)簡單介紹了一下利用angular構(gòu)建的主路由模塊，根據(jù)上一節(jié)的介紹，主頁面加載時直接跳轉(zhuǎn)到用戶管理界面，下面就來介紹一下用戶管理模塊。啟動應(yīng)用后，初始界面應(yīng)該是這樣的： showImg(https://segmentfault.com/img/bV3...

    feng409 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<