SpringBoot整合图形验证码_springboot实现图形验证码

一.前端

1.引入elementui组件

<el-form-item prop="code">
  <el-input
      v-model="ruleForm2.code"
      auto-complete="off"
      placeholder="验证码"
      style="width: 63%;"
      @keyup.enter.native="handleLogin"
  >
  </el-input>
  <img :src="base64ImageCode" @click="getImageCode" />
</el-form-item>

2.生成uuid这里我们在前端生成uuid

//前端生成key - 就用来传递到后端来保存或获取redis图形验证码
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;
},

 3.发送请求获取图形验证码

//获取图形验证码
getImageCode(){
  //localStorage保存的数据只要不删除一直存在：删除1.鼠标删除 2.代码删除removeItem
  let key = localStorage.getItem("ImageUUID");
  //js中可以直接对变量进行判断：0 null NaN undefined 原始类型的false ""
  if(!key){//没有值就生成一个 - 保证key值唯一
    key = this.createUuid();
    //将key保存到localStorage
    localStorage.setItem("ImageUUID",key);
  }

  this.$http.get("/verifyCode/image/" + key).then(res=>{
    //console.log(res.data);//base64编码之后的字符串
    this.base64ImageCode = "data:image/jpeg;base64,"+res.data;
  }).catch(res=>{
    this.$message.error("系统繁忙，请稍后重试!!!【400，404】")
  })
},

二.后端 

1.接口到业务处理返回给前端Base64在前端进行拼接