前端开发----vue移动端登录 记住密码和获取验证码

在这里插入代码片登录功能里见的比较多的就是记住密码和获取验证码这块 下面说说这块功能实现方法
1.记住密码：

这是按照设计做的 记住密码文字前面是两个图片 改变data 中的数据改变图片 但是这里有一个坑
写在这里 动态绑定图片时候data中数据应该这样写：
imgs:require("…/…/assets/images/mirror-service.png)" require加上地址 如果只写地址图片是无法显示的；
下面开始正题： 用户勾选记住密码登录
组件中methods 中的函数：

 tijiao() {
      let that = this;
      //登录时候判断data 中数据 下面一个是账号 一个是密码 为空就弹框提示 return 下面代码不执行
      if (that.zhanghao === '') {
       return that.$toast('请先输入账号')
      }
      if (that.mima === '') {
        return  that.$toast('请输入密码')
      }
      //axios 请求
      that.$http.get('  请求地址', {
        params: {传的值}
      }).then(res => {
        if (res.data.success) {
          //判断是否登录成功  登录成功提示 然后把返回的token 存在cookies中 后面请求使用
          Toast.success('登录成功');
          that.$cookies.set('token', res.data.data.token);
         //判断是否勾选记住密码 
          if (勾选了记住密码) {
          //把账号 密码存在cookies  密码使用base64加密   没有就为空
            that.$cookies.set('zhanghao', that.zhanghao);
            that.mimas = Base64.encode(that.mima)
            that.$cookies.set('mima', that.mimas);
          } else {
            that.$cookies.set('zhanghao', '');
            that.$cookies.set('mima', '');
          }
          // 登录成功跳转首页
          setTimeout(() => {
            that.$router.push('/');
          }, 2000)
        } else {
          that.$toast(res.data.msg);
        }
      }).catch(res => {
        that.$toast('接口请求错误');
      })
    }

这是密码就被存放在了cookie中了 可以在开发者工具中看 但这是还有一个问题 回到登录页 会发现账户密码并没有显示出来  这是因为虽然存了 但并没有取出来 现在看下面代码 我是写在了created 生命周期中：

     created() {
    let that = this;
    // 在页面加载时从cookie中获取登录信息， 
    let account = that.$cookies.get("zhanghao");
    let password = that.$cookies.get("mima")
    // 判断cookie 是否存在   
    if (account  && password ) {
      // 赋值给表单 账号和密码
      that.zhanghao = account
      that.mima = Base64.decode(that.$cookies.get("mima"))
      //反显记住密码ss
      that.jizhu = require("../../assets/image/sng");
    }
  },

结束 一个记住密码功能就写好了 。

2.下面是获取验证码的:
点击之前
点击之后

  yanzheng() {
       let that = this;
       //老一套 先判断 没有就return 提示 主要是一个定时器
       if (that.phone=== '') {
         return that.$toast('请先输入正确的手机号')
       }
       // 判断有没有定时器 没有发送请求器 有return 防止重复点击定时器
       if (!that.timer) {
         that.$http.get('请求地址'
           params: { 传值
         }).then(res => {
           if (res.data.success) {   
 that.$toast('已发送')
       } else {
         that.$toast(res.data.msg)
       }
     }).catch(res => {
      that.$toast('请求错误')
     })   } else {  
     /要注意一个问题 如果定时器存在 就让return  防止重复点击 定时器累加
     return  
      }
  // 定时器 判断数字
   that.timer = setInterval(() => {
     if (Number(that.dnumber) > 0 && Number(that.dnumber) <= 60) {
       that.dnumber--;
       that.dingshi = `重新发送(${that.dnumber})`;
         } else {
           clearInterval(that.timer);
           this.dingshi = "获取验证码";
           this.dnumber = 60;
          this.timer = null;
        }
      }, 1000)
     },




 好了 获取验证码功能就结束了