利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

Snailclimb 发布于2019-08-30 14:21 / 1648人阅读

摘要：好了，废话少说，继续吧这一章主要讲利用控制用户登录。在前面的用户注册表单中使用了的响应式表单。在构造函数中声明了一个对象一个对象和对象对象。并在构造函数中用的方法更新了网页的标题。接下来导航到下一个页面，并提示用户登录成功。

最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！
这一章主要讲利用angularJs控制用户登录。在前面的用户注册表单中使用了angular的响应式表单。为了对angular的知识学习的全面一点，在用户登录的表单中，使用了模板驱动型表单。

先从html代码开始


  
    
      User name
      
      
          User name is required!
      
    
    
      Password
      
        
      
      
          Password is required!

在这个html文件的

标签中，(ngSubmit)="onSubmit()"和用户注册表单一样，用于处理表单的提交操作，为了实现在表单不合法时提交按钮的disabled为false，需要让按钮能够访问到表单，从而获取到表单的状态，所以，需要在标签中定义了一个模板引用变量 #loginForm，并且把赋值为“ngForm”，同时在submit按钮标签中加入：[disabled]="!loginForm.form.valid"。
两个标签分别输入用户名和密码，通过ngModel创建双向绑定到组件类的User对象的name和password属性，用于读取和写入输入控件的值。这里需要注意一点：当在表单中使用 [(ngModel)] 时，必须要定义 name 属性。
模板驱动表单的验证都在html代码中实现，需要完成以下几项任务：

首先要定义模板引用变量，并赋值为"ngModel"，注意观察标签中的 #name="ngModel"和#password="ngModel"。

两个用户名和密码的验证规则比较简单，只需required，在两个标签中加入此属性。

显示验证错误信息和注册表单差不多，当模板引用变量即两个输入框变为dirty(控件值变化了)和touched(控件值被访问过)状态时，如果控件值无效(invalid)，就显示

标签包裹的内容。

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. ")
    )
  }
}

控件类主要完成了如下功能：

首先初始化了一个User类的对象，用于ngModel双向绑定到控件。保证在html控件值变化时，绑定的User类的属性同步变化。

在构造函数中声明了一个Router对象、一个JumbotronServive对象和UserService对象、AuthTokenService对象。并在构造函数中用JumbotronServive的setJumbotron方法更新了网页的标题。(JumbotronServive的setJumbotron方法具体内容请看前面的文章。)

onSubmit()函数在表单提交时被触发，在该函数中UserService的getUser()函数，getUser()函数向服务器发送了用户名和密码，如果服务器验证成功，会发送回jwt认证信息的token字符串，其中包括了userid。在onSubmit()函数中调用AuthTokenService的setToken()函数，将这个字符串存储到本地存储，用于导航到下一个页面(生日页面)时验证用户信息。接下来导航到下一个页面，并提示用户登录成功。如果发生错误，提示错误原因。

用户登录主要的内容就这些了。其中还有一个小技巧性的东西就是在输入密码的时候，因为标签的type=password，显示的输入内容为“.”,很容易输错。我在这个控件上放了一个可以切换的图片，用于让用户选择是否查看明文。实现的方法主要是改变控件的attr属性。如果需要具体实现方法的朋友，可以给我留言，我会在回复中告诉大家。

专线服务云服务器 asp 一个用户登录系统登录用户名和密码简单的php登录 asp网站用户登录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115961.html

利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

摘要：好了，废话少说，继续吧这一章主要讲利用控制用户登录。在前面的用户注册表单中使用了的响应式表单。在构造函数中声明了一个对象一个对象和对象对象。并在构造函数中用的方法更新了网页的标题。接下来导航到下一个页面，并提示用户登录成功。最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！这一章主要讲利用angularJs控制...

opengps 2019-08-22 15:57 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

摘要：好了，废话少说，继续吧这一章主要讲利用控制用户登录。在前面的用户注册表单中使用了的响应式表单。在构造函数中声明了一个对象一个对象和对象对象。并在构造函数中用的方法更新了网页的标题。接下来导航到下一个页面，并提示用户登录成功。最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！这一章主要讲利用angularJs控制...

VioletJack 2019-08-05 13:27 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（五）—用户的注册和登录-Htt

摘要：后台注册成功后，会返回状态的认证信息。后台数据的处理，详见利用和构建一个简单的网站三访问。在这个方法中分别针对这两种错误进行处理。上一节简单介绍了一下利用angular构建的主路由模块，根据上一节的介绍，主页面加载时直接跳转到用户管理界面，下面就来介绍一下用户管理模块。启动应用后，初始界面应该是这样的： showImg(https://segmentfault.com/img/bV3...

Lin_R 2019-08-26 11:47 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（五）—用户的注册和登录-Htt

摘要：后台注册成功后，会返回状态的认证信息。后台数据的处理，详见利用和构建一个简单的网站三访问。在这个方法中分别针对这两种错误进行处理。上一节简单介绍了一下利用angular构建的主路由模块，根据上一节的介绍，主页面加载时直接跳转到用户管理界面，下面就来介绍一下用户管理模块。启动应用后，初始界面应该是这样的： showImg(https://segmentfault.com/img/bV3...

feng409 2019-08-01 18:37 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（五）—用户的注册和登录-Htt

摘要：后台注册成功后，会返回状态的认证信息。后台数据的处理，详见利用和构建一个简单的网站三访问。在这个方法中分别针对这两种错误进行处理。上一节简单介绍了一下利用angular构建的主路由模块，根据上一节的介绍，主页面加载时直接跳转到用户管理界面，下面就来介绍一下用户管理模块。启动应用后，初始界面应该是这样的： showImg(https://segmentfault.com/img/bV3...

Moxmi 2019-08-05 17:59 评论0 收藏0