vue实现登录页面的验证码以及验证过程解析

最新推荐文章于 2024-08-27 16:31:24 发布
最新推荐文章于 2024-08-27 16:31:24 发布
阅读量939 收藏 4
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25995697/article/details/117264489
版权

创建一个组件。显示验证码图片

SIdentify.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: 25
    },
    fontSizeMax: { // 字体最大值
      type: Number,
      default: 35
    },
    backgroundColorMin: { // 验证码图片背景色最小值
      type: Number,
      default: 200
    },
    backgroundColorMax: { // 验证码图片背景色最大值
      type: Number,
      default: 220
    },
    dotColorMin: { // 背景干扰点最小值
      type: Number,
      default: 60
    },
    dotColorMax: { // 背景干扰点最大值
      type: Number,
      default: 120
    },
    contentWidth: { // 容器宽度
      type: Number,
      default: 90
    },
    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 = '#e6ecfd'
      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(50, 160) // 随机生成字体颜色
      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(-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)
    },

    drawLine (ctx) {
      // 绘制干扰线
      for (let i = 0; i < 4; i++) {
        ctx.strokeStyle = this.randomColor(100, 200)
        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 < 30; 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>

引入组件：

import SIdentify from "@/components/SIdentify";

 components: {SIdentify},

登录页面加入代码：

<el-form-item label="验证码" prop="code">
  <el-row :span="24">
    <el-col :span="12">
      <el-input v-model="ruleForm.code" auto-complete="off" placeholder="请输入验证码" size=""
                @keyup.enter.native="submitForm('ruleForm')"></el-input>
    </el-col>
    <el-col :span="12">
      <div class="login-code" @click="refreshCode">
        <!--验证码组件-->
        <s-identify :identifyCode="identifyCode"></s-identify>
      </div>
    </el-col>
  </el-row>
</el-form-item>

在data里面加：

data() {
    return {
      ruleForm: {
        username: 'admin',
        password: '111111',
        code: ''
      },
      identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
      identifyCode: '',
      // 校验
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证密码', trigger: 'blur'}
        ]
      }
    };
  },
  mounted() {
    // 初始化验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },

methods

methods: {
    // 重置验证码
    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)]
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    submitForm(formName) {
      //获取当前刷新的图形码
      var iCode = this.identifyCode;
      //判断输入的验证码是否相等
      if (this.ruleForm.code === iCode) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const _this = this
            this.$axios.post('/login', this.ruleForm).then(res => {

              console.log(res.data)
              const jwt = res.headers['authorization']
              const userInfo = res.data.data

              // 把数据共享出去
              _this.$store.commit("SET_TOKEN", jwt)
              _this.$store.commit("SET_USERINFO", userInfo)

              // 获取
              console.log(_this.$store.getters.getUser)

              _this.$router.push("/blogs")
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }else {
        this.$message({
          showClose: true,
          message: '验证码输入错误！',
          type: 'error'
        });s
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

附上完整代码

<template>
  <div>

    <el-container>
      <el-header>
        <img class="mlogo" src="https://www.markerhub.com/dist/images/logo/markerhub-logo.png" alt="">
      </el-header>
      <el-main>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>


          <el-form-item label="验证码" prop="code">
            <el-row :span="24">
              <el-col :span="12">
                <el-input v-model="ruleForm.code" auto-complete="off" placeholder="请输入验证码" size=""
                          @keyup.enter.native="submitForm('ruleForm')"></el-input>
              </el-col>
              <el-col :span="12">
                <div class="login-code" @click="refreshCode">
                  <!--验证码组件-->
                  <s-identify :identifyCode="identifyCode"></s-identify>
                </div>
              </el-col>
            </el-row>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-main>
    </el-container>

  </div>
</template>

<script>
import SIdentify from "@/components/SIdentify";

export default {
  name: "Login",
  components: {SIdentify},
  data() {
    return {
      ruleForm: {
        username: 'admin',
        password: '111111',
        code: ''
      },
      identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
      identifyCode: '',
      // 校验
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证密码', trigger: 'blur'}
        ]
      }
    };
  },
  mounted() {
    // 初始化验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },

  methods: {
    // 重置验证码
    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)]
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    submitForm(formName) {
      //获取当前刷新的图形码
      var iCode = this.identifyCode;
      //判断输入的验证码是否相等
      if (this.ruleForm.code === iCode) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const _this = this
            this.$axios.post('/login', this.ruleForm).then(res => {

              console.log(res.data)
              const jwt = res.headers['authorization']
              const userInfo = res.data.data

              // 把数据共享出去
              _this.$store.commit("SET_TOKEN", jwt)
              _this.$store.commit("SET_USERINFO", userInfo)

              // 获取
              console.log(_this.$store.getters.getUser)

              _this.$router.push("/blogs")
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }else {
        this.$message({
          showClose: true,
          message: '验证码输入错误！',
          type: 'error'
        });s
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.mlogo {
  height: 60%;
  margin-top: 10px;
}

.demo-ruleForm {
  max-width: 500px;
  margin: 0 auto;
}

</style>
vue实现登录页面的验证码(面向新手)
weixin_45300108的博客
04-09 8423
vue实现登录页面的验证码 先将下边代码块新建vue页面复制一下 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export default{ name: 'SIdentify'
登录验证码
LILEILEILOVE的博客
10-12 811
<template> <div class="login" style="width:400px;"> <el-form ref="form" :model="form" :rules="rules" class="form"> <el-form-item prop="username"> <el-input class="log-input" v-model="f.
Vue实现验证码登录
不愧是暮言的博客
11-27 9419
在我们进行登录的时候，为了保护系统的安全性，也是防止恶意进行登录，进入到后台盗取数据，因此我们在登录的环节进行一定的安全保护，提升系统安全等级。在此我们运用阿拉伯数字和英文字母进行4位数的验证码校验，当然也可以进行多位字符进行校验，在此我使用生成4位验证码进行校验，后续会有滑块验证！！！！！！
vue前端实现登录页面的验证码(新手版)
chenyu_Yang的博客
08-27 622
二、定义文本框输入验证码变量及生成验证码变量 三、在method中写出生成验证码的方法 四、钩子函数createed中执行上述方法 五、更换验证码只需加入超链接控件，调用此方法即可
vue实现验证码登陆
花生日记
05-29 4502
我们在使用 vue进行前端开发时，都需要登录验证，而在登录的过程中，用户需要输入自己的用户名和密码，如果是输错的话还需要进行再次输入。我们在登录的时候，需要获取验证码信息，验证码是一种加密的字符串，是用来验证用户身份的一种方式，可以用来进行验证码登录。我们首先创建一个 document对象，在该对象中我们可以获取到： 1)账号密码信息 3)登录成功提示 4)注册信息 其中账号密码信息和登录成功提示是通过 DOM进行获取的，而验证码信息是通过 document.to_path方法获取到的。
Vue 实现登录界面验证码功能
10-15
本文通过实例代码给大家介绍了Vue 实现登录界面 验证码功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现登录页面的验证码以及验证过程解析(面向新手)
10-16
在Vue.js中实现登录页面的验证码功能涉及到前端交互与安全验证的重要环节，这对于任何Web应用来说都是必不可少的。本文将详细解析如何在Vue环境中构建一个验证码组件，包括生成验证码图片和进行验证的过程。 首先，...
基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip
06-26
基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip基于...
vue插件——使用canvas生成图形验证码
08-12
在这个插件中，Vue.js将用于管理验证码的生成、显示以及验证过程。 在实现这个Vue插件时，首先我们需要在canvas上设置一个足够大的画布，然后通过JavaScript随机生成一些线条、曲线、矩形、圆形或者随机字符，并将...
vue+node+mysql实现注册登录发送验证码
LOG的博客
10-31 1207
创建node后端项目,在新建文件夹的终端新建package.json文件 npm init 新建一个node入口js文件， 我的文件名字为app.js，运行node后端时就要用这个文件。 在package.json里自定义运行命令，这里我用了nodemon插件，所以我的运行node程序命令为 nodemon app.js 入口文件新建好过后，安装express（后端框架）、mysql（js操作mysql数据库）、body-parser（json解析）...
vue登录验证码
weixin_54931571的博客
02-02 174
【代码】vue登录验证码。
vue实现随机验证码功能(完整代码)
10-15
验证码功能在我们的身边用处极广，今天小编给大家分享基于vue实现随机验证码功能,感兴趣的朋友跟随小编一起看看吧
vue实现登录验证码
帅帅的困哒哒
03-30 2310
先来demo效果图 canvas验证码组件（可直接复制，无需改动） <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export default
vue -- 验证码
qq_31889029的博客
09-23 385
<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export d...
Vue实现验证码功能
wh4834的博客
11-09 5193
本文主要介绍的是Vue实现验证码功能
springboot+vue实现滑块验证码
最新发布
11-10
Spring Boot 和 Vue 结合可以创建一个动态的滑块验证码功能。首先，你需要了解这两者的角色： 1. Spring Boot 是一个轻量级的 Java 框架，用于快速构建企业级 Web 应用程序，它简化了配置并提供了对常见任务的自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值