通过Java实现各种前端验证码（字母，中文，数字运算）

这里借鉴一位大佬的开源项目：EasyCaptcha: 传送门

这里实现的验证码有英语字母，计算，中文类型，内置字体各种类型

 这里那其中一种，计算类型的验证码，讲解如何在Java中实现。

效果图：

首先，导入这个依赖

        <!--验证码-->
        <dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>1.6.2</version>
        </dependency>

如果maven下载不了这个jar那就去maven的配置文件中，把镜像改成：

	<mirror>
	  <id>aliyunmaven</id>
	  <mirrorOf>*</mirrorOf>
	  <name>阿里云公共仓库</name>
	  <url>https://maven.aliyun.com/repository/public</url>
	</mirror>

jar下载好过后，编写后台返回验证码的请求：

这个验证码也可以不存到redis中，也可以存到session中。只需要这一个方法，就可以返回一个输出流，显示图片验证码了

@Controller
@RequestMapping("/seckill")
public class SecKillController{

    @Autowired
    private RedisTemplate redisTemplate;

    /**
     * 生成验证码的接口
     * @param user 登录的用户
     * @param goodsId 秒杀商品的id
     * @param response  用于输出流
     */
    @RequestMapping(value = "/captcha", method = RequestMethod.GET)
    public void verifyCode(HttpSession session, HttpServletResponse response){
        // 设置请求头输入为图片类型
        response.setContentType("image/jpg");
        // 设置不用缓存，防止验证码不刷新
        response.setHeader("Pargam","No-cache");
        response.setHeader("Cache-Control","no-cache");
        // 设置过期时间，永不失效
        response.setDateHeader("Expires",0);

        // 算术类型（长，宽，几个数的运算）
        ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);
        captcha.setLen(3);  // 几位数运算，默认是两位
        System.out.println(captcha.getArithmeticString()); // 获取运算公式 5x0+5=?
        System.out.println(captcha.text()); // 获取验证码结果

        // 图片英语字母数字类型
        //SpecCaptcha captcha = new SpecCaptcha(130, 48);

        // 英语字母数字gif类型的
        //GifCaptcha captcha = new GifCaptcha(130, 48,4);

        // 中文类型的
        //ChineseCaptcha captcha = new ChineseCaptcha(130, 48,3);

        // 中文gif类型
        //ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48,4);

        // 将结果放入Redis，设置5分钟失效时间。或者存入session·
        session.setAttribute("captcha:admin", captcha.text());

        // 输出验证码
        try {
            captcha.out(response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

接下来就是前端：

用一个图片展示，一个文本框输入，点击秒杀的时候在后端校验验证码是否正确

                <div class="row">
                    <div class="form-inline">
                        <img id="captchaImg" width="130" height="48" onclick="refreshCaptcha()" style="display: none" />
                        <input id="captcha" class="form-control" style="display: none">
                        <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="getSeckillPath()">立即秒杀
                            <input type="hidden" name="goodsId" id="goodsId">
                        </button>
                    </div>
                </div>

js:

<script>

    $(function () {
        // 加载商品信息，课忽略
        getDetail();
        // 首次加载 获取验证码
        $("#captchaImg").attr("src","/seckill/captcha?goodsId="+$("#goodsId").val()+"&time="+new Date());
    });

    // 更新验证码的方法
    function refreshCaptcha() {
        // 点击的时候把地址换成这个
        $("#captchaImg").attr("src","/seckill/captcha?goodsId="+$("#goodsId").val()+"&time="+new Date());
    }

</script>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffgggggggggggggggggggggggggggg