利用angular4和nodejs-express构建一个简单的网站(五)—用户的
上一节简单介绍了一下利用angular构建的主路由模块,根据上一节的介绍,主页面加载时直接跳转到用户管理界面,下面就来介绍一下用户管理模块。启动应用后,初始界面应该是这样的:
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属性的数组中。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |