Java集成图形验证码&前端Vue+Axios

目录

一、前言

二、前端代码

三、后台代码

1.环境准备：

2.图形验证码Controller接口：

3.图形验证码业务层：

四、项目需要用到的工具类2个

1.VerifyCodeUtils工具类：

2.StrUtils工具类：

---

---

一、前言

        图形验证码使用场景：

                                        1.账户注册

                                        2.账户登录

        图形验证码作用：

                                        有效防止恶意破解密码，刷票，恶意登录、注册等...

        图形验证码使用目的：

                                       在我们的系统中为了防止程序恶意注册或机器人恶意攻击网站，需要在获取手机验证校验是否是人为操作。

        效果图：

二、前端代码

<!-- 图形验证码 -->
<div class="form-group form-group-spe">
   <label for="mobileregistermodel-captcha" class="input-left">
      <span>验证码：</span>
   </label>
   <div class="form-control-box">
      <input  v-model="formParams.imageCode" type="text" id="captcha" class="input-small" name="MobileRegisterModel[captcha]">
      <label class="captcha">
      <img id="captcha-image-temp" @click="getImageCode"class="captcha-image-temp" :src="imageCode" alt="点击换图" title="点击换图" style="vertical-align: middle; cursor: pointer;">
      </label>
   </div>
   <div class="invalid"></div>
</div>

new Vue({
   el:"#phoneForm",
   data(){
      return {
         formParams:{
            mobile:'18244444444',
            password:'123456',
            imageCode:'',// 图片里面的验证码，为了传到后台判断
            smsCode:'',
            regChannel:1 //注册的渠道
                 },
         imageCodePrefix:"data:image/jpg;base64,",// 后端传过来的base64的码
         imageCode:''// 后端传过来的base64的码
      }
   },
   methods:{
      createUuid(){
         var s = [];
         var hexDigits = "0123456789abcdefghi";
         for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
         }
         s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
         s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
         s[8] = s[13] = s[18] = s[23] = "-";

         var uuid = s.join("");
         return uuid;
      },
   getImageCode(){
   //发送请求到后台获取数据  VerifycodeController
   let imageCodeKey = localStorage.getItem("registerImageCodeKey");
   if(!imageCodeKey || imageCodeKey === ''){
      imageCodeKey = this.createUuid();
      localStorage.setItem("registerImageCodeKey",imageCodeKey);
   }
   this.$http.get("/common/verifycode/imageCode/"+imageCodeKey).then(res=>{
      //res.data :就是base64编码后的图片的字符串
      this.imageCode = this.imageCodePrefix+res.data.data;
   })
},
}，
mounted(){
   this.getImageCode();
}
});

三、后台代码

1.环境准备：

1.1引入依赖jar包：

<!--整合Redis , 底层可以用jedis-->
<dependenc