Dieser Artikel teilt den spezifischen Code für die FRINGMVC -Implementierungs -Verifizierungscode -Funktion für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Schauen wir uns zuerst die Renderings an:
Ideen:
Erstens ist der Verifizierungscode ein Bild, ein Bild, das aus zufälligen Buchstaben, Zahlen, Mustern usw. besteht. Dieses Bild ist also definitiv nicht behoben, es muss zufällig vom Backend erstellt werden. Der Frontend verwendet IGs SRC, um diese Produktionsmethode kontinuierlich zuzugreifen.
Schritt 1: Front-End-Seite Schreiben
Login verwendet die AJAX -Methode, sodass das Klickereignis aufgerufen wird. Das Bild des Verifizierungscodes wird in das A -Tag platziert, um das Klicken und Ändern des Verifizierungscodes zu erleichtern. Das Bild wird mit dem SRC -Attribut von IMG angezeigt. Da es SpringMVC verwendet, wird die Hintergrundmethode aufgerufen, um Aktionen zu verwenden.
<form> <div id = "login_tip"> administrator login </div> <div> <Eingabe type = "text" id = "user_code" name = "user_code" placeHolder = "Bitte eingeben"> </div> <div> <Eingabe type = "kennwort" id = "user_account" namens "user_account" uswadrig " <input type = "text" id = "verificationCode" name = "verificationCode" placeholder = "Bitte geben Sie den Verifizierungscode ein"> <a href = "javaScript: void (0);" rel = "externer nofollow" onclick = "verifikationCode ()"> <img id = "randcodeImage" src = "VerificationCode/generieren.Action"/> </a> </div> <div. div styL = "float: links;"> <Eingabe type "type" name = "button =" id = "sub_btn" aufclick = "login ()" Login ". id = "verifikation_code"> <b> </b> </div> </form>
Schritt 2: Schreiben Sie JS -Code
Da Login AJXA verwendet, wird die Backend -Anmeldung einige Daten überprüft. Wenn sie falsch sind, gibt es die Daten auf die Anmeldeseite zurück. Hier erklären wir, warum eine Zufallszahl hinzugefügt werden muss, nachdem die Methode aufgerufen wurde, um den Verifizierungscode zu generieren. Die Zufallszahl hier und der Parametername dieser Zufallszahl kann nach Belieben geschrieben werden, und das Backend führt keine Operation aus. Dies ist eine Methode, um zu verhindern, dass der Browser beim Aufrufen einer gleichen Methode zwischengespeichert wird, und der Fehler beim Klicken auf das Bild- oder Verifizierungscodeeingang wird nicht automatisch aktualisiert und das Bild wird geändert.
<script type = "text/javaScript"> Funktion login () {// Dies soll $ .ajax ({type: 'post', url: 'uase/query.action', // data: $ ('#loginInputform'). Serialize (), Data: {user_code ': $ ("########################################usw."). : $ ("#user_account"). Val (), 'VerificationCode': $ ("#VerificationCode"). Val (),}, DataType: 'JSON', Erfolg: Funktion (obj) {var rad = math.floor (math.random () * math.pow (10, 8)); window.location.href = 'uase/login.action'; "VerificationCode/generieren.Action? UUuy ="+rad); } / ***Verifizierungscode aktualisiert* / Funktion verifizierungCode () {var rad = math.floor (math.random ()*math.pow (10, 8)); // UuUy ist ein zufälliger Parametername, der nicht vom Backend verarbeitet wird. Sein Zweck ist es, den Browser zu vermeiden, der den zwischengespeicherten Link $ ("#RandcodeImage") liest ("Src", "VerificationCode/generieren.Action? UuUy ="+rad); } </script>Schritt 3: Schreiben Sie die Kontrollkurs für Hintergrundregler
Die Hauptmethode ist VerificationCode, die einige Produktionsmethoden für Zufallszahlen und einige Hilfsklassen verwendet. Sie können sie alle verwenden. Da ich Bestätigungscodes verwendet habe, die den Typ ändern können, habe ich eine von mir selbst geschriebene öffentliche Werkzeugklasse verwendet.
@RequestMapping ("/verificationCode") public class verifizierungCodeController erweitert HttpServlet {private statische endgültige lange Serialversionuid = 1L; / *** Der hier zum Speichern der Sitzung verwendeten Namen*/ private statische String -String -Sitzung_Key_of_rand_code = "Randcode"; // todo, um die Konstante zu vereinen/ ** * */ private statische endgültige int count = 200; / ** * Definieren Sie die grafische Größe (Breite) */ private statische endgültige int width = 105; / ** * Definieren Sie die grafische Größe (Höhe) */ private statische Endhöhe = 35; / ***Die Länge der Interferenzlinie = 1,414*Zeilenbreite*/ privat statische endgültige int linewidth = 1; @RequestMapping (value = "/generate", method = {requestMethod.post, requestMethod.get}) public void verifizierungCode (httpServletRequest Request, httpServletResponde-Antwort) löst ServletException, IOException {// Setzen Sie die Seite, die keine Cache-Response ("PRAGMA". response.setheader ("cache-control", "no-cache"); response.setDateHeader ("läuft", 0); // response.setContentType ("Bild/png"); // Bild im Speicher Final BufferedImage Image = new bufferedImage (Breite, Höhe, bufferedimage.type_int_rgb); // Erhalten Sie den Grafikkontext Final Graphics2d Graphics = (Graphics2D) image.getGraphics (); // Setzen Sie die Hintergrundfarbe Graphics.setColor (color.white); // --- 1.Color.White ist weiße Grafik.FillRect (0, 0, Breite, Höhe); // Beugung füllen // Die Randfarbe stellen // Graphics.setColor (getrandcolor (100, 200)); // --- 2. Dies soll die Farbe mit einem numerischen Typ einstellen. Der Farbmodus bezieht sich auf die Verwendung von drei Primärfarben: Rot, Grün und Blau. Die anderen Farben werden durch die Einstellung der drei Farben erhalten. Die Werte dieser drei Primärfarben betragen 0 ~ 255 Grafiken. Drawrect (0, 0, Breite - 1, Höhe - 1); endgültig zufällig = new random (); // generiert zufällig Interferenzzeilen, wodurch der Authentifizierungscode im Bild nicht einfach von anderen Programmen für (int i = 0; i <count; i ++) {graphics.setColor (getrandcolor (150, 200)) erkannt wird; // --- 3. endgültig int x = random.nextint (width - linewidth - 1) + 1; // Stellen Sie sicher, dass es innerhalb der Grenze endgültig ist. endgültig int xl = random.Nextint (Zeilenbreite); endgültig int yl = random.Nextint (Linienbreite); Graphics.Drawline (x, y, x + xl, y + yl); } // Nehmen Sie den zufällig generierten Authentifizierungscode (4-Grad-Nummer) Final String resultCode = exctractrandcode (); für (int i = 0; i <resultcode.length (); i ++) {// Zeigen Sie den Authentifizierungscode im Bild an, und die Farbe der Anruffunktion ist gleich. Vielleicht, weil der Saatgut zu nahe ist, können Sie nur direkt // Graphics.setColor (neue Farbe (20 + random.Nextint (130), 20 + Random // .Nextint (130), 20 + Random.Nextint (130))); // Schriftart Color Graphics einstellen.setColor (color.black); // Schriftstil setzen //graphics Graphics.Setfont (neue Schriftart ("Times New Roman", Font.bold, 24)); // Zeichen festlegen, Zeichenabstand, oberes Margin -System.out.print (resultcode.charat (i)); Graphics.DrawString (String.ValueOf (resultcode.charat (i)), (23 * i) + 8, 26); } System.out.println ("Direktausgabe:"+resultcode); // Speichern Sie den Authentifizierungscode in Sitzungsanforderung.getSession (). SetAtTribute (Session_key_of_rand_code, resultcode); // Das Bild nimmt Grafiken wirksam. // das Bild auf die Seite imageio.write ausgeben (Bild, "JPEG", response.getOutputStream ()); } / *** @return Random Code* / private String exctractrandCode () {Final String randCodetype = ressourceUtil.getrandCodetype (); int randcodelength = integer.parseInt (ressourceUtil.getRandCodelength ()); if (randCodetype == null) {return randcodeImageenum.number_char.generatestryest (randcodelength); } else {switch (randCodetype.charat (0)) {case '1': retCodeImageEenum return.number_char.generatestr (randcodelength); Fall '2': retCodeImageenum zurückgeben. Fall '3': retCodeImageenum zurückgeben. Fall '4': RetCodeImageenum zurückgeben. Letter_char.Generatestry (RandCodelength); Fall '5': RetCodeImageenum zurückgeben. Fall '5': RetCodeImageenum zurückgeben. Standard: Return randcodeImageenum.number_char.Generatestre (randcodelength); }}}} /*** Beschreibung: Generieren Sie verschiedene Farben gemäß der angegebenen Nummer* @param Dies soll die Farbe mit einem numerischen Typ einstellen. Der Farbmodus bezieht sich auf die Verwendung von drei Primärfarben: Rot, Grün und Blau. Die Werte dieser drei Primärfarben betragen 0 ~ 255 durch die Einstellung der drei Farben. Die Werte dieser drei Primärfarben betragen 0 ~ 255. * @param Dies soll die Farbe mit einem numerischen Typ einstellen. Der Farbmodus bezieht sich auf die Verwendung von drei Primärfarben: Rot, Grün und Blau. Die Werte dieser drei Primärfarben werden durch die Einstellung der drei Farben erhalten, 0 ~ 255. * @Return Beschreibung: Return Color*/ private Farbe getrandcolor (int fc, int bc) {// den angegebenen Bereich von zufälligen Farben endgültig randoms randal = new randal (); if (fc> 255) {fc = 255; } if (bc> 255) {bc = 255; } endgültig int r = fc + random.nextint (bc - fc); endgültig int g = fc + random.nextint (bc - fc); endgültig int b = fc + random.nextint (bc - fc); Neue Farbe zurückgeben (r, g, b); } / *** Verifizierungscode Hilfsklasse* / enum randcodeImageenum { / *** gemischte String* / All_char ("0123456789abcdefghijkMnpqrstuvwxyzabcdefghijklMnopqrstuvwxyz"), // // // // // / / / / / / // / / / / / // / / // / / / / / // / / / / // / / / / / / / Entrege the locky -lyta -lyta -lyta -l und oh -usabweil), und O und Overcling, das nicht leichte Ausstrich entfernen "). /** * Zeichen */letter_char ("abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"),/** * Kleinbuchstaben */lower_char ("AbcDefghijklMnopqrstuvwxyz"),/** */** */** number Number_char ("0123456789"), /*** ober_char ("abcdefghijklmnopqrstuvwxyz"); / *** String, die generiert werden soll*/ private String charstr; / ** * @Param CHARSTR */ private randcodeImageenum (endgültiger String charstr) {this.charstr = charstr; } / *** Produktion zufälliger Verifizierungscode** @param codelength* Länge des Verifizierungscodes* @return Verification Code* / public String generatestres (endgültige int codelength) {endgültig stringBuffer sb = new StringBuffer (); endgültig zufällig = new random (); endgültiger String Sourcestr = getCharstr (); für (int i = 0; i <codelength; i ++) {sb.Append (saursest.charat (random.Nextint (saursestr.Length ()))); } return sb.toString (); } / ** * @return die {@link #charstr} * / public String getCharstr () {return canstr; }}}Schritt 4: Schreiben Sie gemeinsame Werkzeugkurse
/*** Projektparameter -Werkzeugklasse***/public class Resourceutil {private statische endgültige Resourcebundle bündel = java.util.resourcebundle.getBundle ("sysconfig"); / *** Erhalten Sie die Länge des zufälligen Codes** @return die Länge des Zufallscode*/ public static String getRandCodelength () {return bündel.getString ("randcodelength"); } / *** den Typ des Zufallscodes abrufen** @return Der Typ des Zufallscode* / public static String getRandCodetype () {return bündel.getString ("randCodetype"); }}Schritt 5: config.Properties
randcodelength = 4randCodetype = 5
Schritt 6: Hier sind Sie fertig, Sie können den Effekt ausprobieren