Maison > Article > Java > Détails du code JavaWeb pour l'implémentation de la fonction de code de vérification (démo)

Détails du code JavaWeb pour l'implémentation de la fonction de code de vérification (démo)

黄舟original: 2017-03-09 10:21:362145parcourir

Dans WEB-APP, il est généralement utilisé dans : la connexion, l'inscription, l'achat d'un certain billet, la vente flash et d'autres scénarios. Tout le monde a été exposé à cette opération de code de vérification. Aujourd'hui, l'éditeur va vous expliquer comment mettre en œuvre. la fonction de code de vérification dans Javaweb via un exemple de code. Ce qui est nécessaire Pour référence, amis

Inutile de dire que le code de vérification est généralement utilisé dans WEB-APP : connexion, inscription, achat d'un certain billet, vente flash et d'autres scénarios. Tout le monde est entré en contact avec eux. On peut dire qu’ils sont de toutes sortes étranges et variés.

Fonction cible DEMO

Saisie de la page de codes de vérification.
Code de vérification de remplacement de page (implémentation asynchrone).
Vérification backend et résultats de vérification de retour.

Démarrer la construction

Page : demo1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
 <head>
 <title>验证示例</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <style type="text/css">
 img {
 width: 87px;
 height: 33px;
 border: 1px solid gray;
 }
 #msg {color: red;} /* 后台返回的验证信息显示为红色 */
 </style>
 </head>
 <body>
 <form action="${pageContext.request.contextPath}/check" method="post" enctype="application/x-www-form-urlencoded">
 验证码：<input type="text" name="code" size="4" maxlength="4" id="code" /> 
 <img id="code-img" src="" alt="验证码" style="display: none;"/> 
 <a href="javascript:void(0)" rel="external nofollow" id="changeCode">看不清？换一张</a> <br/><br/>
 <input type="submit" value="验证"/> <span id="msg">${msg}</span>
 </form>
 </body>
</html>

Explication :

L'attribut href de "Vous ne pouvez pas voir clairement ? Changez-en un" est écrit comme javascript:void(0) pour empêcher l'actualisation de la page. La fonction de remplacement ici est complétée de manière asynchrone par AJAX.

Outil JavaScript : util.js (Pourquoi utiliser du JS natif ? N'hésitez pas~ha)

/**
 * 获取 XMLHttpRequest Object
 * @returns XMLHttpRequest Object
 */
function getXHR() {
 var xmlHttp;
 try { // Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 } catch (e) { // Internet Explorer
 try {
 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try {
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e) {
 alert("Sorry, 您的浏览器不支持 AJAX！");
 return false;
 }
 }
 }
 return xmlHttp;
}

Code JavaScript dans la page

<script type="text/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
 <script type="text/javascript">
 var xhr = getXHR(); // 获得 XMLHttpRequest 对象
 // 页面加载时加载验证码，但验证码初始为隐藏状态
 window.onload=function() {
 // 为 onreadystatechange 事件注册回调函数。由于 xhr 为全局变量，所以注册后就不用管啦
 xhr.onreadystatechange=function() {
 if(xhr.readyState==4 && xhr.status==200) {
 document.getElementById(&#39;code-img&#39;).src="data:image/png;base64,"+xhr.responseText;
 }
 }
 xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
 xhr.send(null);
 }
 // 验证码输入框获得焦点时，验证码状态更改为显示
 document.getElementById(&#39;code&#39;).onfocus=function() {
 document.getElementById(&#39;code-img&#39;).style.display="inline";
 }
 // 异步请求，更换验证码
 document.getElementById(&#39;changeCode&#39;).onclick=function() {
 xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
 xhr.send(null);
 }
 </script>

CaptchaCodeServlet.java qui génère le code de vérification

package com.leo.web.captcha;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.leo.util.ImageUtil;
import cn.dsna.util.images.ValidateCode;
@WebServlet("/captcha/code")
public class CaptchaCodeServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException
 { 
 // 生成验证码（构造参数分别代表：宽度,高度,字符数,干扰线条数）
 ValidateCode code = new ValidateCode(87, 33, 4, 23);
 // 将验证码保存到 session 中，用于验证
 request.getSession().setAttribute("code", code.getCode());
 // 响应返回验证码图片 base64 编码后的数据给浏览器
 response.getWriter().write(ImageUtil.encodeImg2Base64(code.getBuffImg(), "png"));
 }
 @Override
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException
 {
 this.doGet(request, response);
 }
}

Description :

La nouvelle fonctionnalité de Servlet3.0 est utilisée ici - configurer url-pattern avec des annotations (c'est assez amusant à utiliser), ce qui signifie que les projets simples n'ont plus besoin de web.xml , mais Tomcat 7.0 en a besoin. .

Deuxièmement, j'ai utilisé un petit outil pour générer le code de vérification : ValidateCode.jar. L'outil est très simple et vous pouvez l'écrire vous-même si vous ne l'aimez pas. Mais c'est parce qu'il y a trop peu de fonctions, alors j'en ai écrit un autre ImageUtil. Je prévois également d'ouvrir moi-même un outil de code de vérification.

ImageUtil.java

package com.leo.util;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
import sun.misc.BASE64Encoder;
public class ImageUtil {
 /**
 * 将图片二进制数据进行 base64 编码
 * @param bufImg
 * @return base64 编码后的字符串
 */
 public static String encodeImg2Base64(BufferedImage bufImg, String formatName) {
 ByteArrayOutputStream outputStream = null;
 try {
 outputStream = new ByteArrayOutputStream();
 ImageIO.write(bufImg, formatName, outputStream);
 } catch (IOException e) {
 throw new RuntimeException("Base64 编码失败！"+e.getMessage());
 }
 BASE64Encoder encoder = new BASE64Encoder();
 return encoder.encode(outputStream.toByteArray());
 }
 private ImageUtil() {} // 工具类私有化构造方法是常见的做法
}

Explication :

Pourquoi les données binaires de l'image doivent-elles être codées en Base64 ? Car bien que la balise 79d7c95122630a3791db16c5259dc98d puisse définir directement la valeur de l'attribut src sur ${pageContext.request.contextPath}/captcha/code pour demander au servlet correspondant d'obtenir des données binaires pour un affichage direct, la réponse renvoyée dans une requête asynchrone AJAX est xhr.responseText . Lorsque les données sont transmises directement à l'attribut img de la balise src , la visualisation avec Chrome-tool n'entraînera qu'un tas de caractères tronqués qui sont analysés sous forme de texte en binaire, cette étape supplémentaire est donc requise.

Peut-être qu'en tant que débutant, je ne connais pas d'autres techniques pratiques. Mais si vous ne souhaitez pas utiliser l'asynchrone, définir directement img src comme adresse de demande sera l'option la plus simple. Changer le code de vérification n'est rien de plus que d'écouter l'événement img src et de le réinitialiser à l'adresse (en créant). une autre demande).

Informations détaillées : JS analyse les images encodées en Base64 dans le navigateur

package com.leo.web.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/check")
public class CheckServlet extends HttpServlet {
 private static final long serialVersionUID = -6588625852621588221L;
 @Override
 public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException
 {
 String encoding = "UTF-8";
 request.setCharacterEncoding(encoding);
 response.setContentType("text/html;charset="+encoding);
 /* 验证码验证 */
 String inputCode = request.getParameter("code");
 // 获得 session 中的正确验证码
 String realCode = (String) request.getSession().getAttribute("code");
 System.out.println("input: "+inputCode+"\nreal: "+realCode); // 用于 Debug
 if(!(inputCode!=null && realCode!=null &&
 inputCode.equalsIgnoreCase(realCode))) {
 // 若验证码不正确：回到页面并提示错误
 request.setAttribute("msg", "验证码错误!请重新输入");
 request.getRequestDispatcher("/demo1.jsp").forward(request, response);
 return;
 }
 // 验证码正确，响应一句话表示 OK
 response.getWriter().write("验证成功！");
 }
 @Override
 public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException
 {
 doGet(request, response);
 }
}

Remarque :

La méthode doGet() traite initialement les caractères chinois tronqués et l'encodage est défini sur UTF -8. Dans les projets réels, les problèmes de codage sont généralement confiés à un filtre pour obtenir un effet une fois pour toutes.

Effet

Attention ! avertir! ! Contrôle du visage, veuillez évacuer rapidement ! ! !

Écrivez à la fin

Ce qui précède est l'intégralité du contenu de la petite DÉMO du code de vérification JavaWeb. Il est préférable de le soumettre. la vérification également si elle devient asynchrone, quelque chose ne va pas ici. Les amis qui n'ont pas essayé d'ajouter la fonction de code de vérification dans les projets WEB peuvent la démarrer ! Dans les projets réels, des frameworks tels que JQuery sont utilisés pour gérer AJAX, et couplés à une belle page frontale, c'est parfait.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction détaillée de la classe d'outils de code de vérification graphique de génération JavaArticle suivant：Introduction détaillée de la classe d'outils de code de vérification graphique de génération Java

Articles Liés

Voir plus