vue实现随机验证码(数字类型字母类型)业务适用于登录页网页安全码

Posted 2022-09-16 水香木鱼

🚀作者简介

笔名：水香木鱼

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

---

📒技术聊斋

使用流程：

• 封装securityCode.vue组件
• 页面使用组件

详细使用 已在组件中添加注释👇

（1）封装 securityCode 组件

<!--securityCode组件-->
<template>
  <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
</template>
<script>
export default 
  name: "securityCode",
  props: 
    identifyCode: 
      type: String,
      default: "1234",
    ,
    fontSizeMin: 
      type: Number,
      default: 16,
    ,
    fontSizeMax: 
      type: Number,
      default: 40,
    ,
    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: 112,
    ,
    contentHeight: 
      type: Number,
      default: 38,
    ,
  ,
  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);
      return "rgb(" + r + "," + g + "," + b + ")";
    ,
    drawPic() 
      let canvas = document.getElementById("s-canvas");
      let ctx = canvas.getContext("2d");
      ctx.textBaseline = "bottom";
      // 绘制背景
      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>

（2）页面使用

<template>
  <div style="display: flex; align-items: center; justify-content: center">
    <span>验证码：</span>
    <el-input
      style="width: 180px"
      type="text"
      v-model="inputCode"
      placeholder="请输入您的验证码"
    />
    <div @click="refreshCode()">
      <!--验证码组件-->
      <SecurityCode :identifyCode="identifyCode"></SecurityCode>
    </div>
    <el-button type="primary" @click="getSubmitData()">提交</el-button>
  </div>
</template>

<script>
//导入组件
import SecurityCode from "@/components/securityCode.vue";
export default 
  components:  SecurityCode ,
  data() 
    return 
      identifyCodeType: "1234567890", //定义验证类型 1.数字 2.字母
      identifyCode: "",
      inputCode: "", //text框输入的验证码
    ;
  ,
  methods: 
    //验证码规则
    getSubmitData() 
      if (this.inputCode == "") 
        alert("请输入验证码");
        return;
      
      if (this.identifyCode !== this.inputCode) 
        this.inputCode = "";
        this.refreshCode();
        alert("请输入正确的验证码!");
        return;
       else 
        this.$message(
          message: "验证成功",
          type: "success",
        );
      
    ,
    //验证码
    randomNum(min, max) 
      return Math.floor(Math.random() * (max - min) + min);
    ,
    //初始化验证码
    refreshCode() 
      this.identifyCode = ""; //输入框置空
      this.makeCode(this.identifyCodeType, 4); //验证码长度为4
    ,
    //随机切换验证码
    makeCode(o, l) 
      for (let i = 0; i < l; i++) 
        this.identifyCode +=
          this.identifyCodeType[
            this.randomNum(0, this.identifyCodeType.length)
          ];
      
      console.log(this.identifyCode);
    ,
  ,
  mounted() 
    this.refreshCode();
  ,
;
</script>

---

📓精品推荐

🔋一文图解前端WebSocket 实时通信

🔋常见的浏览器与内核你知道都有哪些吗？

🔋史上最全的Vue生命周期钩子函数11个

🔋前端javaScript promise属性与async和await的区别

🔋Vue项目开发中，遇到的各种痛点问题和解决方案

---

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。