Este artigo compartilha o código específico para a exibição da função de código de verificação de implementação Springmvc para sua referência. O conteúdo específico é o seguinte
Vejamos as renderizações primeiro:
Ideias:
Primeiro de tudo, o código de verificação é uma imagem, uma imagem composta por letras aleatórias, números, padrões etc., então essa imagem definitivamente não é consertada, ela deve ser criada aleatoriamente pelo back -end. O frontend usa o SRC da IG para acessar continuamente esse método de fabricação.
Etapa 1: Escrita da página do front-end
O login usa o método AJAX, por isso é usado para chamar o evento de clique. A imagem do código de verificação é colocada na tag A para facilitar o clique e a alteração do código de verificação. A imagem é exibida usando o atributo SRC do IMG. Como está usando o SpringMVC, o método de plano de fundo é chamado para usar a ação.
<form> <div id = "login_tip"> login do administrador </div> <div> <input type = "text" id = "user_code" name = "user_code" stailholder = "inserir conta"> </div> <div> <input type = "senha" "" user_account "/" "user_account" <input type = "text" id = "verificationCode" name = "verificationCode" Parholder = "Por favor, digite o código de verificação"> <a href = "javascript: void (0);" " rel = "Nofollow externo" onclick = "verificationCode ()"> <img id = "randCodeImage" src = "verificationCode/generate.action"/> </a> </div> <div style = "float: esquerda;"> <input Type = "" name = "" ida = "Sub_btn" OnClick; id = "verification_code"> <b> </b> </div> </morm>
Etapa 2: Escreva o código JS
Como o login usa AJXA, o login de back -end verificará alguns dados e, se estiver incorreto, ele retornará os dados à página de login. Aqui, explicamos por que um número aleatório precisa ser adicionado após chamar o método para gerar o código de verificação. O número aleatório aqui e o nome do parâmetro desse número aleatório podem ser gravados à vontade, e o back -end não faz nenhuma operação. Este é um método para impedir que o navegador seja armazenado em cache ao chamar o mesmo método, e o erro ao clicar na imagem ou entrada do código de verificação não será atualizado automaticamente e a imagem será alterada.
<script type = "text/javascript"> function login () {// é para enviar $ .ajax ({type: 'post', url: 'uase/query.action', // data: $ ('#logininputform'). Serialize (), dados: {'user_code': $ ("#"#userTear '). : $ ("#user_account"). Window.Location.href = 'uase/login.action'; "VerificaçãoCode/Gereate.action? Uuuy ="+rad); } / ***Código de verificação Refresh* / Função VerificationCode () {var rad = Math.floor (Math.random ()*Math.pow (10, 8)); // uuuy é um nome de parâmetro aleatório, que não será processado pelo back -end. Seu objetivo é evitar o navegador lendo o link em cache $ ("#randcodeImage"). Att ("src", "verificationCode/generate.action? Uuuy ="+rad); } </script>Etapa 3: Escreva a classe de controle do controlador de fundo
O método principal é o Código de Verificação, que usa alguns métodos de produção de números aleatórios e algumas classes auxiliares. Você pode usar todos eles. Como usei códigos de verificação que podem alterar o tipo, usei uma classe de ferramenta pública escrita por mim mesma.
@RequestMapping ("/verificationCode") Classe pública Verificação VerificationCodeController estende httpServlet {private estático final serialversionuid = 1L; / *** O nome usado aqui para armazenar a sessão*/ String final estática privada session_key_of_rand_code = "randcode"; // TODO para unificar a constante/ ** * */ private estático final int conting = 200; / ** * Defina o tamanho gráfico (largura) */ private estático final int largura = 105; / ** * Defina o tamanho gráfico (altura) */ estático privado Int Hight = 35; / ***O comprimento da linha de interferência = 1,414*Linha de linha*/ private Static Final Int LineWidth = 1; @RequestMapping (value = "/generate", método = {requestmethod.post, requestmethod.get}) public void VerificationCode (httpServletReQuest Solicy, httpservletResponse) lança servleTexception, ioexception {// set the não cache Respons.SetheTer (Prag "; Response.setheader ("Cache-Control", "No-Cache"); Response.SetDateHeader ("Expira", 0); // Response.SetContentType ("Image/png"); // Crie imagem na memória final bufferImage imagem = new bufferImage (largura, altura, bufferImage.type_int_rgb); // Obtenha o contexto gráfico Final Graphics2D Graphics = (Graphics2d) image.getGraphics (); // Defina os gráficos coloridos em segundo plano.setColor (color.white); // --- 1.Color.White é White Graphics.FillRect (0, 0, largura, altura); // preencher difração // defina a cor da borda // graphics.setColor (getrandcolor (100, 200)); // --- 2. Isso é para definir a cor com um tipo numérico. O modo de cor refere -se ao uso de três cores primárias: vermelho, verde e azul. As outras cores são obtidas através do ajuste das três cores. Os valores dessas três cores primários são 0 ~ 255 gráficos.DrawRect (0, 0, largura - 1, altura - 1); Random Random = novo Random (); // gera aleatoriamente linhas de interferência, tornando o código de autenticação na imagem não fácil de ser detectado por outros programas para (int i = 0; i <contagem; i ++) {graphics.setColor (getrandcolor (150, 200)); // --- 3. final int x = random.nextInt (largura - largura de linha - 1) + 1; // Verifique se ele está desenhado dentro da fronteira final int y = aleatom.nextInt (altura - largura de linha - 1) + 1; final int xl = random.nextInt (largura de linha); final int yl = aleatória.NextInt (Linha de linha); Graphics.Drawline (x, y, x + xl, y + yl); } // Pegue o código de autenticação gerado aleatoriamente (número de 4 dígitos) final String ResultCode = exctracTrandCode (); for (int i = 0; i <resultadocode.length (); i ++) {// exibe o código de autenticação na imagem e a cor da função de chamada é a mesma. Talvez porque a semente esteja muito próxima, você só pode gerar diretamente // graphics.setColor (nova cor (20 + aleatória.nextint (130), 20 + aleatória // .nextint (130), 20 + aleatom.nextint (130))); // Definir gráficos de cores da fonte.SetColor (color.black); // Definir estilo font //graphics.setFont(new font ("Arial Black", font.italic, 18)); Graphics.setFont (New Font ("Times New Roman", Font.Bold, 24)); // Defina caracteres, espaçamento de caracteres, Sistema de margem superior.out.print (resultadocode.charat (i)); Graphics.DrawString (String.valueof (resultadocode.charat (i)), (23 * i) + 8, 26); } System.out.println ("saída direta:"+resultadocode); // Salvar o código de autenticação no sessão request.getSession (). SetAttribute (session_key_of_rand_code, resultadocode); // A imagem entra em efeito graphics.dispose (); // em saída a imagem para a página imageio.write (imagem, "jpeg", resposta.getOutputStream ()); } / *** @return Código aleatório* / private String exctracTrandCode () {final String RandCodeType = Resourceutil.GetRandCodeType (); int randCodElength = Integer.parseint (Resourceutil.getRandCodElength ()); if (RandCodeType == NULL) {return RandCodeImageenum.number_char.generateSTST (RandCodElength); } else {switch (randCodEType.Charat (0)) {case '1': return randCodeImageenum.number_char.generateSt (randCodElength); case '2': retornar randcodeImageenum.lower_char.generatestest (RandCodElength); case '3': retornar randcodeImageenum.upper_char.generatestest (RandCodElength); case '4': retornar randcodeImageenum.letter_char.generatestest (RandCodElength); case '5': retornar randCodeImageenum.all_char.generatestest (RandCodElength); case '5': retornar randCodeImageenum.all_char.generatestest (RandCodElength); Padrão: return randCodeImageenum.number_char.generatestest (RandCodElength); }}}} /*** Descrição: Gere cores diferentes de acordo com o número fornecido* @param, é para definir a cor com um tipo numérico. O modo de cor refere -se ao uso de três cores primárias: vermelho, verde e azul. Os valores dessas três cores primários são de 0 ~ 255 através do ajuste das três cores. Os valores dessas três cores primários são 0 ~ 255. * @param Isso é para definir a cor com um tipo numérico. O modo de cor refere -se ao uso de três cores primárias: vermelho, verde e azul. Os valores dessas três cores primários são obtidos pelo ajuste das três cores é de 0 ~ 255. * @return Descrição: Retornar cor*/ color privado getrandcolor (int fc, int bc) {// obtém a gama de cores aleatórias final aleatório final Random = new Random (); if (fc> 255) {fc = 255; } if (bc> 255) {bc = 255; } final int r = fc + aleatoriamente.nextInt (BC - FC); final int g = fc + aleatoriamente.nextInt (bc - fc); final int b = fc + aleatoriamente.nextInt (bc - fc); retornar nova cor (R, G, B); } /** * Verification code auxiliary class*/ enum RandCodeImageEnum { /** * Mixed string*/ ALL_CHAR("0123456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), // Remove the lowercase l and o characters that are not easy to distinguish; /** * Character */ LETTER_CHAR("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), /** * Lowercase letter */ LOWER_CHAR("abcdefghijklmnopqrstuvwxyz"), /** * Number */ NUMBER_CHAR("0123456789"), /*** Upper_char ("abcdefghijklmnopqrstuvwxyz"); / *** String a ser gerada*/ private String Charstr; / ** * @param charstr */ private randcodeImageenum (string final Charstr) {this.charstr = Charstr; } / *** Código de verificação aleatória da produção** @param codElength* Comprimento do código de verificação* Código de verificação @return* / public string generatestS (final int codElength) {final StringBuffer sb = new StringBuffer (); Random Random = novo Random (); Final String SourCestr = getCharstr (); for (int i = 0; i <codELength; i ++) {sb.append (SourSest.Charat (Random.NextInt (SourSest.Length ()))); } return sb.toString (); } / ** * @return the {@link #charstr} * / public string getcharstr () {return charstr; }}}Etapa 4: Escreva classes de ferramentas comuns
/*** Classe de ferramenta do parâmetro do projeto**/public class Resourceutil {private Static Final ResourceBundle Bundle = java.util.resourcebundle.getbundle ("sysconfig"); / *** Obtenha o comprimento do código aleatório** @Return o comprimento do código aleatório*/ public static string getRandCodElength () {return pundle.getString ("randcodelength"); } / *** Obtenha o tipo do código aleatório** @return o tipo do código aleatório* / public static string getRandCodEType () {return pundle.getString ("randCodeType"); }}Etapa 5: config.properties
RandCodElength = 4RandCodeType = 5
Etapa 6: Aqui você terminou, você pode tentar o efeito