SpringBoot intègre le code de vérification graphique

1. Frontal

1. Introduction du composant 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. Générer l'uuid Ici, nous générons l'uuid au front-end

//Le front-end génère une clé - elle est utilisée pour la transmettre au back-end pour enregistrer ou obtenir le code de vérification graphique 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 du champ time_hi_and_version à 0010   s [19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 du clock_seq_hi_and_reserved à 01 s[8] = s[13 ] =   s[18] = s[23] = "-";

  var uuid = s.join("");
  retourner l'uuid ;
},

 3. Envoyez une demande pour obtenir un code de vérification graphique

//Obtenir le code de vérification graphique
getImageCode(){   //Les données enregistrées dans localStorage existeront toujours tant qu'elles ne sont pas supprimées : Supprimer 1. Supprimer la souris 2. Supprimer le code removeItem   let key = localStorage.getItem("ImageUUID");   //JS peut être directement Jugement sur les variables : 0 null NaN undefined false du type d'origine ""   if(!key){//Générer une s'il n'y a pas de valeur - assurez-vous que la valeur de la clé est unique     key = this.createUuid( );     //Enregistrez la clé dans localStorage     localStorage. setItem("ImageUUID",key);   }

  this.$http.get("/verifyCode/image/" + key).then(res=>{     //console.log(res.data);//string après l'encodage base64     this.base64ImageCode = "data: image/ jpeg;base64,"+res.data;   }).catch(res=>{     this.$message.error("Le système est occupé, veuillez réessayer plus tard !!!【400, 404】") } )   } ,

2. Back-end 

1. Interface avec le traitement métier renvoie au front-end Base64 pour l'épissage au front-end