vue实战（7）：完整开发登录页面（一）

一时失言乱红尘 2021-11-26 16:54 384阅读 0赞

加速度

转眼又到端午放假，趁着这期间再整理一篇，这个小项目不大，但是时间拖的比较久，期间浪费了不少时间，加快速度，争取早点结束掉。

0. 其它

vue实战（1）：准备与资料整理
vue实战（2）：初始化项目、搭建底部导航路由
vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
vue实战（5）：总结一
vue实战（6）：异步显示数据、开发Star组件
vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
vue实战（10）：开发店铺详情（一）

1. 界面相关效果

这一部分内容，回到之前完成的 Login.vue 页面，做逻辑之前先完成一些必要的效果。

  • 切换登录
    1）设置布尔值 logingwey: true, // 短信登录为true,密码登录为false
    2）设置相关 class
    登录切换.gif

  • 手机号合法检查
    1）判断输入的手机号的位数

    computed: {

    1. // 返回true或者false，用test（），判断是否输入了11位1开头的数字
    2. logincode () {
    3.   return /^1\d{10}$/.test(this.phone)
    4. }

    },

2）判断是否可以发送验证码

  1. <button :disabled="!logincode" 
  2.         class="get_verification" 
  3.         :class="{login_code: logincode}" 
  4.         @click.prevent ="righttime">
  5.     {
  6.     {timenum > 0 ? `已发送${timenum}s` : '获取验证码'}}
  7.  </button>

  • 倒计时效果
    1）设置倒计时为30秒

    righttime () {

    1.   // 倒计时
    2.   if (!this.timenum) {
    3.     this.timenum = 30 // 初始值为30秒
    4.     let clertime = setInterval(() => { // 计时器
    5.       this.timenum--
    6.       if (this.timenum <= 0) { // 如果减到0则清楚计时器
    7.         clearInterval(clertime)
    8.       }
    9.     }, 1000)
    10.     // ajax请求
    11.   }
    12. }

发送验证码倒计时.gif

  • 切换显示或隐藏密码
    1）两个 input 设置密码显示与隐藏

  • 前台验证提示
    1）新建 AlertTip 文件夹与 AlertTip.vue 文件
    2）搭好页面与 css

3）login.vue 页调用并判断

  1. showalert (alertText) {
  2.       this.alertshow = true
  3.       this.alertText = alertText
  4.     },
  5.     // 登录
  6.     login () {
  7.       if (this.logingwey) { // 短信登录
  8.         const { logincode, phone, code } = this
  9.         if (!this.logincode) {
  10.           // 手机号有误
  11.           this.showalert('手机号有误')
  12.         } else if (!this.code) {
  13.           // 验证码有误
  14.           this.showalert('验证码有误')
  15.         }
  16.       } else { // 密码登录
  17.         const { name, pwd, captcha } = this
  18.         if (!this.name) {
  19.           // 用户名不能为空
  20.           this.showalert('用户名不能为空')
  21.         } else if (!this.pwd) {
  22.           // 密码不能为空
  23.           this.showalert('密码不能为空')
  24.         } else if (!this.captcha) {
  25.           // 验证码有误
  26.           this.showalert('验证码有误')
  27.         }
  28.       }
  29.     },
  30.     closeTip () {
  31.       this.alertshow = false
  32.       this.alertText = ''
  33.     }

提示弹窗.gif

2. 动态一次性图形验证码

  • 把 src 换成接口
    <img class="get_verification" src="http://localhost:4000/captcha" @click="getCaptcha" ref="captchas" alt="captcha">

  • 添加点击事件，点击刷新图片

    // 刷新图片验证码
    getCaptcha () {

    1.  this.$refs.captchas.src = `http://localhost:4000/captcha?time=${Date.now()}`

    }

  • $refs 的基本用法
    VUE中$refs的基本用法
    图片验证码刷新.gif

3. 结束

放在一篇有点长，分第二篇

点个赞呗！

转载于:https://www.cnblogs.com/jry199506/p/11040149.html

发表评论

表情：
评论列表 （有 0 条评论，384人围观）

还没有评论，来说两句吧...

相关阅读