1. 概述

1.1 说明

在开发过程中,有时候需要使用图片验证码进行增加安全强度,在点击图片时更新新的图片验证码,记录此功能,以便后期使用。

2. 示例

2.1 vue示例代码

<template>
<el-form style="width: 400px;">
<el-form-item style="height: 40px;margin-bottom: 20px;">
<el-input class="input" maxlength="8" placeholder="请输入验证码"></el-input>
<div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
<img id="imgIdentifyingCode" style="height:40px; width: 100px; cursor: pointer;" alt="点击更换"
title="点击更换" />
</div>
</el-form-item>
</el-form>
</template> <script>
export default {
methods: {
/**
* 窗口代码
* @param {Boolean} bRefresh 是否刷新
*/
getIdentifyingCode: function (bRefresh) {
let identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode";
if (bRefresh) {
identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode?" + Math.random();
}
let objs = document.getElementById("imgIdentifyingCode");
objs.src = identifyCodeSrc;
},
}
}
</script> <style>
.divIdentifyingCode {
position: absolute;
top: 0;
right: 0;
z-index: 5;
width: 102px; /*设置图片显示的宽*/
height: 40px; /*图片显示的高*/
background: #e2e2e2;
margin: 0;
}
</style>

  注意:使用 Math.random() 来获取新的验证码,后台支持使用接口获取验证码。

2.1 显示

VUE 图片验证码的更多相关文章

  1. Vue图片验证码-自定义组件高级版

    最近项目中要用到图片验证码,网上一查有很多,基本都是千篇一律的4位纯数字验证码.首先得感谢那位一代目兄台提供的模板,由于不能满足需求,所以对其进行了改造升级. 经改造的图片验证码能满足一下情形使用:① ...

  2. Django与Vue交互,实现注册的图片验证码没有加载的原因

    注册功能之图片验证码: 1.实现过程: 传递uuid给后端,再发送图片验证码的请求给后端,后端存储uuid并生成图片验证码保存到redis,然后将图片验证码返回给前端. 当用户输入图片验证码的时候,前 ...

  3. 【原创】基于phpGrace+uniApp开发之:5.登录界面增加图片验证码

    1.目的: 采用phpGrace中的图片验证码,在用户名+密码登录时使用图片验证码进行验证. 2.文档地址: 图片验证码的文档地址:http://www.phpgrace.com/tools/info ...

  4. SpringCloud微服务实战——搭建企业级开发框架(二十四):集成行为验证码和图片验证码实现登录功能

    随着近几年技术的发展,人们对于系统安全性和用户体验的要求越来越高,大多数网站系统都逐渐采用行为验证码来代替图片验证码.GitEgg-Cloud集成了开源行为验证码组件和图片验证码,并在系统中添加可配置 ...

  5. 字符型图片验证码识别完整过程及Python实现

    字符型图片验证码识别完整过程及Python实现 1   摘要 验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的 防火墙 功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越 ...

  6. android图片验证码--自绘控件

    自绘控件的内容都是自己绘制出来的 大致流程如下: 1.定义一个类继承view 使用TypedArray初始化属性集合 在view的构造方法中 有一个AttributeSet的参数 很明显是用来保存控件 ...

  7. webform(十)——图片水印和图片验证码

    两者都需要引入命名空间:using System.Drawing; 一.图片水印 前台Photoshuiyin.aspx代码: <div> <asp:FileUpload ID=&q ...

  8. Android-简单的图片验证码

    Android-图片验证码生成1.为啥要验证码?图片验证码在网络中使用的是比较普遍的.一般都是用来防止恶意破解密码.刷票.论坛灌水.刷页等.2.怎样的验证码比较好?验证码的获取方式无非就两种,一种是后 ...

  9. 在mvc中实现图片验证码的刷新

    首先,在项目模型(Model)层中建立一个生成图片验证码的类ValidationCodeHelper,代码如下: public class ValidationCodeHelper { //用户存取验 ...

随机推荐

  1. SQL的六种约束

    https://blog.csdn.net/z120270662/article/details/79501621

  2. 解决chrome浏览器在win8下没有注册类的问题

    解决chrome浏览器在win8下没有注册类的问题 新建一个txt,里面存放代码 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SO ...

  3. windows生成dump文件

    windows下程序有时突然崩溃了,偶发性的崩溃很难找.于是就需要保存崩溃时的dump信息了. 下面是关于如何生成dmp文件的代码. 头文件 #pragma once #include <win ...

  4. 【解题报告】SRM-08

    A Description 给一个 01 串设为其 S,询问是否存在只出现两次的 01 串 T. 这里的出现定义为存在一串下标 ,满足  且 . Input 一行,一个 01 串 Output 一行, ...

  5. python基础 range()与np.arange()

    range()返回的是range object,而np.nrange()返回的是numpy.ndarray() range尽可用于迭代,而np.nrange作用远不止于此,它是一个序列,可被当做向量使 ...

  6. PHP实现流程管理功能

    核心逻辑:流程管理,在各种系统中扮演很重要的地位,可以把设定好的流程放入系统中,规定好几个节点,只要所有节点都通过,就可以通过. 建立四张数据库表: 1.我们首先做一个新建流程页面 flow.php, ...

  7. pyqt5-是否被编辑

    setWindowModified(bool)     被编辑状态,显示*;    没有被编辑,不显示* isWindowModified()              窗口是否是被编辑状态 from ...

  8. CMD之入门篇

    本博文最早是记录在本地电脑的,由于清理电脑的缘故,顺便将这篇笔记转移到公共博客,以便日后查阅和快速上手使用. 开门见山,步入正题,以下是Windows系统的常用CMD命令. 一 文件系统操作 0.[脚 ...

  9. mui单选和多选框

    具体见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <ti ...

  10. python 的基础 学习 第一天

    1 python 的变量 1,变量必须 由数字,字母和下划线组成 2,变量不能由数字开头,例如 :22hhh , 3,变量不能是由Python中的关键字组成. 4,变量具有可描述性,不易过长. 5,变 ...