摘要:后臺注冊成功后,會返回狀態的認證信息。后臺數據的處理,詳見利用和構建一個簡單的網站三訪問。在這個方法中分別針對這兩種錯誤進行處理。
上一節簡單介紹了一下利用angular構建的主路由模塊,根據上一節的介紹,主頁面加載時直接跳轉到用戶管理界面,下面就來介紹一下用戶管理模塊。啟動應用后,初始界面應該是這樣的:
用戶管理模塊(users)包括主模塊UsersModule和HomeComponent、LoginComponent、RegistComponent、UsersComponent幾個組件和路由模塊UsersRoutingModule還有一個服務類UserService,因為這個服務還要在其他模塊中使用,先把它放在AppModule的providers中,現在AppModule的providers應該為這樣:
providers: [ JumbotronServive, UserService, ],UserService服務
UserService類主要負責向服務器傳遞用戶的注冊和登錄信息,代碼如下:
import { Injectable } from "@angular/core"; import { User } from "./user"; import { HttpClient, HttpErrorResponse } from "@angular/common/http"; import { Observable } from "rxjs/Observable"; @Injectable() export class UserService { constructor( private http: HttpClient) { } //注冊用戶 saveUser(user: User) { const savedUser = { name: user.name, password: user.password, email: user.email } return this.http.post("http://localhost:3000/users/register", savedUser, { responseType: "json" }); } //登錄 getUser(user: User) { const loginUser = { name: user.name, password: user.password }; return this.http.post("http://localhost:3000/users/login", loginUser, { observe: "response" }); } //錯誤處理 handleError(err: HttpErrorResponse): string { if (err.error instanceof Error) { return "發生錯誤,錯誤信息:" + err.error.message; } else { console.log(`Backend returned code ${err.status}, body was: ${err.error["msg"]}`); return err.error["msg"]; } } }
這里面要用到User類,User類的代碼:
export class User{ constructor( public id:number, public name:string, public password:string, public email:string ){} }
在UserService中最主要的是HttpClient,它是angular4以后新功能,Angular 為應用程序提供了一個簡化的 API 來實現 HTTP 功能。它基于瀏覽器提供的XMLHttpRequest接口。 HttpClient帶來的其它優點包括:可測試性、強類型的請求和響應對象、發起請求與接收響應時的攔截器支持,以及更好的、基于可觀察(Observable)對象的錯誤處理機制。要使用HttpClient,先要引入HttpClientModule,將HttpClientModule引入到AppModule的NgModule的imports屬性的數組中。
saveUser()方法負責將用戶的注冊信息post給后臺服務器,它接收一個User類的對象為參數,通過HttpClient類型的對象http的post方法將包含用戶名、密碼和用戶郵箱(可以為空值)的saveUser對象傳遞到服務器。后臺注冊成功后,會返回狀態200的認證信息。(后臺數據的處理,詳見利用angular4和nodejs-express構建一個簡單的網站(三)—express訪問mysql)。
getUser()方法也接收一個User類的對象為參數,將登陸的用戶名和密碼post到后臺服務器,如果用戶名和密碼匹配同樣返回返回狀態200的認證信息。
saveUser和getUser方法返回的都是一個 Observable
handleError()方法負責錯誤處理,它接收一個HttpErrorResponse類型的參數。對于HttpClient的錯誤一般有兩種,如果后端返回了一個失敗的返回碼(如404、500等),它會返回一個錯誤。如果在客戶端這邊出了錯誤(比如在RxJS操作符中拋出的異常或某些阻礙完成這個請求的網絡錯誤),就會拋出一個Error類型的異常。在這個方法中分別針對這兩種錯誤進行處理。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107582.html
摘要:后臺注冊成功后,會返回狀態的認證信息。后臺數據的處理,詳見利用和構建一個簡單的網站三訪問。在這個方法中分別針對這兩種錯誤進行處理。 上一節簡單介紹了一下利用angular構建的主路由模塊,根據上一節的介紹,主頁面加載時直接跳轉到用戶管理界面,下面就來介紹一下用戶管理模塊。啟動應用后,初始界面應該是這樣的: showImg(https://segmentfault.com/img/bV3...
摘要:上一節解決了用戶注冊和登錄數據部分的內容。這一節開始分析用戶模塊用戶路由。用戶管理模塊分析主要代碼如下數組中,是構建子組件必須引入的模塊。當點擊標簽時,根據路由定義直接跳轉到組件,進行用戶的注冊操作。 上一節解決了用戶注冊和登錄數據部分的內容。這一節開始分析用戶模塊、用戶路由。## 用戶管理模塊UserModule分析 ##UserModule主要代碼如下: import { NgMo...
摘要:好了,廢話少說,繼續吧這一章主要講利用控制用戶登錄。在前面的用戶注冊表單中使用了的響應式表單。在構造函數中聲明了一個對象一個對象和對象對象。并在構造函數中用的方法更新了網頁的標題。接下來導航到下一個頁面,并提示用戶登錄成功。 最近工作比較忙,一直沒有更新文章。原來看別人的文章感覺很過癮,現在自己寫才發現,要堅持下去真的很難。好了,廢話少說,繼續吧!這一章主要講利用angularJs控制...
閱讀 2655·2023-04-26 02:44
閱讀 8253·2021-11-22 14:44
閱讀 2119·2021-09-27 13:36
閱讀 2463·2021-09-08 10:43
閱讀 676·2019-08-30 15:56
閱讀 1392·2019-08-30 15:55
閱讀 2887·2019-08-28 18:12
閱讀 2826·2019-08-26 13:50