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

最新推荐文章于 2024-05-19 22:24:47 发布
最新推荐文章于 2024-05-19 22:24:47 发布
阅读量910 收藏 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>
我在重庆吃火辣辣的火锅
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现登录页面的验证码以及验证过程解析(面向新手)
10-16
在Vue.js中实现登录页面的验证码功能涉及到前端交互与安全验证的重要环节，这对于任何Web应用来说都是必不可少的。本文将详细解析如何在Vue环境中构建一个验证码组件，包括生成验证码图片和进行验证的过程。 首先，...
vue实现登录页面的验证码(面向新手)
weixin_45300108的博客
04-09 8244
vue实现登录页面的验证码 先将下边代码块新建vue页面复制一下 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export default{ name: 'SIdentify'
Vue实现验证码登录
不愧是暮言的博客
11-27 8745
在我们进行登录的时候，为了保护系统的安全性，也是防止恶意进行登录，进入到后台盗取数据，因此我们在登录的环节进行一定的安全保护，提升系统安全等级。在此我们运用阿拉伯数字和英文字母进行4位数的验证码校验，当然也可以进行多位字符进行校验，在此我使用生成4位验证码进行校验，后续会有滑块验证！！！！！！
基于Vue的验证码实现
游王子的博客
05-19 372
其中icon_light.png图标图片如下，其他img.jpg图片可以是任意图片。
Vue实现验证码功能
wh4834的博客
11-09 5075
本文主要介绍的是Vue实现验证码功能
vue实现验证码登陆
花生日记
05-29 4231
我们在使用 vue进行前端开发时，都需要登录验证，而在登录的过程中，用户需要输入自己的用户名和密码，如果是输错的话还需要进行再次输入。我们在登录的时候，需要获取验证码信息，验证码是一种加密的字符串，是用来验证用户身份的一种方式，可以用来进行验证码登录。我们首先创建一个 document对象，在该对象中我们可以获取到： 1)账号密码信息 3)登录成功提示 4)注册信息 其中账号密码信息和登录成功提示是通过 DOM进行获取的，而验证码信息是通过 document.to_path方法获取到的。
【验证码功能合集】vue简单实现验证码功能，纯前端实现验证码，拿来即用【输入，滑动，拼图】
seeeeeeeeeee的博客
07-01 8256
可以让输入的验证码和图片验证码比对。滑动验证码功能，滑动拼图验证码功能。 上面的是验证码的组件，直接复制贴里面就行了，然后引入到你需要的地方 很简单的两个步骤搞定这里是验证码的组件，啥也不用动，直接复制创建个文件贴进去。然后去你要用的地方引入 （2）使用组件 在这里就是直接引入组件，然后把组件放到对应的位置就行了。参数看需要传...
基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip
最新发布
06-26
基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip基于 Vue.js 实现的滑动验证码组件源码+使用说明.zip基于...
vue移动端输入验证码自动登录效果
10-14
在Vue.js移动端应用中，实现验证码自动登录效果是一种常见的用户认证机制，旨在提供便捷的登录体验。本项目涉及的核心知识点包括Vue组件、事件处理、数据绑定以及可能涉及到的第三方库或API。 首先，Vue组件是Vue....
vue插件——使用canvas生成图形验证码
08-12
在这个插件中，Vue.js将用于管理验证码的生成、显示以及验证过程。 在实现这个Vue插件时，首先我们需要在canvas上设置一个足够大的画布，然后通过JavaScript随机生成一些线条、曲线、矩形、圆形或者随机字符，并将...
前端vue-element 登录随机生成数字验证码
IT博客技术分享
03-26 2992
老规矩先上效果图： html文件： <!-- 随机验证码 --> <el-form-item prop="verifycode" style="line-height:0px;"> <el-input v-model="loginForm.verifycode" ref="verifycode" placeholder="验证码" class="identifyinput" style="width:230px;">&lt
Vue实现验证码
不愧是暮言的博客
05-14 2312
Vue实现验证码的章节到这里就结束了。我们了解了实现验证码的思路和步骤，并创建了一个可以在Vue应用程序中使用的验证码组件。实现验证码有很多方法，这是其中之一。您可以根据自己的需要和喜好选择自己喜欢的方法来实现验证码。最后，我们需要注意的是，在实际的应用中，验证码是防止机器人攻击的一种非常有用的措施，但并不是完全可靠的。因此，还需要配合其他安全措施来保护您的应用程序和网站。
前端（vue）实现图形（拼图等）验证码
m0_64207574的博客
01-06 2989
前端（vue）实现图形（拼图等）验证码
Vue中如何进行表单验证码与滑动验证？
Java徐师兄的博客
06-16 2092
本文介绍了如何使用Vue和库来实现表单验证码和滑动验证功能。我们首先使用npm安装了库，并在Vue中注册了和组件。然后，我们通过组件实现了表单验证码，通过组件实现了滑动验证。希望本文能够帮助你在Vue项目中实现表单验证码和滑动验证功能。
vue3 实现登录验证码
weixin_71403100的博客
08-22 9389
vue3项目----实现登录验证码vue3项目前提条件：已安装引入【element-plus】，【vue-router@4】，【sass】等。
SpringBoot+Vue+Token实现登录验证码校验
Su7148的博客
01-06 1190
SpringBoot+Vue+Token实现登录验证码校验
Vue前端实现 简单图形验证码
c000211的博客
02-15 2160
本文主要是讲述验证码的实现，主要是canvas，Math的方法等等。
vue实现用户注册获取验证码及验证码校验功能（部分代码）
断肠人在刷牙〃的博客
08-21 2714
首先需要明确业务需求： 前端 需要对用户手机号码校验（手机号格式、手机号输入框是否为空） 需要对验证码校验（验证码输入格式、验证码输入框是否为空） 获取验证码按钮校验（控制验证码60s内不可重复提交、判断验证码是否和输入框中的值相同、验证码输入框是否为空） 根据不同返回结果给予不同的提示 手机号已绑定（别人已绑定） 手机号为当前用户已绑定 后端 集成发送短信验证码能力 随机生成六位数短信验证法 校验手机号是否已绑定 存储 一个简单的用户手机号绑定/注册的业务大致就是这些，接下来我们开始做。首先做前端
vue实现前端登录验证码
09-27
vue实现前端登录验证码的过程主要包括以下步骤： 1. 在登录界面添加一个验证码组件。 2. 获取验证码信息，可以通过调用接口或者后端返回的数据来获取验证码。 3. 获取用户输入的密码和其他必要的登录信息。 4. 验证用户输入的密码和验证码是否正确。 5. 根据验证结果返回相应的登录状态或错误提示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值