当前位置: 首页 > Web前端 > HTML5

使用angular4和nodejs-express搭建一个简单的网站(九)——用户登录

时间:2023-04-05 02:00:01 HTML5

最近工作忙,文章没有更新。以前看别人的文章很过瘾,现在自己写了,才知道坚持真的很难。好了,废话少说,继续!本章主要讲使用angularJs控制用户登录。Angular的响应式表单用于之前的用户注册表单。为了全面学习angular知识,在用户登录表单中使用了模板驱动的表单。首先从html代码开始用户名需要用户名!

密码
密码rd是必需的!
提交取消中此html文件的
标签,(ngSubmit)="onSubmit()"与用户注册表单相同,用于处理表单的提交操作。为了实现表单非法时提交按钮的disabled为false,按钮需要能够访问表单获取表单的状态。因此,需要在标签中定义一个模板引用变量#loginForm,赋值为“ngForm”。同时在提交按钮标签中添加:[disabled]="!loginForm.form.valid"两个标签分别输入用户名和密码,通过ngModel创建名称和密码的双向绑定组件类User对象的password属性,用于读写输入控件值。这里需要注意一件事:在表单中使用[(ngModel)]时,必须定义name属性。模板驱动表单的校验是在html代码中实现的,需要完成以下工作:首先定义模板引用变量赋值给“ngModel”,注意#name="ngModel"和#标签中的密码="ngModel"。两个用户名和密码的验证规则比较简单,刚需,将这个属性添加到两个标签中。显示验证错误信息类似于注册表单。当模板引用变量,即两个输入框变脏(控件值发生变化)和touched(控件值被访问)时,如果控件值无效(invalid),会显示
标签包装内容。html部分的内容就这些了,我们再来看看控件类的内容。控制类先把代码放出来,然后慢慢分析。@Component({selector:'app-login',templateUrl:'./login.component.html',styleUrls:['./login.component.css']})exportclassLoginComponent{user:User=newUser(0,'','','');constructor(privateroute:Router,privatejumService:JumbotronServive,privateuserServ:UserService,privatetokenServ:AuthTokenService){jumService.setJumbotron(newJumbotron('登录',`请先使用您的用户名和密码登录`,``));}onSubmit(){this.userServ.getUser(this.user).subscribe((resp)=>{this.tokenServ.setToken(resp.body['token']);this.route.navigate(['/生日']);alert('登录成功!');},(err)=>alert(this.userServ.handleError(err)),()=>console.log('Postobservable现已完成。'))}}控件类主要完成以下功能:首先初始化User类的一个对象,实现ngModel到控件的双向绑定。保证当html控件的值发生变化时,绑定的User类的属性同步变化。构造函数中声明了Router对象、JumbotronServive对象、UserService对象和AuthTokenService对象。并在构造函数中使用JumbotronServive的setJumbotron方法更新网页的标题。(关于JumbotronServive的setJumbotron方法的具体内容可以参考上一篇文章。)onSubmit()函数在提交表单时被触发。在这个函数中,UserService的getUser()函数将用户名和密码发送给服务器。如果服务端验证成功,会发回jwt认证信息的token字符串,包括userid。在onSubmit()函数中调用AuthTokenService的setToken()函数,将此字符串存入本地存储,用于导航到下一页(生日页)时验证用户信息。然后导航到下一页并提示用户成功登录。如果发生错误,则会指示错误原因。这是用户登录的主要内容。在输入密码的时候还有一个小技巧,因为标签的type=password将输入的内容显示为“.”,很容易输入错误。我在这个控件上放了一个可切换的图片,让用户选择是否查看明文。实现方法主要是改变控件的attr属性。需要具体实现方法的朋友可以给我留言,我会在回复中告诉你。