实习笔记1-vue登陆实现验证码js

在实习的时候遇到的一些坑和经历，想在这里记录一下

公司让我们实习生做个公司内部使用的一个系统，我恰好负责登陆注册模块（内心狂喜，这不是分分钟的事？），结果同组的后端孩子没时间给我做验证码（当场懵逼？？？），就只有自己js撸了。

经过楼楼各种调试发现是js里储存验证码验证的数据会叠加，

问题和解决方式

问题

于是在网上找了个js的验证码脚本，遇到了一个坑，这个脚本很离谱，第一次验证码输入正确能成功登陆，只要一点切换图片不管有没有输入正确都登不上去（当时直接怀疑是不是最近星际争霸打多了，真成瞎子了）
经过楼楼各种‘调戏’发现是js里储存验证码验证的数据会叠加（哈哈哈哈哈）

0000是界面输入，后面的是验证码数据


切换图片后，验证码数据叠加了

解决方法：

在生产验证码数据循环前把code清空（是不是很简单0.0，然后我调了老半天，把整个脚本读了好几遍。留下了没有技术的泪水）

		this.options.code = ''
        for (var i = 1; i <= 4; i++) {
            var txt = txtArr[randomNum(0, txtArr.length)]
            // this.options.code = ''
            this.options.code += txt
            ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei' // 随机生成字体大小
            ctx.fillStyle = randomColor(50, 160) // 随机生成字体颜色
            ctx.shadowOffsetX = randomNum(-3, 3)
            ctx.shadowOffsetY = randomNum(-3, 3)
            ctx.shadowBlur = randomNum(-3, 3)
            ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
            var x = this.options.width / 5 * i
            var y = this.options.height / 2
            var deg = randomNum(-30, 30)
            /** 设置旋转角度和坐标原点**/
            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)
        }

废话不多说上代码

在script中引入组件

 引入组件

 [....<script>]

import { GVerify } from '../../static/js/verifyCode';

 [export default { ....]
// 定义验证对象

data数据

data() {
    return {
      loginForm: {
        username: "",
        password: "",
        //获取界面输入验证码数据
        verifyCode: "",
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        verifyCode: [
          { required: true, message: "请输入正确验证码", trigger: "blur" },
        ],
      },
      //验证码数据
      verifyCode: null,
    };
  },

初始化结点

<el-form-item prop="verifyCode" class="verifyCodeItemCss">
     <el-input class="verify_css" placeholder="请输入4位验证码" v-model="ruleForm.verifyCode" @keyup.enter.native="submitForm('ruleForm')"></el-input>
     <!--关键 ↓-->
     <div id="v_container"></div>
</el-form-item>

初始化方法

//mounted方法中初始化 'v_container' 为div的id
mounted () {
  this.verifyCode = new GVerify('v_container')
}

验证输入

// 验证输入的是否正确

// 通过在data中定义的verifyCode对象的validate()方法，如果输入正确返回true 错误返回 false
 methods: {
    login() {
      var that = this;
      // 获取验证码
      var verifyCode = this.loginForm.verifyCode;
      var verifyFlag = this.verifyCode.validate(verifyCode);
      if (!verifyFlag) {
        that.$message.error({
          title: "系统提示",
          message: "验证码输入错误",
        });
        return;
      } else {
        that.$message({
          title: "系统提示",
          message: "验证码输入正确",
          type: "success",
        });
      }
     }
    }

login完整代码

<template>
  <div class="login_zujian">
    <div class="login_box">
      <div class="img_box">
        <img src="../assets/logo.png" alt="" />
      </div>
      <div class="form_box">
        <!-- 登陆表单 -->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
          <!-- 用户名 -->
          <el-form-item label="用户名" prop="username">
            <el-input
              class="int1"
              prefix-icon="iconfont icon-user"
              placeholder="请输入用户名"
              v-model.trim="loginForm.username"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input
              class="int2"
              prefix-icon="iconfont icon-3702mima"
              placeholder="请输入密码"
              v-model.trim="loginForm.password"
              type="password"
            ></el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="verifyCode" class="verifyCodeItemCss">
            <!--关键 ↓-->
            <span id="v_container"></span>
            <el-input
              class="verify_css"
              placeholder="请输入4位验证码"
              v-model="loginForm.verifyCode"
            ></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="login">登陆</el-button>
            <el-button type="success" @click="push_registered">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { GVerify } from "./utils/verifyCode.js";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        verifyCode: "",
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        verifyCode: [
          { required: true, message: "请输入正确验证码", trigger: "blur" },
        ],
      },
      verifyCode: null,
    };
  },
  methods: {
    login() {
      var that = this;
      // 获取验证码
      var verifyCode = this.loginForm.verifyCode;
      var verifyFlag = this.verifyCode.validate(verifyCode);
      if (!verifyFlag) {
        that.$message.error({
          title: "系统提示",
          message: "验证码输入错误",
        });
        return;
      } else {
        that.$message({
          title: "系统提示",
          message: "验证码输入正确",
          type: "success",
        });
      }
      // console.log(this);
      // this.$refs.loginFormRef.resetFields();
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "LoginCheck",
          this.$qs.stringify({
            username: this.loginForm.username,
            password: this.loginForm.password,
          })
        );
        console.log(res);

        if (res.code == 1) return this.$message.error("登录失败！");
        this.$message.success("登录成功");
        // // 管理员界面
        // if (res.count == 1) {
        //   this.$router.push("/user");
        // }
        // // 用户界面
        // else if (res.count == 0) {
        //   this.$router.push("/register");
        // }
      });
    },
    push_registered() {
      this.$router.push("/register");
    },
  },
  mounted() {
    this.verifyCode = new GVerify("v_container");
  },
};
</script>
<style lang="" scoped>
.login_zujian {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 400px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login_box .img_box {
  width: 130px;
  height: 130px;
  padding: 10px;
  position: absolute;
  left: 50%;
  /* top: -50px; */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px #eee solid;
  box-shadow: 0 0 10px #ddd;
  /* background-color: #fff; */
}
.login_box .img_box img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #eee;
}
.form_box {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.form_box .int1,
.int2 {
  width: 80%;
  float: right;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.verify_css {
  width: 60%;
  float: right;
}
</style>

verifyCode.js

function GVerify(options) { // 创建一个图形验证码对象，接收options对象为参数
    this.options = { // 默认options参数值
        id: '', // 容器Id
        canvasId: 'verifyCanvas', // canvas的ID
        width: '80', // 默认canvas宽度
        height: '30', // 默认canvas高度
        type: 'number', // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
        code: ''
    }

    if (Object.prototype.toString.call(options) === '[object Object]') { // 判断传入参数类型
        for (var i in options) { // 根据传入的参数，修改默认参数值
            this.options[i] = options[i]
        }
    } else {
        this.options.id = options
    }

    this.options.numArr = '0,1,2,3,4,5,6,7,8,9'.split(',')
    this.options.letterArr = getAllLetter()

    this._init()
    this.refresh()
}

GVerify.prototype = {
    /** 版本号**/
    version: '1.0.0',

    /** 初始化方法**/
    _init: function () {
        var con = document.getElementById(this.options.id)
        var canvas = document.createElement('canvas')
        // this.options.width = con.offsetWidth > 0 ? con.offsetWidth : '30'
        // this.options.height = con.offsetHeight > 0 ? con.offsetHeight : '30'
        this.options.width = '160'
        this.options.height = '50'
        canvas.id = this.options.canvasId
        canvas.width = this.options.width
        canvas.height = this.options.height
        canvas.style.cursor = 'pointer'
        canvas.innerHTML = '您的浏览器版本不支持canvas'
        con.appendChild(canvas)
        var parent = this
        canvas.onclick = function () {
            parent.refresh()
        }
    },

    /** 生成验证码**/
    refresh: function () {
        var canvas = document.getElementById(this.options.canvasId)
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d')
        }
        ctx.textBaseline = 'middle'

        ctx.fillStyle = randomColor(180, 240)
        ctx.fillRect(0, 0, this.options.width, this.options.height)

        if (this.options.type === 'blend') { // 判断验证码类型
            var txtArr = this.options.numArr.concat(this.options.letterArr)
        } else if (this.options.type === 'number') {
            var txtArr = this.options.numArr
        } else {
            var txtArr = this.options.letterArr
        }
        this.options.code = ''
        for (var i = 1; i <= 4; i++) {
            var txt = txtArr[randomNum(0, txtArr.length)]
            // this.options.code = ''
            this.options.code += txt
            ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei' // 随机生成字体大小
            ctx.fillStyle = randomColor(50, 160) // 随机生成字体颜色
            ctx.shadowOffsetX = randomNum(-3, 3)
            ctx.shadowOffsetY = randomNum(-3, 3)
            ctx.shadowBlur = randomNum(-3, 3)
            ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
            var x = this.options.width / 5 * i
            var y = this.options.height / 2
            var deg = randomNum(-30, 30)
            /** 设置旋转角度和坐标原点**/
            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)
        }
        /** 绘制干扰线**/
        for (var i = 0; i < 4; i++) {
            ctx.strokeStyle = randomColor(40, 180)
            ctx.beginPath()
            ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
            ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
            ctx.stroke()
        }
        /** 绘制干扰点**/
        for (var i = 0; i < this.options.width / 4; i++) {
            ctx.fillStyle = randomColor(0, 255)
            ctx.beginPath()
            ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI)
            ctx.fill()
        }
    },

    /** 验证验证码**/
    validate: function (code) {
        var code = code.toLowerCase()
        var v_code = this.options.code.toLowerCase()
        console.log(code);
        console.log(this.options.code);
        console.log(v_code);
        if (code == v_code) {
            return true
        } else {

            return false
        }
    }
}
/** 生成字母数组**/
function getAllLetter() {
    var letterStr = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z'
    return letterStr.split(',')
}
/** 生成一个随机数**/
function randomNum(min, max) {
    return Math.floor(Math.random() * (max - min) + min)
}
/** 生成一个随机色**/
function randomColor(min, max) {

    var r = randomNum(min, max)
    var g = randomNum(min, max)
    var b = randomNum(min, max)
    return 'rgb(' + r + ',' + g + ',' + b + ')'
}

export {
    GVerify
}