vue之验证码验证登录

最新推荐文章于 2023-11-08 20:43:44 发布

Cynthia·小月月

最新推荐文章于 2023-11-08 20:43:44 发布

阅读量405

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/FocusOnToday/article/details/129323118

版权

首先需要了解一下 H5 的画布：

一、H5的画布：canvas

1、创建画布：在html页面中使用<canvas>标签

<canvas id="cvs" width="800" height="600">
    浏览器不支持
</canvas>

2、获取画布：在javascript中来获取

let cvs = getElementById('cvs')

3、获取画布的上下文环境：画布的环境（获取画笔）

let context = cvs.getContext('2d')

4、绘制线条：

（1）确定初始端点：moveTo(x,y)

（2）确定连接端点：lineTo(x,y)

（3）描边（设置线条的颜色）：stroke() —- 默认颜色为黑色

strokeStyle属性：描边的颜色

lineWidth属性：表示线条宽度

练习一下绘制正方形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画布</title>
</head>

<body>
    <canvas id="cvs" width="600" height="400">
        浏览器不支持
    </canvas>
    <script>
        // 获取画布
        let cvs = document.getElementById('cvs')
        // 获取画笔
        let context = cvs.getContext('2d')

        // 绘制直线
        context.moveTo(100, 100)
        context.lineTo(300, 100)
        context.strokeStyle = 'blue'
        context.lineWidth = 5
        context.stroke()

        context.moveTo(100, 100)
        context.lineTo(100, 300)
        context.stroke()

        context.moveTo(100, 300)
        context.lineTo(300, 300)
        context.stroke()

        context.moveTo(300, 100)
        context.lineTo(300, 300)
        context.stroke()

    </script>
</body>

</html>

验证码

<template>
  <div class="s-canvas">
    <canvas
      id="s-canvas"
      :width="contentWidth"
      :height="contentHeight"
    ></canvas>
  </div>
</template>
  
  <script>
export default {
  name: "YanZhengMa",
  props: {
    identifyCode: {
      type: String,
      default: "1234",
    },
    fontSizeMin: {
      type: Number,
      default: 18,
    },
    fontSizeMax: {
      type: Number,
      default: 30,
    },
    backgroundColorMin: {
      //画布背景色
      type: Number,
      default: 180,
    },
    backgroundColorMax: {
      type: Number,
      default: 240,
    },
    colorMin: {
      //验证码字体颜色
      type: Number,
      default: 50,
    },
    colorMax: {
      type: Number,
      default: 160,
    },
    lineColorMin: {
      //干扰线
      type: Number,
      default: 40,
    },
    lineColorMax: {
      type: Number,
      default: 180,
    },
    dotColorMin: {
      type: Number,
      default: 0,
    },
    dotColorMax: {
      type: Number,
      default: 255,
    },
    contentWidth: {
      //画布宽度
      type: Number,
      default: 140,
    },
    contentHeight: {
      type: Number,
      default: 35,
    },
  },
  methods: {
    //生成一个随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //生成一个随机的颜色
    randomColor(min, max) {
      let r = this.randomNum(min, max);
      let g = this.randomNum(min, max);
      let b = this.randomNum(min, max);
      //   通过 rgb 函数生成随机颜色
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    //画图
    drawPic() {
      // 获取画布
      let canvas = document.getElementById("s-canvas");
      // 获取画笔
      let ctx = canvas.getContext("2d");
      // 文本基准线
      ctx.textBaseline = "bottom";

      //绘制背景，fillStyle填充
      ctx.fillStyle = this.randomColor(
        this.backgroundColorMin,
        this.backgroundColorMax
      );
      //   绘制矩形
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
      //绘制文字
      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i);
      }
      this.drawLine(ctx); //绘制干扰线
      this.drawDot(ctx); //绘制干扰点
    },

    drawText(ctx, txt, i) {
      //绘制文本
      //   画笔颜色
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
      //   字体
      ctx.font =
        this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";
      // 文字坐标
      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
      //   旋转角度
      var deg = this.randomNum(-45, 45);

      //修改坐标原点和旋转角度
      ctx.translate(x, y);
      //   旋转角度
      ctx.rotate((deg * Math.PI) / 180);
      ctx.fillText(txt, 0, 0);
      //恢复坐标原点和旋转角度
      ctx.rotate((-deg * Math.PI) / 180);
      ctx.translate(-x, -y);
    },
    // 设置干扰线
    drawLine(ctx) {
      //绘制干扰线
      for (let i = 0; i < 8; i++) {
        ctx.strokeStyle = this.randomColor(
          this.lineColorMin,
          this.lineColorMax
        );
        ctx.beginPath();
        ctx.moveTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        );
        ctx.lineTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        );
        ctx.stroke();
      }
    },
    //绘制干扰点
    drawDot(ctx) {
      for (let i = 0; i < 100; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        // 绘制弧线
        ctx.arc(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight),
          1,
          0,
          2 * Math.PI
        );
        ctx.fill();
      }
    },
  },
  //   监视验证码变化，
  watch: {
    identifyCode() {
      this.drawPic();
    },
  },
  //
  mounted() {
    this.drawPic();
  },
};
</script>
  
  <style lang="less" scoped>
.s-canvas {
  height: 35px;
  canvas {
    margin-top: 5px;
  }
}
</style>

验证码的使用

<template>
  <div>
    <div class="container">
      <div class="login-wrapper">
        <div class="header">登录</div>
        <div class="form-wrapper">
          <input
            type="text"
            name="username"
            placeholder="请输入您的账号"
            class="input-item"
            v-model.trim="username"
            @blur="checkname()"
          />
          <span class="color"> {{ msgname }}</span>

          <input
            type="password"
            name="password"
            placeholder="请输入您的密码"
            class="input-item"
            v-model.trim="password"
            @blur="checkpassword()"
          />
          <span class="color"> {{ msgpassword }}</span>
          <div class="flex">
            <input
              type="text"
              name="password"
              placeholder="请输入验证码"
              class="input-yanzhengma"
              v-model="yzm"
              @blur="check"
            />

            <div @click="refreshCode">
              <YanZhengMa :identifyCode="identifyCode"></YanZhengMa>
            </div>
          </div>
          <span class="color"> {{ msgyzm }}</span>

          <button class="btn" @click="denglu">登录</button>
          <button class="btn" @click="cancel">取消</button>
        </div>
        <div class="msg">
          <a href="#">注册</a>
        </div>
      </div>
    </div>
  </div>
</template>

逻辑部分

<script>
import YanZhengMa from "@/untils/YanZhengMa.vue";
export default {
  name: "DengLu",

  components: {
    YanZhengMa,
  },
  data() {
    return {
      identifyCode: "",
      identifyCodes: "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      yzm: "",
      username: "",
      password: "",
      msgname: "",
      msgpassword: "",
      msgyzm: "",
    };
  },
  methods: {
    // 验证码
    randomMum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      //   打印验证码
      console.log(this.identifyCode);
    },
    makeCode(a, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomMum(0, this.identifyCodes.length)];
      }
    },
    // 验证验证码
    check() {
      if (this.yzm === "") {
        this.msgname = "验证码不能为空";
        return false;
      } else if (this.identifyCode === this.yzm) {
        this.msgyzm = "验证通过";
        return true;
      } else {
        this.msgyzm = "请输入正确的验证码";
        return false;
      }
    },
    mounted() {
      const self = this;
      self.identifyCode = "";
      self.makeCode(this.identifyCodes, 4);
    },
    created() {
      this.refreshCode();
    },
    // 验证用户名
    checkname() {
      let re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (this.username === "") {
        this.msgname = "用户名不能为空";
        return false;
      } else if (re.test(this.username)) {
        this.msgname = "用户名验证通过";
        return true;
      } else {
        this.msgname = "请输入6~16位用户名,数字、字母";
        return false;
      }
    },
    //验证密码
    checkpassword() {
      // 定义正则
      let re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (this.password === "") {
        this.msgpassword = "密码不能为空";
        return false;
      } else if (re.test(this.password)) {
        this.msgpassword = "密码验证通过";
        return true;
      } else {
        this.msgpassword = "请输入6~16位密码,数字、字母";
        return false;
      }
    },
    // 点击登录
    denglu() {
      if (this.checkname() && this.checkpassword() && this.check()) {
        // 登录成功存 token
        localStorage.setItem("token", "Bearer xxx");
        // 跳转
        this.$router.replace("/MyHome");
      } else {
        // 登录失败
        localStorage.removeItem("token");
      }
    },
    // 点击取消
    cancel() {
      // 清空输入框
      this.yzm = "";
      this.username = "";
      this.password = "";
      //   清空提示
      this.msgname = "";
      this.msgpassword = "";
      this.msgyzm = "";
    },
  },
};
</script>

css 样式部分

<style scoped>
.container {
  height: 100%;
}
.login-wrapper {
  background-image: radial-gradient(
    circle,
    rgb(243, 240, 240),
    rgb(240, 240, 236),
    rgb(238, 241, 238)
  );
  width: 400px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 10%);
}
.header {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}
.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}
.input-yanzhengma {
  display: block;
  width: 40%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}
.input-item:placeholder {
  text-transform: uppercase;
}
.flex {
  display: flex;
  justify-content: space-around;
}
.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  background-image: linear-gradient(
    to bottom,
    rgb(194, 198, 194),
    rgb(238, 241, 238)
  );
  border: none;
  font-size: 20px;
}
.msg {
  text-align: center;
  line-height: 88px;
}
a {
  text-decoration-line: none;
  color: #abc1ee;
}
.color {
  font-size: 14px;
  color: red;
}
</style>

以上就是一个简单的验证登录过程，效果如下图
在这里插入图片描述

Cynthia·小月月

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue之验证码验证登录

（3）描边（设置线条的颜色）：stroke() —- 默认颜色为黑色。3、获取画布的上下文环境：画布的环境（获取画笔）2、获取画布：在javascript中来获取。（1）确定初始端点：moveTo(x,y)（2）确定连接端点：lineTo(x,y)以上就是一个简单的验证登录过程，效果如下图。strokeStyle属性：描边的颜色。lineWidth属性：表示线条宽度。1、创建画布：在html页面中使用。
复制链接

扫一扫