案例（黑马）—— 登录+验证码

关注

原创最新推荐文章于 2026-06-29 12:44:48 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

用户登录+验证码案例需求：

1、访问带有验证码的登录页面 login.jsp
2、用户输入用户名，密码以及验证码。

如果用户名和密码输入有误，跳转到登录页面，提示:用户名或密码错误
如果验证码输入有误，跳转到登录页面，提示：验证码错误
如果全部输入正确，则跳转到主页 success.jsp，显示：用户名，欢迎您

开发步骤：

1、创建项目，配置文件，导入jar包。

2、编写登录的 login.jsp 页面。

注意：action中的路径为 /虚拟目录/servlet资源路径，

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    
    <script>
        window.onload = function(){
            document.getElementById("img").onclick = function(){
                this.src="/case/checkCodeServlet?time="+new Date().getTime();
            }
        }
    </script>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>

    <form action="/case/loginServlet" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td>验证码</td>
                <td><input type="text" name="checkCode"></td>
            </tr>
            <tr>
                <td colspan="2"><img id="img" src="/case/checkCodeServlet"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="登录"></td>
            </tr>
        </table>
    </form>

    <div><%=request.getAttribute("cc_error") == null ? "" : request.getAttribute("cc_error")%></div>
    <div><%=request.getAttribute("login_error") == null ? "" : request.getAttribute("login_error") %></div>

</body>
</html>

3、创建数据库 userlogin，创建表 user。

4、创建一个包com.qgl.`domain`，创建一个实体类User，实体类User 对应 user 表，该对象对应表中记录。

5、创建一个包com.qgl.`util`，创建数据库连接池对象和连接对象的工具类 JDBCUtils。

6、创建一个包com.qgl.`dao`，创建操作数据库的 UserDao 接口及子包 `impl` 下的 UserDaoImpl 实现类。

上述代码查看：https://blog.youkuaiyun.com/longool/article/details/107007396

7、创建一个包com.qgl.`web.servlet`，创建处理登录数据的 loginServelt 类，验证码产生 CheckCodeServlet 类

package com.qgl.web.servlet;

import com.qgl.dao.UserDao;
import com.qgl.dao.impl.UserDaoImpl;
import com.qgl.domain.User;
import org.apache.commons.beanutils.BeanUtils;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置编码
        req.setCharacterEncoding("utf-8");
        // 获取用户输入的验证码
        String checkCode = req.getParameter("checkCode");
        // 获取请求参数,封装user对象
        Map<String, String[]> pm = req.getParameterMap();
        User loginUser = new User();
        try {
            BeanUtils.populate(loginUser,pm);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        HttpSession session = req.getSession();
        // 得到系统产生的验证码
        String checkCode_session = (String) session.getAttribute("checkCode_session");
        // 获取后删除session中的验证码
        session.removeAttribute("checkCode_session");
        //4.调用UserDao的login方法
        UserDao dao = new UserDaoImpl();
        User user = dao.login(loginUser);

        // 判断验证码是否正确
        if (checkCode_session!=null && checkCode_session.equalsIgnoreCase(checkCode)){
            // 判断用户名与密码是否一致，即判断返回的user对象
            if(user == null){
                //登录失败
                req.setAttribute("login_error","用户名或密码错误");
                // 转发到登录页面，转发不需要虚拟目录
                req.getRequestDispatcher("login.jsp").forward(req,resp);
            }else{
                //登录成功
                //存储数据
                session.setAttribute("user",user.getUsername());
                //重定向
                resp.sendRedirect(req.getContextPath()+"/success.jsp");
            }
        }else{
            // 验证码不一致，存储提示信息到req
            req.setAttribute("cc_error","验证码错误");
            // 转发到登录页面，转发不需要虚拟目录
            req.getRequestDispatcher("login.jsp").forward(req,resp);
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

package com.qgl.web.servlet;

import javax.imageio.ImageIO;
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 java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    private int width = 100;
    private int height = 50;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 创建一个对象，用来在内存中画图
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        StringBuilder sb = new StringBuilder();

        // 美化图片
        // 填充矩形
        Graphics g = image.getGraphics();   // 获取画笔
        g.setColor(Color.PINK);             // 设置画笔颜色
        g.fillRect(0,0,width,height);
        // 画边宽
        g.setColor(Color.BLUE);
        g.drawRect(0,0,width-1,height-1);
        // 随机画字符
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        Random rd = new Random();
        // 画干扰线
        for (int i = 1; i <8 ; i++) {
            int x1 = rd.nextInt(width);
            int x2 = rd.nextInt(width);
            int y1 = rd.nextInt(height);
            int y2 = rd.nextInt(height);
            g.drawLine(x1,x2,y1,y2);
        }
        // 画验证码
        g.setColor(Color.BLACK);
        for (int i = 1; i <=4; i++) {
            int index = rd.nextInt(str.length());
            char c = str.charAt(index);
            sb.append(c);
            g.drawString(c+"",width/5*i,height/2);
        }
        // 将验证码保存到session中
        String checkCode_session = sb.toString();
        req.getSession().setAttribute("checkCode_session",checkCode_session);
        // 输出图片到页面展示
        ImageIO.write(image,"jpg",resp.getOutputStream());
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

8、验证码、用户名和密码都正确后的重定向页面 success.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1><%=request.getSession().getAttribute("user")%>,欢迎您</h1>
</body>
</html>