nodejs+vue实现登录界面功能(一)

项目描述:一开始进入登录界面,只有登录成功才可以跳转到主页面,已注册但是忘记密码的进入忘记密码页面,找回密码后进入登录界面。

技术选型:nodejs+vue+stylus

界面效果:

  • 切换登录方式
  • 手机合法检查
  • 倒计时效果
  • 切换显示或隐藏密码
  • 前台验证提示

前后台交互功能

  • 动态一次性图形验证码
  • 动态一次性短信验证码
  • 短信登录
  • 密码登录
  • 获取用户信息,实现自动登录
  • 退出登录

 

技术点讲解

  • 切换登录方式

使用:class绑定样式,如果没有该样式,标签设置为display:none

 

  • 手机的合法检查

使用正则,规则为以1开头,共11位数字。注意这里将方法写在computed中,当用户输入的phone改变时rightPhone才重新计算,减少缓存。

computed: {
        rightPhone () {
          return /^1\d{10}$/.test(this.phone)
        }
      },

 

  • 倒计时效果

当输入手机号后,如果手机号输入正确,“获取验证码”由灰色显示为黑色(color #ccc-> #000),可以按下按钮(:disabled = !rightPhone),发送请求(getCode),同时倒数显示,“获取验证码”字样隐藏。



                    
                    

你可能感兴趣的:(nodejs+vue实现登录界面功能(一))