2024年前端案例：简易登录表单的制作，包括用户名、密码、随机验证码，2024年最新面试加分小技巧

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

  }
},
methods: {
  //点击登录
  login() {
    //验证码的验证
    var randStr = this.rand.toString().replace(/,/g, ""); //随机生成的验证码为数组形式，此处将其转为字符串并去掉中间相隔的逗号
    var codeStr = this.code; //用户输入的验证码
    if (randStr.toLowerCase() == codeStr.toLowerCase()) { //比较用户输入的与随机生成的验证码,不区分大小写
      this.$message.success('验证码正确，可正常登录')
    } else {
      this.$message.error('请输入正确的验证码');
    }
    //点击登录后的程序逻辑...
  },

  //是否记住密码
  rem() {
    //记住密码
    if (this.notRem == true) {
      this.notRem = false;
      this.isRem = true;
      //...
    } else {
      //不记住密码
      this.notRem = true;
      this.isRem = false;
      //...
    }
  },

  //忘记密码
  forget() {
    console.log("忘记密码");
    //忘记密码后的程序逻辑...
  },

  //绘制验证码
  drawCode() {
    //获取canvas画布
    var canvas = document.getElementById('verifyCanvas');
    var context = canvas.getContext('2d');
    //填充画布
    context.fillStyle = 'cornflowerblue';
    context.fillRect(0, 0, canvas.width, canvas.height);
    //创建渐变
    var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop('0', 'yellow');
    gradient.addColorStop('0.5', 'black');
    gradient.addColorStop('1.0', 'red');
    //字体
    context.fillStyle = gradient;
    context.font = '30px Arial';
    //验证码的位置
    var x = [];
    var y = [];
    for (let i = 0; i < 4; i++) {
      this.rand[i] = this.codeList[Math.floor(Math.random() * this.codeList.length)];
      x[i] = i * 26 + 10;
      y[i] = 30;
      context.fillText(this.rand[i], x[i], y[i])
    }

    //绘制若干随机点
    for (let i = 0; i < 20; i++) {
      this.drawDot(canvas, context)
    }
    this.convertCanvasToImage(canvas);
    console.log(this.rand);
  },

  drawDot(canvas, context) {
    var px = Math.floor(Math.random() * canvas.width);
    var py = Math.floor(Math.random() * canvas.height);
    context.moveTo(px, py);
    context.lineTo(px + 1, py + 1);
    context.lineWidth = 0.2;
    context.stroke()
  },
  //绘制图片
  convertCanvasToImage(canvas) {
    document.getElementById('verifyCanvas').style.display = 'none';
    var image = document.getElementById('code_img');
    image.src = canvas.toDataURL('image/png');
    return image
  },
  //刷新验证码
  refreshCode() {
    var renew = document.getElementById('codeBox');
    var codeObj = document.getElementById('verifyCanvas');
    renew.removeChild(codeObj);
    var canvas = document.createElement('canvas');
    canvas.width = '112';
    canvas.height = '38';
    canvas.id = 'verifyCanvas';
    renew.appendChild(canvas);
    this.drawCode()
  }
},
mounted() {
  //调用绘制方法
  this.drawCode();
  this.refreshCode()
}

}