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

haobowd 發(fā)布于2019-08-30 14:07 / 3471人閱讀

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

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

提交注冊(cè)信息

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

標(biāo)簽中的(ngSubmit)="onSubmit()進(jìn)行提交的。在填寫(xiě)好正確的信息后，按鈕會(huì)變?yōu)榭捎脿顟B(tài)，點(diǎn)擊按鈕后，onSubmit()方法就會(huì)得到執(zhí)行，onSubmit()方法的代碼為：

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

prepareSaveUser()方法用于將FormGroup類型對(duì)象registForm的屬性值賦給一個(gè)User對(duì)象，并返回這個(gè)對(duì)象，用于發(fā)送用戶數(shù)據(jù)（利用FormGroup構(gòu)建響應(yīng)式表單的內(nèi)容，請(qǐng)看第七章的內(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對(duì)象之后，調(diào)用UserService類的saveUser()方法，將注冊(cè)信息發(fā)送到服務(wù)器（關(guān)于UserService服務(wù)類，請(qǐng)看第五章的內(nèi)容）。如果注冊(cè)成功，服務(wù)器會(huì)返回一個(gè)token字符串，存儲(chǔ)了從服務(wù)器獲取需要用戶認(rèn)證的內(nèi)容時(shí)憑證。利用AuthTokenService的setToken()方法將這個(gè)憑證存儲(chǔ)到本地。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類是一個(gè)服務(wù)類，因?yàn)槠渌K也需要用到，將它放到AppModule的providers數(shù)組中：

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

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

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

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

重置Form

如果需要重新填寫(xiě)表單內(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對(duì)象的屬性值，從而實(shí)現(xiàn)表單的重置。

總結(jié)

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

GPU云服務(wù)器云服務(wù)器網(wǎng)站的構(gòu)建構(gòu)建一個(gè) 買(mǎi)一個(gè)網(wǎng)站和域名需要多少錢(qián) linux的用戶和組

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115790.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

haobowd

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

2020年技能樹(shù)

閱讀 2283·2021-09-07 09:58
利用angular4和nodejs-express構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站（八）—注冊(cè)之保存用戶數(shù)據(jù)

閱讀 3472·2019-08-30 14:07
掀開(kāi)圖片顯示介紹的css效果

閱讀 1352·2019-08-29 12:32
web移動(dòng)開(kāi)發(fā)中如何實(shí)現(xiàn)圖標(biāo)點(diǎn)擊態(tài)的蒙層效果

閱讀 722·2019-08-29 11:06
用Class寫(xiě)一個(gè)記住用戶離開(kāi)位置的js插件

閱讀 3744·2019-08-26 18:18
一個(gè)浪漫又悲情的愛(ài)情故事——笛卡爾心形線

閱讀 3807·2019-08-26 17:35
常用前端知識(shí)積累

閱讀 1439·2019-08-26 11:35
頁(yè)面回退歷史記錄

閱讀 670·2019-08-26 11:35

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章