关于jsp开发验证码的实现

太过爱你忘了你带给我的痛 2022-03-22 02:52 99阅读 0赞

**前言，今天要写的是jsp开发时，需要的验证码功能。**

**1，实现验证码有很多方式，现在还有插件可以使用，今天主要讲的是通过代码实现验证码的功能**

**2，开始**

** **1）首先我们要在前端写好验证码显示的区域

<div>
          验证码：<img  src="<%=request.getContextPath() %>/base2/validate" alt="验证码" id="image" />
          <a href="javascript:reload();"><label>换一张</label></a><br>
          <input type="text" name="yanzhengma"  id="yanzhengma" class="form-control" placeholder="验证码(忽略大小写)" onblur="validateCode();" />
          <label id="spans"></label>
    </div>

2）然后我们需要写好JavaScript,我们需要用到它去获得验证码，以及刷新验证码功能

3）第三步当然就是制作验证码了，我使用的方式是用SpringMvc去访问的后台。当然你也直接可以用servlet

@Controller
    @RequestMapping("/base2")
    public class codechange {
        @RequestMapping("/validate")
        private void validate(HttpServletRequest request, HttpServletResponse response) throws Exception{
            System.out.println("*********************验证码查询进来了*********************************");
    
            BufferedImage bfi = new BufferedImage(75, 35, BufferedImage.TYPE_INT_RGB);
            Graphics g = bfi.getGraphics();
            g.fillRect(0, 0, 75, 35);
    
            //验证码字符范围
            char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".toCharArray();
            Random r = new Random();
            int index;
            StringBuffer sb = new StringBuffer(); //保存字符串
            for (int i = 0; i < 4; i++) {
                index = r.nextInt(ch.length);
                g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
                Font font = new Font("宋体", 30, 30);
                g.setFont(font);
                g.drawString(ch[index] + "", (i * 20) + 2, 23);
                sb.append(ch[index]);
            }
    
            // 添加噪点
           /* int area = (int) (0.02 * 80 * 25);
            for (int i = 0; i < area; ++i) {
                int x = (int) (Math.random() * 80);
                int y = (int) (Math.random() * 25);
                bfi.setRGB(x, y, (int) (Math.random() * 255));
            }*/
    
            //设置验证码中的干扰线
            for (int i = 0; i < 6; i++) {
                //随机获取干扰线的起点和终点
                int xstart = (int) (Math.random() * 80);
                int ystart = (int) (Math.random() * 25);
                int xend = (int) (Math.random() * 80);
                int yend = (int) (Math.random() * 25);
    
                g.drawLine(xstart, ystart, xend, yend);
            }
            HttpSession session = request.getSession();  //保存到session
            session.setAttribute("verificationCode", sb.toString());
            ImageIO.write(bfi, "JPG", response.getOutputStream());  //写到输出流
            System.out.println("验证码制作完毕："+sb.toString());
        }
        @RequestMapping("/check")
        @ResponseBody
        private Map check(HttpServletRequest request, HttpServletResponse response) throws Exception{
            System.out.println("*******************验证码校验开始***************");
            HttpSession session =request.getSession();
            String verificationCode = (String)session.getAttribute("verificationCode");
            System.out.println("**sesion中的验证码为****************"+verificationCode);
            String checkcode = request.getParameter("texts");
            System.out.println("**前端传来中的验证码为****************"+checkcode);
            Map map=new HashMap();
    
            if(checkcode.equalsIgnoreCase(verificationCode)){
                System.out.println("*******************验证码校验结束，相等****************");
                map.put("boo",new String("true"));
                System.out.println("map的值"+map.get("boo"));
            }else{
                System.out.println("*******************验证码校验结束，不相等****************");
                map.put("boo",new String("false"));
            }
             return map;
    
        }
    
    
    
    
    }

**好了，验证码的制作就完成了。看一下效果图，把它直接加在登录页面就行了**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMjgwMTMwNjQw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMjgwMTMwNjQw_size_16_color_FFFFFF_t_70]: /images/20220322/7911f7e00b5143eab1c55594de086734.png