加速度

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

0. 其它

1. 界面相关效果

---

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

• 切换登录

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

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

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

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

    {
   {timenum > 0 ? `已发送${timenum}s` : '获取验证码'}} 

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

righttime () {      // 倒计时      if (!this.timenum) {        this.timenum = 30 // 初始值为30秒        let clertime = setInterval(() => { // 计时器          this.timenum--          if (this.timenum <= 0) { // 如果减到0则清楚计时器            clearInterval(clertime)          }        }, 1000)        // ajax请求      }    }

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

    
  
       
           
     
           
      
       
      {
   {showpwd ? '显示' : 'abc'}}      
     
    

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

3）login.vue 页调用并判断

showalert (alertText) {      this.alertshow = true      this.alertText = alertText    },    // 登录    login () {      if (this.logingwey) { // 短信登录        const { logincode, phone, code } = this        if (!this.logincode) {          // 手机号有误          this.showalert('手机号有误')        } else if (!this.code) {          // 验证码有误          this.showalert('验证码有误')        }      } else { // 密码登录        const { name, pwd, captcha } = this        if (!this.name) {          // 用户名不能为空          this.showalert('用户名不能为空')        } else if (!this.pwd) {          // 密码不能为空          this.showalert('密码不能为空')        } else if (!this.captcha) {          // 验证码有误          this.showalert('验证码有误')        }      }    },    closeTip () {      this.alertshow = false      this.alertText = ''    }

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

---

• 把 src 换成接口
  <img class="get_verification" src="http://localhost:4000/captcha" @click="getCaptcha" ref="captchas" alt="captcha">
• 添加点击事件，点击刷新图片

// 刷新图片验证码   getCaptcha () {     this.$refs.captchas.src = `http://localhost:4000/captcha?time=${Date.now()}`   }

• $refs 的基本用法
  

3. 结束

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