前言
感觉前端验证码没有后端的严谨
这里使用java后端获取图片验证码方式（超简单，复制粘贴就可以用）
实现
效果一
随机验证码
效果二
运算验证码
效果三
动态中文，这里的中文会一闪一闪的
还有数字字母验证码、数字字母动态验证码
html中
<style>/** 验证码*/.code-img{width: 120px;height: 40px;cursor: pointer;}</style><body><img src="captcha/code" class="code-img" title="看不清，换一张" onclick="refreshCaptcha()"></body><script type="text/javascript">/*** ----------------------------------------------------------------------------------* 刷新验证码*/function refreshCaptcha(){$(".code-img").attr("src", "captcha/code?time="+Math.random());}</script>
pom.xml依赖
<!--验证码依赖--><dependency><groupId>com.github.whvcse</groupId><artifactId>easy-captcha</artifactId><version>1.6.2</version></dependency>
java使用方式
package com.modules.controller.sys; // 改为自己的包目录import mon.vo.Result;import com.wf.captcha.ArithmeticCaptcha;import com.wf.captcha.ChineseGifCaptcha;import com.wf.captcha.GifCaptcha;import com.wf.captcha.SpecCaptcha;import com.wf.captcha.utils.CaptchaUtil;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** 验证码获取* @author yyq*/@CrossOrigin(origins = "*",maxAge = 3600)// 前端请求发生跨域错误，加入这段处理@Controllerpublic class CaptchaController {private static final String SESSION_KEY = "captcha";@RequestMapping("captcha/code")public void code(HttpServletRequest request, HttpServletResponse response) throws Exception {// 返回随机数验证码// CaptchaUtil.out(request, response);// 数字加减乘除/*ArithmeticCaptcha captcha = new ArithmeticCaptcha(120, 40);// 可自定义宽高（不设置宽高，则按img标签的大小适应）captcha.setLen(2);// 两位运算*/// 动态中文验证码/*ChineseGifCaptcha captcha = new ChineseGifCaptcha();captcha.setLen(2);// 两位运算*/// 英文与数字验证码//SpecCaptcha captcha = new SpecCaptcha();//英文与数字动态验证码//GifCaptcha captcha = new GifCaptcha();// 英文与数字验证码SpecCaptcha captcha = new SpecCaptcha();captcha.setLen(4);// 验证字符数// 结果String result = captcha.text();//System.out.println(result);// 这里可以单独获取base64格式的验证码//captcha.toBase64();// 将结果存储到session中（由于有些验证码没存储结果，则需要自己存储，记得要转小写，可参考自带校验方法.ver）request.getSession().setAttribute(SESSION_KEY, result.toLowerCase());// 响应到前端captcha.out(response.getOutputStream());/*** 【说明】** 不设置宽度，则按img的宽度来自适应** 其中我们可以设置自定义样式 captcha.set****();* 有font、type、width、height等**/}@RequestMapping("login")public Result login(HttpServletRequest request, String captcha){// 先验证账号、密码、验证码是否为空// 因为生成的时候存储在了session中，我们也可以直接拿值String code = (String) request.getSession().getAttribute(SESSION_KEY);//System.out.println(code);// 对验证码进行验证if (!CaptchaUtil.ver(captcha, request)) {return Result.fail("验证码不正确");}CaptchaUtil.clear(request); // 清除session中的验证码// 验证账号、密码// 此处Result为个人封装返回对象return Result.success("登录成功");}}
注意：记得拦截器/过滤器把验证码接口放行！
