基于MVC用JSP/Servlet实现JPetStore——扩展任务1（验证码功能）

心已赠人 2021-11-09 10:12 235阅读 0赞

## 基于MVC用JSP/Servlet实现JPetStore ##

CSDN下载：[基于MVC用JSP/Servlet实现JPetStore][MVC_JSP_Servlet_JPetStore]

--------------------

1.  添加验证码功能：在用户注册和用户登录模块中添加验证码功能。

--------------------

1.1 界面截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]  
1.2 基本原理  
  先设置字符表即26个字母和各个数字，接下来利用字符表产生随机验证码，同时随机产生120个干扰点（点数适合即可，具体没有特别要求），产生图像，画背景，在不同高度输出验证码的不同字符，设置设置浏览器不要缓存此图片，然后创建内存图像并获得图形，将图像传到客户端，验证码功能即可实现随机显示。

1.3 实现方案  
  用VerificationCode.java实现随机生成数字和字母组成图片的功能，在SigninForm.jsp 和NewAccountForm.jsp页面中添加实现显示验证码和用户输入验证码的功能，再用SignOnServlet和NewAccountServlet分别获取图片和用户输入的数据，判断两个数据是否一致，之后再进行登录功能与注册功能的实现。

1.4 核心代码展示  
VerificationCode.java：

/*实现的核心代码*/
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException { 
    
            response.setContentType("image/jpeg");
            HttpSession session=request.getSession();
            int width=60;
            int height=20;
    
            //设置浏览器不要缓存此图片
            response.setHeader("Pragma", "No-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
    
            //创建内存图像并获得图形上下文
            BufferedImage image=new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
            Graphics g=image.getGraphics();
    
            /* * 产生随机验证码 * 定义验证码的字符表 */
            String chars="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            char[] rands=new char[4];
            for(int i=0;i<4;i++){ 
                int rand=(int) (Math.random() *36);
                rands[i]=chars.charAt(rand);
            }
    
            /* * 产生图像 * 画背景 */
            g.setColor(new Color(0xDCDCDC));
            g.fillRect(0, 0, width, height);
    
            /* * 随机产生120个干扰点 */
    
            for(int i=0;i<120;i++){ 
                int x=(int)(Math.random()*width);
                int y=(int)(Math.random()*height);
                int red=(int)(Math.random()*255);
                int green=(int)(Math.random()*255);
                int blue=(int)(Math.random()*255);
                g.setColor(new Color(red,green,blue));
                g.drawOval(x, y, 1, 0);
            }
            g.setColor(Color.BLACK);
            g.setFont(new Font(null, Font.ITALIC|Font.BOLD,18));
    
            //在不同高度输出验证码的不同字符
            g.drawString(""+rands[0], 1, 17);
            g.drawString(""+rands[1], 16, 15);
            g.drawString(""+rands[2], 31, 18);
            g.drawString(""+rands[3], 46, 16);
            g.dispose();
    
            //将图像传到客户端
            ServletOutputStream sos=response.getOutputStream();
            ByteArrayOutputStream baos=new ByteArrayOutputStream();
            ImageIO.write(image, "JPEG", baos);
            byte[] buffer=baos.toByteArray();
            response.setContentLength(buffer.length);
            sos.write(buffer);
            baos.close();
            sos.close();
    
            session.setAttribute("checkcode", new String(rands));
        }
    
        public void init() throws ServletException { 
            // Put your code here
        }
    }

SigninForm.jsp：

VerificationCode:<input type="text" name="vCode" size="5" maxlength="4"/>
    <a href="signOn"><img border="0" src="verificationCode" name="checkcode"></a>
    
    NewAccountForm.jsp：
    <tr>
       <td>VerificationCode:</td>
       <td>
          <input type="text" name="vCode" size="5" maxlength="4"/>
          <a href="newAccount"><img border="0" src="verificationCode" name="checkcode"></a>
       </td>
    </tr>

SignOnServlet、NewAccountServlet：

//获得输入的验证码值
    String value1=request.getParameter("vCode");
    /*获取图片的值*/
    String value2=(String)session.getAttribute("checkcode");
    Boolean isSame = false;
    /*对比两个值（字母不区分大小写）*/
    if(value2.equalsIgnoreCase(value1)){ 
        isSame = true;
    }
    
    if(isSame){ 
        ……
    //具体登录代码
    ……
        request.getRequestDispatcher(MAIN).forward(request, response);
    }else{ 
        ……
            LogService logService = new LogService();
            String logInfo = logService.logInfo(" ") + strBackUrl + " 注册账号，验证码错误";
            logService.insertLogInfo(account1.getUsername(), logInfo);
        }
        //验证码输入错误后刷新界面，重新生成验证码
        request.getRequestDispatcher(NEWACCOUNTFORM).forward(request, response);
    }

--------------------

完整项目文档及源码请参考：[实验一 基于MVC用JSPServlet实现JPetStore][_MVC_JSPServlet_JPetStore]

--------------------

[MVC_JSP_Servlet_JPetStore]: https://download.csdn.net/download/qq_39564555/11465159
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]: /images/20211109/aa5f4d40750e41d986d910e39a24573d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]: /images/20211109/af91ef33cbfb4aecb4b67f1bb41e883a.png
[_MVC_JSPServlet_JPetStore]: https://github.com/zz2summer/JavaWeb-Application-Developing-Technology/tree/master/%E5%AE%9E%E9%AA%8C%E7%9B%B8%E5%85%B3/%E5%AE%9E%E9%AA%8C%E4%B8%80%20%20%E5%9F%BA%E4%BA%8EMVC%E7%94%A8JSPServlet%E5%AE%9E%E7%8E%B0JPetStore