HuTool图案验证码

4 篇文章 0 订阅
2 篇文章 0 订阅

HuTool

在登录时进行验证码验证,增加系统安全,hutool是Java工具类库,提供了各种组件和工具类,Hutool官网地址:https://hutool.cn/docs/#/

1.使用HuTool工具类首先引入依赖

    <dependency>
          <groupId>cn.hutool</groupId>
          <artifactId>hutool-all</artifactId>
          <version>5.8.16</version>
    </dependency>

2.生成图案验证码

   /************************验证码:hutool类库******************************************************/
  @RequestMapping("/user")
   class Test{
   		 @RequestMapping("/getcode")
    	public void getCode(HttpServletResponse response) {

        	// 随机生成 4 位验证码,范围是0-9
        	randomGenerator = new RandomGenerator("0123456789", 4);
        	// 定义图片的显示大小
        	LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(95, 30);
        	response.setContentType("image/jpeg");
        	response.setHeader("Pragma", "No-cache");
        	try {
            	// 调用父类的 setGenerator() 方法,设置验证码的类型
            	lineCaptcha.setGenerator(randomGenerator);
            	// 输出到页面
            	lineCaptcha.write(response.getOutputStream());
            	// 打印验证码
           	 	String code = lineCaptcha.getCode();
            	System.out.println("生成的验证码:"+code);;
            	// 关闭流
            	response.getOutputStream().close();
        	} catch (IOException e) {
            	e.printStackTrace();
        	}
    	}
   }
   

3.前端引入验证码

   <div class="code">
             <span>验证码</span>
             <input type="text" id="getCode">
             <!--/user/getcode请求接口生成的验证码输出到当前页面 -->
             <img  src="/user/getcode" id="codeImg" onclick="refresh()" alt="">
   </div>


    /* javascrip刷新验证码 */
    function refresh() {
     /* new Date().getTime()这里采取获得时间,使每次点击图片验证码时src发生改变,前端检测到src改变时,就会根据接口自动去重新获得图片验证码 */
      document.querySelector("#codeImg").src = "user/getcode?time=" + new Date().getTime();
    }

最后生成的图案验证码如下,排版样式自行调整
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值