JavaWeb图形验证码

需要用到一个 jar 包

Jar包链接：https://pan.baidu.com/s/1ZvSAn_vjrYq_IuScCU3G_w 密码：9fnb

创建一个生成验证码图片的servlet 主要在35-45行！

 1 package com.it.Servlet;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.annotation.WebServlet;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 
11 import cn.hutool.captcha.CaptchaUtil;
12 import cn.hutool.captcha.LineCaptcha;
13 
14 /**
15  * Servlet implementation class AutoCodeServlet
16  */
17 @WebServlet("/AutoCodeServlet")
18 public class AutoCodeServlet extends HttpServlet {
19     private static final long serialVersionUID = 1L;
20        
21     /**
22      * @see HttpServlet#HttpServlet()
23      */
24     public AutoCodeServlet() {
25         super();
26         // TODO Auto-generated constructor stub
27     }
28 
29     /**
30      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
31      */
32     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
33         // TODO Auto-generated method stub
34         
35         //创建一个宽度 200 高度 100的图形验证码
36         LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
37         
38         //得到生成的验证码字符
39         String code=lineCaptcha.getCode();
40         
41         //将验证码写到会话中
42         request.getSession().setAttribute("cod", code);
43         
44         //response进行输出
45         lineCaptcha.write(response.getOutputStream());
46         
47     }
48 
49     /**
50      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
51      */
52     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
53         // TODO Auto-generated method stub
54         doGet(request, response);
55     }
56 
57 }

创建判断判断验证码的servlet

 1 package com.it.Servlet;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.annotation.WebServlet;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 /**
11  * Servlet implementation class LogServlet
12  */
13 @WebServlet("/LogServlet")
14 public class LogServlet extends HttpServlet {
15     private static final long serialVersionUID = 1L;
16        
17     /**
18      * @see HttpServlet#HttpServlet()
19      */
20     public LogServlet() {
21         super();
22         // TODO Auto-generated constructor stub
23     }
24 
25     /**
26      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
27      */
28     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29         // TODO Auto-generated method stub
30         
31         //得到生成的验证码字符
32         String oldcode=(String) request.getSession().getAttribute("cod");
33         
34         //得到用户输入的验证码
35         String code=request.getParameter("c");
36         
37         //两个验证码进行判断
38         if(!oldcode.equals(code)) {
39             request.setAttribute("cde", "验证码错误！");
40             request.getRequestDispatcher("index.jsp").forward(request, response);
41         }
42         
43         //得到账号 
44         String name=request.getParameter("u");
45         
46         //得到密码
47         String pwd=request.getParameter("p");
48         
49         //判断账号和密码是否成功 成功进行页面跳转
50         if(name.equals("admin")&&pwd.equals("admin")) {
51             response.sendRedirect("logsu.jsp");
52         }
53     }
54 
55     /**
56      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
57      */
58     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
59         // TODO Auto-generated method stub
60         doGet(request, response);
61     }
62 
63 }

创建一个登入的jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5 <html>
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 8 <title>Insert title here</title>
 9 <script type="text/javascript">
10 function changcode(){
11     //点击图片改变验证码
12     /* document.getElementByID("uimg").src; */  //这句话的结果是AutoCodeServlet
13     //给AutoCodeServlet 传一个时间的参数  然后点击是改变验证码
14     document.getElementById("uimg").src=document.getElementById("uimg").src+"?time="+new Date().getTime();
15 }
16 
17 function login(){
18     //点登入
19     
20     //获取账号 密码 验证码
21     var name=document.getElementById("uname").value;
22     var pwd=document.getElementById("upass").value;
23     var code=document.getElementById("ucode").value;
24     location.href="LogServlet?u="+name+"&p="+pwd+"&c="+code;
25 }
26 </script>
27 
28 <style type="text/css">
29 .md{
30 width:300px;
31 height:500px;
32 margin:0px auto;
33 margin-top:200px;
34 }
35 #log{
36 margin-left:50px;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="md">
42 <input type="text" id="uname"/><br><br>
43 <input type="password" id="upass"/><br><br>
44 <input type="text" id="ucode"/><img alt="验证码" src="AutoCodeServlet" id="uimg" onclick="changcode()"><br><br>
45 <span><c:out value="${cde }"></c:out></span>
46 <input type="submit" value="登入" id="log" onclick="login()"/>
47 </div>
48 </body>
49 </html>

创建一个登入成功后跳转的jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 </head>
 9 <body>
10 <h1>欢迎加入！</h1>
11 </body>
12 </html>

效果：