1.介绍

首先需要写一个生成图形验证码的Servlet：
我这里的Servlet为：createImageServlet
然后我们使用登录页面来验证是否能获取图形验证码。
登录后通过Servlet判断用户名密码是否为张三和123（这里简单操作就不连接数据库了）
登录页面：login.jsp
这个页面就是一个表单
判断用户名的Servlet：logCheckServlet
如果用户名密码正确则请求转发回去登录页面输出登录成功
否则请求转发回去输出登录失败
我们还需要做的一件事情就是验证输入的验证码是否与验证码图片内容匹配。匹配错则输出验证码不是正确。
最后一个Servlet是当验证码看不清楚点击切换图片的Servlet即刷新验证码Servlet：changeCheckCodeServlet

2.代码：

生成图形验证码Servlet：
createImageServlet：

package control;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class createImageServlet
 */
public class createImageServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(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中
        session.setAttribute("createImageServlet", new String(rands));
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

登录页面：login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="post" name = "form1">
    用户名<input type = "text" name = "userid" onclick = "mes.innerHTML="value = "${param.userid }"/><br/>
    密&nbsp;&nbsp;&nbsp;码<input type = "password" name = "userpwd" value = "${param.userpwd }"/><br/>
    验证码<input type = "text" name = "checkcode"/>
    <img border="0" src="createImageServlet"/>
    <input type = "submit" value = "换一张" onclick = "form1.action='changeCheckCodeServlet'"/>
    <br/>
    <input type = "submit" value = "登录" onclick = "form1.action = 'logCheckServlet'"/>
    <input type = "reset" value = "重置"/>
    <div id = "mes">${info }</div>
    </form>
</body>
</html>

登录验证Servlet：logCheckServlet

package control;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class logCheckServlet
 */
public class logCheckServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String userid = request.getParameter("userid");
        String userpwd = request.getParameter("userpwd");
        String usercheckcode = request.getParameter("checkcode");
        String info = "";
        HttpSession session = request.getSession();
        String servercheckcode = (String)session.getAttribute("createImageServlet");
        if(!servercheckcode.equalsIgnoreCase(usercheckcode)){
            info = "验证码不正确，请重新输入";
        }else if("张三".equals(userid)&&"123".equals(userpwd)){
            info = "登陆成功";
        }else{
            info = "用户名或密码不正确";
        }
        request.setAttribute("info", info);
        request.getRequestDispatcher("/login.jsp").forward(request,response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

更新验证码Servlet：changeCheckCodeServlet:

package control;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class changeCheckCodeServlet
 */
public class changeCheckCodeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("/login.jsp").forward(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

配置文件：web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>testImage</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>createImageServlet</display-name>
    <servlet-name>createImageServlet</servlet-name>
    <servlet-class>control.createImageServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>createImageServlet</servlet-name>
    <url-pattern>/createImageServlet</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>logCheckServlet</display-name>
    <servlet-name>logCheckServlet</servlet-name>
    <servlet-class>control.logCheckServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>logCheckServlet</servlet-name>
    <url-pattern>/logCheckServlet</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>changeCheckCodeServlet</display-name>
    <servlet-name>changeCheckCodeServlet</servlet-name>
    <servlet-class>control.changeCheckCodeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>changeCheckCodeServlet</servlet-name>
    <url-pattern>/changeCheckCodeServlet</url-pattern>
  </servlet-mapping>
</web-app>

web.xml配置的Servlet映射地址不要随意更改，请保持一致即能实现。

3.实现

如果实现不了欢迎来我的自建博客评论，我的邮箱会自动收到，也可以及时回复你们，关注一下，大家一起学习。
自建博客：http://47.107.118.184

使用Servlet实现图形验证码登录页面

1.介绍

2.代码：

3.实现

猜你喜欢