Cet article partage le code spécifique pour la fonction de code de vérification d'implémentation SpringMVC Affichage de votre référence. Le contenu spécifique est le suivant
Regardons d'abord les rendus:
Idées:
Tout d'abord, le code de vérification est une image, une image composée de lettres aléatoires, de nombres, de modèles, etc., donc cette image n'est certainement pas fixe, elle doit être créée au hasard par le backend. Le frontend utilise le SRC d'IG pour accéder en continu cette méthode de fabrication.
Étape 1: Écriture de la page frontale
Login utilise la méthode AJAX, il est donc utilisé pour appeler l'événement Click. L'image du code de vérification est placée dans la balise A pour faciliter le clic et la modification du code de vérification. L'image est affichée à l'aide de l'attribut SRC d'IMG. Parce qu'il utilise SpringMVC, la méthode d'arrière-plan est appelée à utiliser l'action.
<form> <div id = "Login_tip"> Administrator Login </ div> <v> <input type = "text" id = "user_code" name = "user_code" placeholder = "s'il vous plaît entrez le compte"> </ div> <v> <input type = "mot de passe" id = "user_account" name = "user_Account" lisholder = "Entrez le mot de passe"> </ / div> <v> "DIV_AREA"> PlaceHolder = " <input type = "text" id = "VerificationCode" name = "VerificationCode" placeholder = "Veuillez entrer le code de vérification"> <a href = "javascript: void (0);" rel = "external nofollow" onclick = "VerificationCode ()"> <img id = "randcodeImage" src = "VerificationCode / generate.action" /> </a> </ div> <div style = "float: left;"> <entrée = "Button" name = "Button" id = "sub_btn" onclick = "log ()" id = "Verification_code"> <b> </b> </div> </ form>
Étape 2: Écrivez le code JS
Étant donné que la connexion utilise AJXA, Backend Login vérifiera certaines données, et si elle est incorrecte, elle renvoie les données à la page de connexion. Ici, nous expliquons pourquoi un nombre aléatoire doit être ajouté après avoir appelé la méthode pour générer le code de vérification. Le nombre aléatoire ici et le nom du paramètre de ce nombre aléatoire peuvent être écrits à volonté, et le backend ne fait aucune opération. Il s'agit d'une méthode pour empêcher le navigateur d'être mis en cache lors de l'appel d'une même méthode, et l'erreur en cliquant sur l'entrée d'image ou de code de vérification ne sera pas automatiquement actualisée et l'image sera modifiée.
<script type = "text / javascript"> function login () {// Ceci est pour soumettre $ .ajax ({type: 'post', url: 'uase / query.action', // data: $ ('# loginInputform'). Serialize (), data: {'user_code': $ ("# user_code"). : $ ("# user_account"). Val (), 'VerificationCode': $ ("# VerificationCode"). Val (),}, DataType: 'JSON', Success: Function (obj) {var rad = math.floor (math.random () * math.pow (10, 8)); Windows.location.href = 'Uase / Login.Action'; "VerificationCode / Generate.Action? UUUY =" + rad); $ ("# VerificationCode"). Val (""). } / ** * Code de vérification Refresh * / fonction VerificationCode de vérification () {var rad = math.floor (math.random () * math.pow (10, 8)); // UUUY est un nom de paramètre aléatoire, qui ne sera pas traité par le backend. Son objectif est d'éviter le navigateur lisant le lien mis en cache $ ("# randcodeImage"). Att ("src", "VerificationCode / generate.action? UuUy =" + rad); } </ script>Étape 3: Écrivez la classe de contrôle du contrôleur d'arrière-plan
La méthode principale est VerificationCode, qui utilise certaines méthodes de production de nombres aléatoires et certaines classes auxiliaires. Vous pouvez tous les utiliser. Parce que j'ai utilisé des codes de vérification qui peuvent modifier le type, j'ai utilisé une classe d'outils public écrite par moi-même.
@RequestMapping ("/ VerificationCode") Classe publique VerificationCodeController étend httpServlet {private static final long SerialVersionUID = 1l; / ** * Le nom utilisé ici pour stocker la session * / private static final String session_key_of_rand_code = "randcode"; // TODO pour unifier la constante / ** * * / / private static final int count = 200; / ** * Définissez la taille graphique (largeur) * / private static final int largeth = 105; / ** * Définissez la taille graphique (hauteur) * / private statique final int hauteur = 35; / ** * La longueur de la ligne d'interférence = 1,414 * LineWidth * / private static final int linewidth = 1; @Requestmapping (value = "/ generate", méthode = {requestMethod.post, requestMethod.get}) public void vérificationcode (httpservletRequest, httpServletResponse réponse) lance Servlexception, ioException {// définir la page pour ne pas avoir cache.sethEader ("pragma", "no-cache"); Response.sethEader ("Cache-Control", "No-cache"); réponse.setDateHeader ("expire", 0); // réponse.setContentType ("image / png"); // Créer une image dans la mémoire final bufferedImage image = new BufferedImage (largeur, hauteur, bufferedImage.type_int_rgb); // Obtenez le contexte graphique final graphics2d graphics = (graphics2d) image.getGraphics (); // Définit les Graphics Color Graphics.SetColor (Color.White); // --- 1.Color.White est White Graphics.filrect (0, 0, largeur, hauteur); // remplit la diffraction // Définir la couleur de bordure // graphics.setColor (getrandcolor (100, 200)); // --- 2. Il s'agit de définir la couleur avec un type numérique. Le mode couleur fait référence à l'utilisation de trois couleurs primaires: le rouge, le vert et le bleu. Les autres couleurs sont obtenues par le réglage des trois couleurs. Les valeurs de ces trois couleurs primaires sont 0 ~ 255 graphiques.Drawrect (0, 0, largeur - 1, hauteur - 1); aléatoire final aléatoire = nouveau aléatoire (); // génère de manière aléatoire des lignes d'interférence, ce qui rend le code d'authentification dans l'image qui n'est pas facile à détecter par d'autres programmes pour (int i = 0; i <count; i ++) {graphics.setColor (getrandColor (150, 200)); // --- 3. final int x = random.nextint (largeur - LineWidth - 1) + 1; // Assurez-vous qu'il est dessiné dans la bordure final int y = random.nextint (hauteur - LineWidth - 1) + 1; final int xl = random.nextint (linewidth); final int yl = random.nextint (linewidth); graphics.Drawline (x, y, x + xl, y + yl); } // Prenez le code d'authentification généré au hasard (numéro à 4 chiffres) final string resultCode = exctractrandcode (); pour (int i = 0; i <resultCode.length (); i ++) {// Affichez le code d'authentification dans l'image, et la couleur de la fonction d'appel est la même. Peut-être parce que la graine est trop proche, vous ne pouvez donc générer directement // graphics.setColor (nouvelle couleur (20 + random.nextint (130), 20 + random // .nextint (130), 20 + random.nextint (130))); // Set Font Color Graphics.SetColor (Color.Black); // Set Font Style //graphics.setfont(New Font ("Arial Black", Font.Italic, 18)); graphics.setfont (new Font ("Times New Roman", Font.Bold, 24)); // Définir les caractères, l'espacement des caractères, le système de marge supérieure.out.print (resultecode.charat (i)); Graphics.Drawstring (String.ValueOf (resultCode.Charat (i)), (23 * i) + 8, 26); } System.out.println ("Output Direct:" + ResultCode); // Enregistrez le code d'authentification dans session request.getSession (). SetAttribute (session_key_of_rand_code, resultCode); // L'image prend effet Graphics.Dispose (); // sortit l'image de la page imageo.write (image, "jpeg", réponse.getOutputStream ()); } / ** * @return Code aléatoire * / private String exctractrandcode () {final String randCodeType = ResourceUtil.getRandCodeType (); int randCodeLength = Integer.ParseInt (ResourceUtil.getRandCodeLength ()); if (randCodeType == null) {return randCodeImageEnum.number_char.Generatestr (randCodeLength); } else {switch (randCodeType.Charat (0)) {case '1': return randcodeImageENum.number_char.Generatestr (randCodeLength); case '2': return randcodeImageENum.Lower_Char.Generatestr (RandCodeLength); case '3': return randcodeImageENum.upper_char.Generatestr (randCodeLength); case '4': return randcodeImageENUM.Letter_Char.Generatestr (RandCodeLength); case '5': return randcodeImageENum.all_char.generatestr (randCodeLength); case '5': return randcodeImageENum.all_char.generatestr (randCodeLength); Par défaut: return randcodeImageEnum.number_char.Generatestr (randCodeLength); }}}} / ** * Description: Générez différentes couleurs en fonction du numéro donné * @param Ceci est pour définir la couleur avec un type numérique. Le mode couleur fait référence à l'utilisation de trois couleurs primaires: le rouge, le vert et le bleu. Les valeurs de ces trois couleurs primaires sont 0 ~ 255 à travers le réglage des trois couleurs sont obtenues. Les valeurs de ces trois couleurs primaires sont de 0 ~ 255. * @param Il s'agit de définir la couleur avec un type numérique. Le mode couleur fait référence à l'utilisation de trois couleurs primaires: le rouge, le vert et le bleu. Les valeurs de ces trois couleurs primaires sont obtenues par le réglage des trois couleurs sont de 0 ~ 255. * @return Description: Retour Couleur * / Private Color GetrandColor (int fc, int bc) {// Obtenez la plage donnée de couleurs aléatoires aléatoire final aléatoire = new Random (); if (fc> 255) {fc = 255; } if (bc> 255) {bc = 255; } final int r = fc + random.nextint (bc - fc); final int g = fc + random.nextint (bc - fc); final int b = fc + random.nextint (bc - fc); retourner une nouvelle couleur (r, g, b); } / ** * CODE DE VÉRIFICATION CLASSE AUXiliaire * / enum randcodeImageENUM {/ ** * mixte String * / all_char ("0123456789abcdefghijkmnpqrstuvwxyzabcdefghijklmnopqrstuvwxyz;), // supprimer les caractères ininformatiques l et o les caractères qui ne sont pas faciles pour être décernés;), // supprimer les caractères LIGNACULS L et O / ** * Caractère * / Letter_CHAR ("ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ"), / ** * LETTRE DE TRAVAIL * / LAIS / ** * Upper_Char ("ABCDEFGHIJKLMNOPQRSTUVWXYZ"); / ** * chaîne à générer * / String privé Charstr; / ** * @param charstr * / private randcodeImageENUM (Final String Charstr) {this.charstr = charstr; } / ** * Production Code de vérification aléatoire * * @param CodeLength * Longueur du code de vérification * @return Code de vérification * / public String generatestr (final int CodeLength) {final stringBuffer sb = new StringBuffer (); aléatoire final aléatoire = nouveau aléatoire (); Sourcestr de chaîne finale = getCharstr (); for (int i = 0; i <codeLength; i ++) {sb.append (Soursestr.Charat (random.nextint (Soursestr.Length ()))); } return sb.toString (); } / ** * @return le {@link #charstr} * / public string getCharstr () {return charstr; }}}Étape 4: Écrivez des classes d'outils communs
/ ** * Classe d'outils de paramètre de projet * * / classe publique ResourceUtil {private static final ResourceBundle bundle = java.util.resourcebundle.getBundle ("sysconfig"); / ** * Obtenez la longueur du code aléatoire * * @return la longueur du code aléatoire * / chaîne statique publique getrandCodeLength () {return bundle.getString ("randCodeLength"); } / ** * Obtenez le type du code aléatoire * * @return le type du code aléatoire * / chaîne statique publique getRandCodeType () {return bundle.getString ("randcodeType"); }}Étape 5: config.properties
RandCodeLength = 4RandCodeType = 5
Étape 6: Ici, vous avez terminé, vous pouvez essayer l'effet