Vue纯数字验证码

谁借莪１个温暖的怀抱￠ 2022-03-26 09:06 298阅读 0赞

该验证码为4个数字生成的验证码，亲自验证点击切换，验证码组件Identify.vue可直接复制使用

提示: 该验证码图片缩小后数字经常看不清所以在这里仅仅是实现，没有详细进行实现登陆，仅仅实现了生成验证码，点击验证码后刷新验证码，真正的项目，若验证码图片要求小一点该验证码方式不合适，所以没有进行详细设计

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

Identify.vue

<template>
      <div class="s-canvas">
        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
      </div>
    </template>
    <script>
      export default {
        name: 'SIdentify',
        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) {
            var r = this.randomNum(min, max)
            var g = this.randomNum(min, max)
            var b = this.randomNum(min, max)
            return 'rgb(' + r + ',' + g + ',' + b + ')'
          },
          drawPic () {
            var canvas = document.getElementById('s-canvas')
            var 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'
            var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
            var 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 scoped>
    
    </style>

首先是引入验证码组件

import Identify from '@/utils/Identify'
    
    export default {
       components: {
           Identify
      }
    }

在表单中引入

点击触发事件，在方法method中

// 生成随机数
        randomNum (min, max) {
          return Math.floor(Math.random() * (max - min) + min)
        },
        // 切换验证码
        refreshCode () {
          this.identifyCode = ''
          this.makeCode(this.identifyCodes, 4)
        },
        // 生成四位随机验证码
        makeCode (o, l) {
          for (let i = 0; i < l; i++) {
            this.identifyCode += this.identifyCodes[
              this.randomNum(0, this.identifyCodes.length)
              ]
          }
          console.log(this.identifyCode)
        }

页面首次进入必须将默认的验证码去掉，并刷出新的验证码

mounted () {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      },

<template>
      <div>
        <public-header></public-header>
        <hr/>
        <Form ref="login" :model="user" :rules="ruleInline" inline>
          <Row>
            <Col span="24">
              <FormItem prop="account">
                <Input type="text" v-model="user.account" placeholder="Account">
                  <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <FormItem prop="password">
                <Input type="password" v-model="user.password" placeholder="Password">
                  <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <FormItem prop="yzm">
                <Input type="text" v-model="yzm" placeholder="yzm" />
                <div @click="refreshCode">
                  <Identify :identifyCode="identifyCode"></Identify>
                </div>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <FormItem>
                <Button type="primary" @click="handleSubmit('login')">登陆</Button>
                <Button type="primary" @click="back">去首页</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <hr/>
        <public-footer></public-footer>
      </div>
    </template>
    <script>
    import PublicFooter from '@/views/background/publicpages/PublicFooter'
    import PublicHeader from '@/views/background/publicpages/PublicHeader'
    import Identify from '@/utils/Identify'
    import {
      login
    } from '@/services/login'
    export default {
      name: 'Login',
      components: {
        PublicFooter,
        PublicHeader,
        Identify
      },
      data () {
        return {
          msg: '这个是登录页',
          identifyCodes: '1234567890',
          identifyCode: '',
          user: {
            account: '',
            password: '',
            verifycode: ''
          },
          ruleInline: {
            account: [{
              required: true,
              message: 'Please fill in the account',
              trigger: 'blur'
            }, {
              type: 'string',
              min: 5,
              message: 'The account length cannot be less than 5 bits',
              trigger: 'blur'
            }],
            password: [{
              required: true,
              message: 'Please fill in the password.',
              trigger: 'blur'
            }, {
              type: 'string',
              min: 6,
              message: 'The password length cannot be less than 6 bits',
              trigger: 'blur'
            }],
            yzm: [{
              required: true,
              message: 'Please fill in the yzm.',
              trigger: 'blur'
            }, {
              type: 'string',
              min: 4,
              message: 'The yzm length cannot be less than 4 bits',
              trigger: 'blur'
            }]
          }
        }
      },
      mounted () {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      },
      methods: {
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              // 配置默认接口地址，封装参数发送，以下注释中的请求也可以
              /* const para = Object.assign({}, this.user)
                setTimeout(() => {
                login(para).then(res => {
    
                }).catch(() => {
                  // 登陆失败操作
                }, 500)
              }) */
              // 带参发送
              setTimeout(() => {
                login({
                  account: this.user.account,
                  password: this.user.password
                }).then(res => {
    
                }).catch(() => {
                  // 登陆失败操作
                }, 500)
              })
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },
        back () {
          this.$router.push('/')
        },
        // 生成随机数
        randomNum (min, max) {
          return Math.floor(Math.random() * (max - min) + min)
        },
        // 切换验证码
        refreshCode () {
          this.identifyCode = ''
          this.makeCode(this.identifyCodes, 4)
        },
        // 生成四位随机验证码
        makeCode (o, l) {
          for (let i = 0; i < l; i++) {
            this.identifyCode += this.identifyCodes[
              this.randomNum(0, this.identifyCodes.length)
              ]
          }
          console.log(this.identifyCode)
        }
      }
    }
    </script>
    <style lang="postcss" scoped>
        body {
            background-color: #ff0000;
        }
    </style>

代码生成效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20220326/066fc4c8eb5f4632a7113516b472a87a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1]: /images/20220326/27fd4e71aa6c474f8c7d8cf2cfcb919d.png