springboot登陆页面图片验证码简单的web项目实现

写在前面

前段时间大家都说最近大环境不好,好多公司在裁员,换工作的话不推荐轻易的裸辞,但是我想说的是我所在的公司好流弊,有做不完的业务需求,还有就是招不完的人......

最近我也是比较繁忙,但是还是要抽一点时间来进行自我复盘和记录,最近也写一个简单的小功能,就是登陆界面的图片验证码功能

环境:Tomcat9、Jdk1.8

1 生成验证码的工具类

public class RandomValidateCodeUtil {

  public static final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";//放到session中的key
  private String randString = "0123456789";//随机产生只有数字的字符串 private String
  //private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生只有字母的字符串
  //private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串
  private int width = 95;// 图片宽
  private int height = 25;// 图片高
  private int lineSize = 40;// 干扰线数量
  private int stringNum = 4;// 随机产生字符数量

  private static final Logger logger = LoggerFactory.getLogger(RandomValidateCodeUtil.class);

  private Random random = new Random();

  /**
   * 获得字体
   */
  private Font getFont() {
    return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
  }

  /**
   * 获得颜色
   */
  private Color getRandColor(int fc, int bc) {
    if (fc > 255)
      fc = 255;
    if (bc > 255)
      bc = 255;
    int r = fc + random.nextInt(bc - fc - 16);
    int g = fc + random.nextInt(bc - fc - 14);
    int b = fc + random.nextInt(bc - fc - 18);
    return new Color(r, g, b);
  }

  /**
   * 生成随机图片
   */
  public void getRandcode(HttpServletRequest request, HttpServletResponse response) {
    HttpSession session = request.getSession();
    // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
    Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
    g.fillRect(0, 0, width, height);//图片大小
    g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//字体大小
    g.setColor(getRandColor(110, 133));//字体颜色
    // 绘制干扰线
    for (int i = 0; i <= lineSize; i++) {
      drowLine(g);
    }
    // 绘制随机字符
    String randomString = "";
    for (int i = 1; i <= stringNum; i++) {
      randomString = drowString(g, randomString, i);
    }
    logger.info(randomString);
    //将生成的随机字符串保存到session中
    session.removeAttribute(RANDOMCODEKEY);
    session.setAttribute(RANDOMCODEKEY, randomString);
    g.dispose();
    try {
      // 将内存中的图片通过流动形式输出到客户端
      ImageIO.write(image, "JPEG", response.getOutputStream());
    } catch (Exception e) {
      logger.error("将内存中的图片通过流动形式输出到客户端失败>>>>  ", e);
    }

  }

  /**
   * 绘制字符串
   */
  private String drowString(Graphics g, String randomString, int i) {
    g.setFont(getFont());
    g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
        .nextInt(121)));
    String rand = String.valueOf(getRandomString(random.nextInt(randString
        .length())));
    randomString += rand;
    g.translate(random.nextInt(3), random.nextInt(3));
    g.drawString(rand, 13 * i, 16);
    return randomString;
  }

  /**
   * 绘制干扰线
   */
  private void drowLine(Graphics g) {
    int x = random.nextInt(width);
    int y = random.nextInt(height);
    int xl = random.nextInt(13);
    int yl = random.nextInt(15);
    g.drawLine(x, y, x + xl, y + yl);
  }

  /**
   * 获取随机的字符
   */
  public String getRandomString(int num) {
    return String.valueOf(randString.charAt(num));
  }
}

这个类不用动,可以直接拿来用

2 页面代码

<!--html/bady代码-->

<div >
  <div >
    <div >
      <input type="tel" id="verify_input" placeholder="请输入验证码" maxlength="4">
    </div>
  </div>
  <div >
    <a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">
      <img id="imgVerify" src="login/getVerify" alt="更换验证码" height="36" width="170" onclick="getVerify(this);">
    </a>
  </div>
  <input type="button" onclick="aVerify()" value="提交">
</div>
</body>

<!--js中的代码-->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script>

  //获取验证码
  /*function getVerify(obj){
    obj.src = "login/getVerify?"+Math.random();//原生js方式
  }*/

  //获取验证码
  function getVerify() {
    // $("#imgCode").on("click", function() {
    $("#imgVerify").attr("src", 'login/getVerify?' + Math.random());//jquery方式
    // });
  }

  function aVerify(){
    var value =$("#verify_input").val();
    // alert(value);
    $.ajax({
      async: false,
      type: 'post',
      url: 'login/checkVerify',
      dataType: "json",
      data: {
        verifyInput: value
      },
      success: function (result) {
        if (result) {
          alert("success!");
        } else {
          alert("failed!");
        }
        // window.location.reload();
        getVerify();
      }
    });
  }
</script>

注意:这里有2种获取验证码图片的方法

3 获取code和验证code的类

@RestController
@RequestMapping("/login")
public class Picverifyaction {
  private final static Logger logger = LoggerFactory.getLogger(Picverifyaction.class);

  /**
   * 生成验证码
   */
  @RequestMapping(value = "/getVerify")
  public void getVerify(HttpServletRequest request, HttpServletResponse response) {
    try {
      response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片
      response.setHeader("Pragma", "No-cache");//设置响应头信息,告诉浏览器不要缓存此内容
      response.setHeader("Cache-Control", "no-cache");
      response.setDateHeader("Expire", 0);
      RandomValidateCodeUtil randomValidateCode = new RandomValidateCodeUtil();
      randomValidateCode.getRandcode(request, response);//输出验证码图片方法
    } catch (Exception e) {
      logger.error("获取验证码失败>>>>  ", e);
    }
  }

  /**
   * 校验验证码
   */
  @RequestMapping(value = "/checkVerify", method = RequestMethod.POST,headers = "Accept=application/json")
  public boolean checkVerify(@RequestParam String verifyInput, HttpSession session) {
    try{
      //从session中获取随机数
      String inputStr = verifyInput;
      String random = (String) session.getAttribute("RANDOMVALIDATECODEKEY");
      if (random == null) {
        return false;
      }
      if (random.equals(inputStr)) {
        return true;
      } else {
        return false;
      }
    }catch (Exception e){
      logger.error("验证码校验失败", e);
      return false;
    }
  }
}

4 效果图镇楼

5 源码

当然上面代码只是核心部分,如果有问题可去github自行下载 charmsongo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • spring整合JMS实现同步收发消息(基于ActiveMQ的实现)

    本文介绍了spring整合JMS实现同步收发消息(基于ActiveMQ的实现),分享给大家,具体如下: 1. 安装ActiveMQ 注意:JDK版本需要1.7及以上才行 到Apache官方网站下载最新的ActiveMQ的安装包,并解压到本地目录下,下载链接如下:http://activemq.apache.org/download.html,解压后的目录结构如下: bin目录结构如下: 如果我们是32位的机器,就双击win32目录下的activemq.bat,如果是64位机器,则双击win64目

  • spring boot 开发soap webservice的实现代码

    介绍 spring boot web模块提供了RestController实现restful,第一次看到这个名字的时候以为还有SoapController,很可惜没有,对于soap webservice提供了另外一个模块spring-boot-starter-web-services支持.本文介绍如何在spring boot中开发soap webservice接口,以及接口如何同时支持soap和restful两种协议. soap webservice Web service是一个平台独立的,低耦

  • 详解spring boot整合JMS(ActiveMQ实现)

    本文介绍了spring boot整合JMS(ActiveMQ实现),分享给大家,也给自己留个学习笔记. 一.安装ActiveMQ 具体的安装步骤,请参考我的另一篇文章:http://www.jb51.net/article/127117.htm 二.新建spring boot工程,并加入JMS(ActiveMQ)依赖 三.工程结构 pom依赖如下: <?xml version="1.0" encoding="UTF-8"?> <project xm

  • 解决spring-boot2.0.6中webflux无法获得请求IP的问题

    这几天在用 spring-boot 2 的 webflux 重构一个工程,写到了一个需要获得客户端请求 IP 的地方,发现写不下去了,在如下的 Handler(webflux 中 Handler 相当于 mvc 中的 Controller)中 import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Qualifier; im

  • SpringBoot深入理解之内置web容器及配置的总结

    前言 在学会基本运用SpringBoot同时,想必搭过SSH.SSM等开发框架的小伙伴都有疑惑,SpringBoot在spring的基础上做了些什么,使得使用SpringBoot搭建开发框架能如此简单,便捷,快速.本系列文章记录网罗博客.分析源码.结合微薄经验后的总结,以便日后翻阅自省. 正文 使用SpringBoot时,首先引人注意的便是其启动方式,我们熟知的web项目都是需要部署到服务容器上,例如tomcat.weblogic.widefly(以前叫JBoss),然后启动web容器真正运行我

  • Spring整合Weblogic jms实例详解

    本文主要介绍weblogic jms的配置,包括JMS 服务器和JMS 模块(连接工厂.队列.远程 SAF 上下文.SAF 导入目的地.SAF 错误处理)的配置:并在Spring环境下进行消息的监听及发送:为了更多的使用webloigc jms的功能,发送的队列使用saf配置的远程weblogic jms队列(两边的weblogic版本须一致),当然本地也是可以的.本文中demo所使用的软件环境为:weblogic 10.3.6.0.spring5.1.2.RELEASE 注:saf配置的远程队

  • SpringBoot使用WebJars统一管理静态资源的方法

    传统管理静态资源主要依赖于复制粘贴,不利于后期维护,为了让大家往后更舒心,让WebJars给静态资源来一次搬家革命吧!! 学习目标 简单两步!快速学会使用WebJars统一管理前端依赖. 快速查阅 源码下载:SpringBoot Webjars Learning 使用教程 一.引入相关依赖 在 WebJars官网找到项目中需要的依赖,例如在项目中引入jQuery.BootStrap前端组件等.例如: 版本定位工具:webjars-locator-core 前端组件:jquery .bootstr

  • 详解Spring Boot2 Webflux的全局异常处理

    本文首先将会回顾Spring 5之前的SpringMVC异常处理机制,然后主要讲解Spring Boot 2 Webflux的全局异常处理机制. SpringMVC的异常处理 Spring 统一异常处理有 3 种方式,分别为: 使用 @ExceptionHandler 注解 实现 HandlerExceptionResolver 接口 使用 @controlleradvice 注解 使用 @ExceptionHandler 注解 用于局部方法捕获,与抛出异常的方法处于同一个Controller类

  • springboot登陆页面图片验证码简单的web项目实现

    写在前面 前段时间大家都说最近大环境不好,好多公司在裁员,换工作的话不推荐轻易的裸辞,但是我想说的是我所在的公司好流弊,有做不完的业务需求,还有就是招不完的人...... 最近我也是比较繁忙,但是还是要抽一点时间来进行自我复盘和记录,最近也写一个简单的小功能,就是登陆界面的图片验证码功能 环境:Tomcat9.Jdk1.8 1 生成验证码的工具类 public class RandomValidateCodeUtil { public static final String RANDOMCODE

  • SpringBoot+hutool实现图片验证码

    目录 一.理解 “ 服务器 / 浏览器 ”沟通流程(3步) 二.开发前准备: 三. 代码实现 四.“点击验证码图片自动刷新” 是如何实现的 ? 五.最终效果 一.理解 “ 服务器 / 浏览器 ”沟通流程(3步) 第1步:浏览器使用<img src="/test/controller”>标签请求特定 Controller 路径. 第2步:服务器 Controller 返回图片的二进制数据. 第3步:浏览器接收到数据,显示图片. 二.开发前准备: Spring Boot开发常识 huto

  • Springboot+SpringSecurity实现图片验证码登录的示例

    这个问题,网上找了好多,结果代码都不全,找了好多,要不是就自动注入的类注入不了,编译报错,要不异常捕获不了浪费好多时间,就觉得,框架不熟就不能随便用,全是坑,气死我了,最后改了两天.终于弄好啦; 问题主要是: 返回的验证码不知道在SpringSecurity的什么地方和存在内存里的比较?我用的方法是前置一个过滤器,插入到表单验证之前. 比较之后应该怎么处理,:比较之后要抛出一个继承了AuthenticationException的异常 其次是捕获验证码错误异常的处理? 捕获到的异常交给自定义验证

  • 用Eclipse 创建一个简单的web项目(图文教程)

    Eclipse neon 汉化版 ; 1.右击新建 --> 选择 动态Web项目 2. 填写 项目名 项目位置 ; 选择 Dynamic web module version 和 tomcat version ; 点击完成 即可创建 项目; 2.1:项目名称: 2.2:项目位置: 2.3: Dynamic Web Module Version 和 Tomacat Version 之间有版本上的匹配关系: 匹配关系如下图 3. 创建成功后的项目结构: 4. 在创建好项目结构之后 先查看一下 项目的

  • 利用Pycharm + Django搭建一个简单Python Web项目的步骤

    一.Pycharm中安装Django 此教程默认你已安装并配置了Python 3.7.6) 1.File->Settings 二.搭建Django项目 1.File->New Project 2.新窗口打开,会出现以下的文件 简单解释一下这几个文件: **init.py:**这是一个初始化的空文件,一般我们不需要动它. settings.py: 这是一个配置文件,里面有关于语言.时区.安装的app声明等等信息: urls.py: 这个文件里指明了在访问一个页面时要调用的视图啊等的映射,确保在访

  • springboot控制层图片验证码生成

    本次博客记录项目中一个图片验证码的实现,虽然不是很复杂,但好记性不如烂笔头,谨记! package com.zl.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.FileOutputStream; import java.io.IOException; import java.io.Out

  • 运用springboot搭建并部署web项目的示例

    前言 一直以来都是用springmvc+mybatis进行后端接口开发工作,最近闲来无事,根据现有功能需求,用springboot+mybatis部署一套简单的web项目. 所用工具 IntelliJ IDEA 2018.1.4 JDK 1.8 apache-tomcat-8.0.50 所解决的问题 1.如何用idea创建springboot项目 2.如何进行 服务器.数据库.mybatis.视图解析器的配置 3.如何使用mybatis generator 自动生成代码 4.如何使用multip

  • jsp实现简单图片验证码功能

    本文实例为大家分享了jsp实现简单图片验证码的具体代码,供大家参考,具体内容如下 一.实现的功能分析 (1)在登陆页面加验证码的功能,起到一定的安全性.在输入正确的验证码,用户名和密码的情况下,才可以实现登录.(2)实现查询数据库的功能.在登陆后的页面中,显示用户名和密码,并且设置有一个超链接,实现查询数据库的功能.(3)代码核心是:随机生成验证码,并且显示在页面上.同时要和输入框中的输入验证码进行校验.(4)主页面使用img标签的src属性引入验证页面的jsp文件.(5)验证码的实现页面使用B

  • SpringBoot快速搭建web项目详细步骤总结

    最近在学习Spring Boot 相关的技术,刚接触就有种相见恨晚的感觉,因为用spring boot进行项目的搭建是在太方便了,我们往往只需要很简单的几步,便可完成一个spring MVC项目的搭建,感觉就是下图: 好,下面就本人搭建项目的过程简单说说如何快速搭建一个spring MVC项目,相信我,spring-boot这趟车,你上了根本就停不下来了! 下面是这篇博客的主要内容: spring boot 介绍 spring boot 项目快速搭建 spring-boot中单元测试 sprin

  • java web中图片验证码功能的简单实现方法

    用户在注册网站信息的时候基本上都要数据验证码验证.那么图片验证码功能该如何实现呢? 大概步骤是: 1.在内存中创建缓存图片 2.设置背景色 3.画边框 4.写字母 5.绘制干扰信息 6.图片输出 废话不多说,直接上代码 package com.lsgjzhuwei.servlet.response; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.Buffer

随机推荐