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

資訊專(zhuān)欄INFORMATION COLUMN

利用angular4和nodejs-express構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站（九）—用戶(hù)登錄

opengps / 1081人閱讀

摘要：好了，廢話(huà)少說(shuō)，繼續(xù)吧這一章主要講利用控制用戶(hù)登錄。在前面的用戶(hù)注冊(cè)表單中使用了的響應(yīng)式表單。在構(gòu)造函數(shù)中聲明了一個(gè)對(duì)象一個(gè)對(duì)象和對(duì)象對(duì)象。并在構(gòu)造函數(shù)中用的方法更新了網(wǎng)頁(yè)的標(biāo)題。接下來(lái)導(dǎo)航到下一個(gè)頁(yè)面，并提示用戶(hù)登錄成功。

最近工作比較忙，一直沒(méi)有更新文章。原來(lái)看別人的文章感覺(jué)很過(guò)癮，現(xiàn)在自己寫(xiě)才發(fā)現(xiàn)，要堅(jiān)持下去真的很難。好了，廢話(huà)少說(shuō)，繼續(xù)吧！
這一章主要講利用angularJs控制用戶(hù)登錄。在前面的用戶(hù)注冊(cè)表單中使用了angular的響應(yīng)式表單。為了對(duì)angular的知識(shí)學(xué)習(xí)的全面一點(diǎn)，在用戶(hù)登錄的表單中，使用了模板驅(qū)動(dòng)型表單。

先從html代碼開(kāi)始

在這個(gè)html文件的

標(biāo)簽中，(ngSubmit)="onSubmit()"和用戶(hù)注冊(cè)表單一樣，用于處理表單的提交操作，為了實(shí)現(xiàn)在表單不合法時(shí)提交按鈕的disabled為false，需要讓按鈕能夠訪(fǎng)問(wèn)到表單，從而獲取到表單的狀態(tài)，所以，需要在標(biāo)簽中定義了一個(gè)模板引用變量 #loginForm，并且把賦值為“ngForm”，同時(shí)在submit按鈕標(biāo)簽中加入：[disabled]="!loginForm.form.valid"。
兩個(gè)標(biāo)簽分別輸入用戶(hù)名和密碼，通過(guò)ngModel創(chuàng)建雙向綁定到組件類(lèi)的User對(duì)象的name和password屬性，用于讀取和寫(xiě)入輸入控件的值。這里需要注意一點(diǎn)：當(dāng)在表單中使用 [(ngModel)] 時(shí)，必須要定義 name 屬性。
模板驅(qū)動(dòng)表單的驗(yàn)證都在html代碼中實(shí)現(xiàn)，需要完成以下幾項(xiàng)任務(wù)：

首先要定義模板引用變量，并賦值為"ngModel"，注意觀(guān)察標(biāo)簽中的 #name="ngModel"和#password="ngModel"。

兩個(gè)用戶(hù)名和密碼的驗(yàn)證規(guī)則比較簡(jiǎn)單，只需required，在兩個(gè)標(biāo)簽中加入此屬性。

顯示驗(yàn)證錯(cuò)誤信息和注冊(cè)表單差不多，當(dāng)模板引用變量即兩個(gè)輸入框變?yōu)閐irty(控件值變化了)和touched(控件值被訪(fǎng)問(wèn)過(guò))狀態(tài)時(shí)，如果控件值無(wú)效(invalid)，就顯示

標(biāo)簽包裹的內(nèi)容。

html部分的內(nèi)容就這些了，下面我們看一下控件類(lèi)的內(nèi)容。

控件類(lèi)

先把代碼放出來(lái)，后面慢慢分析。

@Component({
  selector: "app-login",
  templateUrl: "./login.component.html",
  styleUrls: ["./login.component.css"]
})
export class LoginComponent {
  user: User = new User(0, "", "", "");
  constructor(
    private route: Router,
    private jumService: JumbotronServive,
    private userServ: UserService,
  private tokenServ: AuthTokenService) {
    jumService.setJumbotron(new Jumbotron("Login",
      `Please login with your user name and password first`,
      ``));
  }
  onSubmit() {
    this.userServ.getUser(this.user).subscribe(
      (resp) => {
        this.tokenServ.setToken(resp.body["token"]);
        this.route.navigate(["/birthday"]);
        alert("登錄成功！");
      },
      (err)=>
      alert(this.userServ.handleError(err)),
      () => console.log("The Post observable is now completed. ")
    )
  }
}

控件類(lèi)主要完成了如下功能：

首先初始化了一個(gè)User類(lèi)的對(duì)象，用于ngModel雙向綁定到控件。保證在html控件值變化時(shí)，綁定的User類(lèi)的屬性同步變化。

在構(gòu)造函數(shù)中聲明了一個(gè)Router對(duì)象、一個(gè)JumbotronServive對(duì)象和UserService對(duì)象、AuthTokenService對(duì)象。并在構(gòu)造函數(shù)中用JumbotronServive的setJumbotron方法更新了網(wǎng)頁(yè)的標(biāo)題。(JumbotronServive的setJumbotron方法具體內(nèi)容請(qǐng)看前面的文章。)

onSubmit()函數(shù)在表單提交時(shí)被觸發(fā)，在該函數(shù)中UserService的getUser()函數(shù)，getUser()函數(shù)向服務(wù)器發(fā)送了用戶(hù)名和密碼，如果服務(wù)器驗(yàn)證成功，會(huì)發(fā)送回jwt認(rèn)證信息的token字符串，其中包括了userid。在onSubmit()函數(shù)中調(diào)用AuthTokenService的setToken()函數(shù)，將這個(gè)字符串存儲(chǔ)到本地存儲(chǔ)，用于導(dǎo)航到下一個(gè)頁(yè)面(生日頁(yè)面)時(shí)驗(yàn)證用戶(hù)信息。接下來(lái)導(dǎo)航到下一個(gè)頁(yè)面，并提示用戶(hù)登錄成功。如果發(fā)生錯(cuò)誤，提示錯(cuò)誤原因。

用戶(hù)登錄主要的內(nèi)容就這些了。其中還有一個(gè)小技巧性的東西就是在輸入密碼的時(shí)候，因?yàn)?input>標(biāo)簽的type=password，顯示的輸入內(nèi)容為“.”,很容易輸錯(cuò)。我在這個(gè)控件上放了一個(gè)可以切換的圖片，用于讓用戶(hù)選擇是否查看明文。實(shí)現(xiàn)的方法主要是改變控件的attr屬性。如果需要具體實(shí)現(xiàn)方法的朋友，可以給我留言，我會(huì)在回復(fù)中告訴大家。

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

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

相關(guān)文章

  • 利用angular4和nodejs-express構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站（九）—用戶(hù)登錄

    摘要：好了，廢話(huà)少說(shuō)，繼續(xù)吧這一章主要講利用控制用戶(hù)登錄。在前面的用戶(hù)注冊(cè)表單中使用了的響應(yīng)式表單。在構(gòu)造函數(shù)中聲明了一個(gè)對(duì)象一個(gè)對(duì)象和對(duì)象對(duì)象。并在構(gòu)造函數(shù)中用的方法更新了網(wǎng)頁(yè)的標(biāo)題。接下來(lái)導(dǎo)航到下一個(gè)頁(yè)面，并提示用戶(hù)登錄成功。 最近工作比較忙，一直沒(méi)有更新文章。原來(lái)看別人的文章感覺(jué)很過(guò)癮，現(xiàn)在自己寫(xiě)才發(fā)現(xiàn)，要堅(jiān)持下去真的很難。好了，廢話(huà)少說(shuō)，繼續(xù)吧！這一章主要講利用angularJs控制...

    Snailclimb 評(píng)論0 收藏0

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

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

    Lin_R 評(píng)論0 收藏0

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

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

    feng409 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<