Este artículo comparte el código específico para la pantalla del código de verificación de implementación SpringMVC para su referencia. El contenido específico es el siguiente
Veamos primero las representaciones:
Ideas:
En primer lugar, el código de verificación es una imagen, una imagen compuesta de letras aleatorias, números, patrones, etc., por lo que esta imagen definitivamente no se fija, debe ser creada aleatoriamente por el backend. El frontend utiliza el SRC de IG para acceder continuamente a este método de fabricación.
Paso 1: redacción de la página front-end
Iniciar sesión utiliza el método AJAX, por lo que se utiliza para llamar al evento de clic. La imagen del código de verificación se coloca en la etiqueta A para facilitar hacer clic y cambiar el código de verificación. La imagen se muestra utilizando el atributo SRC de IMG. Debido a que está usando SpringMVC, se llama al método de fondo para usar la acción.
<Form> <div id = "login_tip"> Administrator Iniciar sesión </div> <div> <input type = "text" id = "user_code" name = "user_code" placeholder = "Por favor, ingrese la cuenta"> </div> <div> <input type = "contraseña" id = "user_account" name = "use_account" PLACELY = "Introd <input type = "text" id = "verificationCode" name = "verificationCode" PlaceHolder = "Por favor, ingrese el código de verificación"> <a href = "javaScript: void (0);" rel="external nofollow" onclick="VerificationCode()"> <img id="randCodeImage" src="VerificationCode/generate.action"/> </a> </div> <div style="float:left;"> <input type="button" name="button" id="sub_btn" onclick="login()" value="Login"/> </div> <div id = "Verificación_code"> <b> </b> </div> </form>
Paso 2: Escribir código JS
Debido a que el inicio de sesión usa AJXA, el inicio de sesión de backend verificará algunos datos, y si es incorrecto, devolverá los datos a la página de inicio de sesión. Aquí explicamos por qué se debe agregar un número aleatorio después de llamar al método para generar el código de verificación. El número aleatorio aquí y el nombre del parámetro de este número aleatorio se pueden escribir a voluntad, y el backend no realiza ninguna operación. Este es un método para evitar que el navegador se almacene en caché al llamar a un mismo método, y el error al hacer clic en la imagen o la entrada del código de verificación no se actualizará automáticamente y la imagen se cambiará.
<script type = "text/javaScript"> function login () {// Esto es para enviar $ .AJAX ({type: 'post', url: 'uase/query.action', // data: $ ('#loginputform'). Serialize (), data: {'user_code': $ ("#us_code"). Val (), 'User_aCount' : $ ("#user_account"). Val (), 'VerificationCode': $ ("#VerificationCode"). Val (),}, DataType: 'Json', Success: Function (OBJ) {var rad = Math.floor (Math.random () * Math.Pow (10, 8)); Window.location.href = 'uase/login.action'; "VerificationCode/Generate.Action? UuUy ="+Rad); } / ***Código de verificación Refresh* / function VerificationCode () {var rad = math.floor (math.random ()*math.pow (10, 8)); // uuuy es un nombre de parámetro aleatorio, que no será procesado por el backend. Su propósito es evitar que el navegador lea el enlace almacenado en caché $ ("#randcodeImage"). Attr ("src", "verificationCode/generate.action? Uuuy ="+rad); } </script>Paso 3: Escriba la clase de control del controlador de fondo
El método principal es VerificationCode, que utiliza algunos métodos de producción de números aleatorios y algunas clases auxiliares. Puedes usarlos todos. Debido a que utilicé códigos de verificación que pueden cambiar el tipo, utilicé una clase de herramienta pública escrita por mí mismo.
@RequestMapping ("/VerificationCode") Public Class VerificationCodeController extiende httpservlet {private static final long SerialVersionUid = 1l; / *** El nombre utilizado aquí para almacenar la sesión*/ privada estática final de cadena session_key_of_rand_code = "randcode"; // TODO para unificar la constante/ ** * */ private static final int count = 200; / ** * Defina el tamaño gráfico (ancho) */ private static final int width = 105; / ** * Defina el tamaño gráfico (altura) */ privado estático final int altura = 35; / ***La longitud de la línea de interferencia = 1.414*linewidth*/ private static final int linewidth = 1; @RequestMapping (valor = "/generar", método = {requestmethod.post, requestMethod.get}) public void verificationCode (httpservletRequest request, httpServletResponse respuesta) lanza servletException, ioexception {// establece la página en no cache. Respuesta.setheader ("Cache-Control", "No-Cache"); respuesta.setDateHeader ("expiras", 0); // Response.setContentType ("Image/PNG"); // Crear imagen en la memoria Final BufferedImage Image = new BufferedImage (ancho, altura, bufferedimage.type_int_rgb); // Obtenga el contexto gráfico Graphics2D Graphics = (Graphics2d) Image.getGraphics (); // establecer el fondo de color gráfico.setColor (color.white); // --- 1.color.white es gráfico blanco. // rellenar difracción // establecer el color del borde // gráfico.setColor (getRandColor (100, 200)); // --- 2. Esto es para establecer el color con un tipo numérico. El modo de color se refiere al uso de tres colores primarios: rojo, verde y azul. Los otros colores se obtienen a través del ajuste de los tres colores. Los valores de estos tres colores primarios son 0 ~ 255 gráficos. final aleatorio aleatorio = new Random (); // genera aleatoriamente líneas de interferencia, lo que hace que el código de autenticación en la imagen no sea fácil de detectar por otros programas para (int i = 0; i <count; i ++) {Graphics.setColor (getRandColor (150, 200)); // --- 3. final int x = random.nextint (ancho - linewidth - 1) + 1; // Asegúrese de que esté dibujado dentro del borde final int y = random.nextint (altura - linewidth - 1) + 1; final int xl = random.nextint (linewidth); final int yl = random.nextint (linewidth); Graphics.Drawline (x, y, x + xl, y + yl); } // tome el código de autenticación generado aleatoriamente (número de 4 dígitos) cadena final resultCode = exctractrandCode (); for (int i = 0; i <resultcode.length (); i ++) {// Muestra el código de autenticación en la imagen, y el color de la función de llamada es el mismo. Tal vez porque la semilla está demasiado cerca, por lo que solo puede generar directamente // Graphics.SetColor (nuevo color (20 + Random.NextInt (130), 20 + Random // .NextInt (130), 20 + Random.NextInt (130))); // establecer gráficos de color de fuente.setColor (color.black); // establecer estilo de fuente //graphics.setfont(new Font ("Arial Black", Font.italic, 18)); Graphics.setFont (New Font ("Times New Roman", Font.Bold, 24)); // establecer caracteres, espaciado de caracteres, margen superior System.out.print (resultCode.Charat (i)); Graphics.DrawString (String.ValueOf (resultCode.Charat (i)), (23 * i) + 8, 26); } System.out.println ("Salida directa:"+ResultCode); // Guardar el código de autenticación en la sesión de sesión.getSession (). SetAttribute (session_key_of_rand_code, resultCode); // La imagen lleva efecto Graphics.dispose (); // emitir la imagen a la página ImageIO.Write (imagen, "JPEG", Response.getOutputStream ()); } / *** @return Código aleatorio* / private String exctracTrandCode () {String final randCodeType = resourceUtil.getRandCodeType (); int randCodeLength = Integer.ParseInt (resourceUtil.getRandCodelength ()); if (randCodeType == null) {return randCodeMageenum.number_char.Generatestr (randCodelength); } else {switch (randCodeType.charat (0)) {case '1': return randCodeImageenum.number_char.Generatestr (randCodelength); caso '2': return randCodeImageenum.lower_char.Generatestr (randCodelength); caso '3': return randCodeImageenum.upper_char.Generatestr (randCodelength); caso '4': return randCodeImageenum.letter_char.Generatestr (randCodelength); caso '5': return randCodeImageenum.all_char.Generatestr (randCodelength); caso '5': return randCodeImageenum.all_char.Generatestr (randCodelength); Valor predeterminado: return randCodeImageenum.number_char.Generatestr (randCodelength); }}}} /*** Descripción: Genere diferentes colores según el número dado* @param Esto es para establecer el color con un tipo numérico. El modo de color se refiere al uso de tres colores primarios: rojo, verde y azul. Los valores de estos tres colores primarios son 0 ~ 255 a través del ajuste de los tres colores. Los valores de estos tres colores primarios son 0 ~ 255. * @param Esto es para establecer el color con un tipo numérico. El modo de color se refiere al uso de tres colores primarios: rojo, verde y azul. Los valores de estos tres colores primarios se obtienen mediante el ajuste de los tres colores son 0 ~ 255. * @return Descripción: return color*/ private color getrandcolor (int fc, int bc) {// Obtenga el rango de colores aleatorios finales aleatorios = 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); int b = fc + random.nextint (BC - fc); devolver nuevo color (R, G, B); } / *** Código de verificación clase auxiliar* / enum randCodeMageEnum { / *** mixed String* / all_char ("0123456789abcdefghijkmnpqrstuvwxyzyzabcdefghiJklmnopqrstuvwxyz"), // eliminar los mínimos l y los personajes que no son fáciles de ser fáciles; / ** * carácter */ lett_char ("abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"),/ ** * Lower Letter */ Lower_Char ("ABCDefghijklmnopqrstuvwxyz"),/ ** * Number */ Number_Char ("" 012349999) /*** Upper_char ("abcdefghijklmnopqrstuvwxyz"); / *** cadena para generarse*/ private string charstr; / ** * @param charstr */ private randCodeMageEnum (final de cadena charstr) {this.charstr = charstr; } / *** Código de verificación aleatoria de producción** @param CodeLength* Longitud del código de verificación* @@return Código de verificación* / public String Generatestr (final int codeLength) {final StringBuffer sb = new StringBuffer (); final aleatorio aleatorio = new Random (); Final String SourCestr = getCharStr (); for (int i = 0; i <codeLength; i ++) {sb.append (soursestr.charat (random.nextint (soursestr.length ()))); } return sb.ToString (); } / ** * @return el {@link #Charstr} * / public String getCharstr () {return Charstr; }}}Paso 4: Escribir clases de herramientas comunes
/*** Clase de herramienta de parámetros del proyecto**/public class Resourceutil {private static final ResourceBundle Bundle = java.util.resourceBundle.getBundle ("sysconfig"); / *** Obtenga la longitud del código aleatorio** @return la longitud del código aleatorio*/ public static string getRandCodeLength () {return bundle.getString ("randCodelength"); } / *** Obtenga el tipo del código aleatorio** @return el tipo del código aleatorio* / public static string getRandCodeType () {return Bunddle.getString ("randCodeType"); }}Paso 5: config.properties
randCodelength = 4randCodeType = 5
Paso 6: Aquí terminaste, puedes probar el efecto