利用angular4和nodejs-express构建一个简单的网站(九)—用户登
最近工作比较忙,一直没有更新文章。原来看别人的文章感觉很过瘾,现在自己写才发现,要坚持下去真的很难。好了,废话少说,继续吧! 先从html代码开始<div class="div-login"> <form (ngSubmit)="onSubmit()" #loginForm="ngForm"> <div class="form-group"> <label for="name">User name</label> <input type="text" class="form-control" id="name" name="name" placeholder="Enter user name" [(ngModel)]="user.name" required #name="ngModel"> <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger"> User name is required! </div> </div> <div class="form-group"> <label for="password">Password</label> <div class="input-group"> <input class="form-control" id="password" name="passwrod" placeholder="Enter password" [(ngModel)]="user.password" required #password="ngModel"> </div> <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger"> Password is required! </div> </div> <div class="form-group form-btn"> <button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Submit</button> <button type="button" class="btn btn-light" (click)="loginForm.reset()">Cancel</button> </div> </form> </div> 在这个html文件的<form>标签中,
html部分的内容就这些了,下面我们看一下控件类的内容。 控件类先把代码放出来,后面慢慢分析。 @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. ') ) } } 控件类主要完成了如下功能:
用户登录主要的内容就这些了。其中还有一个小技巧性的东西就是在输入密码的时候,因为<input>标签的type=password,显示的输入内容为“.”,很容易输错。我在这个控件上放了一个可以切换的图片,用于让用户选择是否查看明文。实现的方法主要是改变<input>控件的attr属性。如果需要具体实现方法的朋友,可以给我留言,我会在回复中告诉大家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |