EasyCaptcha是一个基于Java开发的图形验证码工具，项目地址为: https://github.com/pig-mesh/easy-captcha

1. 引入依赖

  1. <dependency>
  2.   <groupId>com.pig4cloud.plugin</groupId>
  3.   <artifactId>captcha-spring-boot-starter</artifactId>
  4.   <version>2.2.0</version>
  5. </dependency>

使用教程在项目地址中已经有了，这里直接贴出demo代码。

后端

  1. @RestController
  2. @RequestMapping("/captcha")
  3. @CrossOrigin
  4. public class CaptchaController {
  6.     private RedisUtils redisUtils;
  8.     @GetMapping("/get")
  9.     public ResultVO getCaptcha() {
  10.         // 新建一个算数验证码，并且指定了宽和高(验证码图片的尺寸)
  11.         Captcha captcha = new ArithmeticCaptcha(111, 36);
  12.         // 设置算数验证的长度。2表示2位数运算
  13.         captcha.setLen(2);
  14.         // 验证码的结果值
  15.         String captchaValue = captcha.text();
  16.         // 验证码的图片url
  17.         String codeUrl = captcha.toBase64();
  18.         // 将结果封装到map中返回给前端
  19.         HashMap<String, String> map = new HashMap<>();
  20.         map.put("captchaValue", captchaValue);
  21.         map.put("codeUrl", codeUrl);
  22.         return new ResultVO(10000, map);
  23.     }
  25. }

一般来说验证码为保证时效性，是要存储进redis的，这里为了测试方便，没有存进redis，直接返回给前端了。

前端

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>easy-captcha测试</title>
  6.         <script type="application/javascript" src="js/axios.min.js"></script>
  7.         <script type="application/javascript" src="js/vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <div>
  12.                 <img :src="captchaImgSrc" @click="changeCaptcha" height="36px" width="111px" border="1px;" /><br />
  13.                 <input type="text" v-model="inputValue" /><button type="button" @click="pressOk">确认</button>
  14.             </div>
  16.         </div>
  18.         <script type="application/javascript">
  19.             var vm = new Vue({
  20.                 el: "#app",
  21.                 data: {
  22.                     captchaImgSrc: "",
  23.                     captchaValue: "",
  24.                     inputValue: ""
  25.                 },
  26.                 // 钩子函数，在页面加载，data初始化之后执行，向后端发送请求，获取验证码信息
  27.                 created() {
  28.                     axios.get("http://localhost:8080/captcha/get").then(res => {
  29.                         var vo = res.data;
  30.                         vm.captchaImgSrc = vo.data.codeUrl;
  31.                         vm.captchaValue = vo.data.captchaValue;
  32.                     });
  33.                 },
  34.                 methods: {
  35.                     // 提交验证码后判断对错
  36.                     pressOk: function() {
  37.                         if (this.captchaValue === this.inputValue) {
  38.                             alert("验证码输入正确!");
  39.                         } else {
  40.                             alert("验证码输入错误!");
  41.                         }
  42.                     },
  43.                     // 点击验证码刷新
  44.                     changeCaptcha: function() {
  45.                         axios.get("http://localhost:8080/captcha/get").then(res => {
  46.                             var vo = res.data;
  47.                             vm.captchaImgSrc = vo.data.codeUrl;
  48.                             vm.captchaValue = vo.data.captchaValue;
  49.                         });
  50.                     }
  51.                 }
  52.             })
  53.         </script>
  54.     </body>
  55. </html>