Session 案例 验证码登录
1、需求
- 案例需求:
- 访问带有验证码的登录页面login.jsp
- 用户输入用户名,密码以及验证码。
如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误
如果验证码输入有误,跳转登录页面,提示:验证码错误
如果全部输入正确,则跳转到主页success.jsp,显示:用户名,欢迎您
2、分析
将生成的验证码存入session域中
比较登录页面输入的验证码和程序生成的验证码即可
3、编码
【1】编写登录页面
<%--
User: it春和
Date: 2022/2/24 23:19
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script>
// 点击图片切换验证码
window.onload = function () {
document.getElementById("img").onclick = function () {
var date = new Date();
this.src = "/13_session/checkCodeServlet?time=" + date.getTime();
}
}
</script>
</head>
<body>
<form action="/13_session/loginServlet" method="post">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" placeholder="请输入用户名"></input></td>
</tr>
<tr>
<td>密 码</td>
<td><input type="text" name="password" placeholder="请输入密码"></input></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="checkcode" ></input></td>
</tr>
<tr>
<td colspan="2"><img src="/13_session/checkCodeServlet" id="img"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="登录"></td>
</tr>
</table>
</form>
<div><%= request.getAttribute("error") == null ? "" : request.getAttribute("error") %></div>
<div><%= request.getAttribute("login_error") == null ? "" : request.getAttribute("login_error") %></div>
</body>
</html>
【2】将验证码存入session中
CheckCodeServet
package com.zhou.session.web;
/**
* @author it春和
* @create 2022-02-24 14:51
*/
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 {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int width = 100;
int height = 50;
// TODO 1、创建一个对象 在内存中的图片 即验证码图片
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// TODO 2、美化图片
// 1、填充背景色
Graphics graphics = img.getGraphics(); // 画笔对象
graphics.setColor(Color.pink);
graphics.fillRect(0,0,width,height);
// 2、画边框
graphics.setColor(Color.red);
graphics.drawRect