1、看效果：
2、源码：
✿ 登录logon1.jsp代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(){
//重新设置一下<img/> 标签的src属性【当心缓存-解决：每次请求携带不同的参数【就是一次新的请求】，通过new Date添加随机数(产生一个新的时间)】
//解决浏览器缓存问题：若请求资源不变，不再发送新的请求
document.getElementById("randomcode").src="/randomcode?"+new Date().getTime();
}
</script>
</head>
<body>
<%--注销登录太过于简单了，没必要为它单独书写一个servlet，写在jsp即可【就一行代码】 --%>
<%
//销毁session
session.invalidate();
%>
<span style="color:red">${errorMsg}</span>
<form action="/randomLogon" method="post">
<br/>
<%--添加点击事件【onclick】--javaScript --%>
红包口令:<input type="text" name="randomcode" size="6" maxlength="6" required autocomplete="off"/>
<input type="submit" value="领红包"/><br/><br/>
<img src="/randomcode" alt="验证码" title="换一张" style="cursor:pointer" id="randomcode" onclick="change()"/></br>
</form>
</body>
</html>
✿ RandomCodeServlet .java代码：
package randomcode;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import java.util.UUID;
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;
/**
* 验证码
* 验证码原理：【利用java.util.UUID 生成随机码【截取5位】】
* 将一份验证码存储到session中【用于判断验证码是否输入正确】
* 一份绘制到图片中【给用户看】
*
*
*/
@WebServlet("/randomcode")
public class RandomCodeServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//生成随机数的红包口令
String randomCode = UUID.randomUUID().toString().substring(0, 6);
//将验证码存储到session中
req.getSession().setAttribute("RANDDOMCODE_IN_SESSION", randomCode);
//将验证码存储到图片
//1、创建图片对象
int width = 420;
int height = 700;
int imageType = BufferedImage.TYPE_INT_RGB;
BufferedImage image = new BufferedImage(width, height, imageType);
//2、画板【背景对象--设置画笔背景颜色、形状（矩形）】
Graphics g = image.getGraphics();//画笔
g.setColor(Color.RED);
g.fillRect(0, 0, 420, height);//画板（红包的画板）
//3、将随机数画入图片中
g.setColor(Color.BLACK);
Font font = new Font("宋体", Font.BOLD + Font.ITALIC, 50);
g.setFont(font);
g.drawString(randomCode, 130, 330);//画上字符串（红包口令）
//4、干扰点（作为点缀）
g.setColor(Color.GRAY);
Random r = new Random();
for(int i = 0; i < 100; i++) {
g.fillRect(r.nextInt(width), r.nextInt(height), 2, 2);
}
//5、销毁画笔
g.dispose();
//6、将图片对象以流的方式保存到页面
ImageIO.write(image, "jpg", resp.getOutputStream());
}
}
✿ RandomLogonServlet.java代码：
package randomcode;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 随机码验证登录servlet
*
*/
@WebServlet("/randomLogon")
public class RandomLogonServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
//接收
// String name = req.getParameter("name");
// String password = req.getParameter("password");
String randomcode = req.getParameter("randomcode");
//session中的randomcode
String randomcode_in_session = (String) req.getSession().getAttribute("RANDDOMCODE_IN_SESSION");
//处理
if(!randomcode.equalsIgnoreCase(randomcode_in_session)) {
// req.setAttribute("errorMsg", "亲，验证码错误或过期!");
req.setAttribute("errorMsg", "亲，红包口令错误或过期!");
// req.getRequestDispatcher("/randomcode/logon.jsp").forward(req, resp);
req.getRequestDispatcher("/logon1.jsp").forward(req, resp);
return;
}
//删除验证过的验证码，避免表单重复提交
req.getSession().removeAttribute("RANDDOMCODE_IN_SESSION");
req.setAttribute("rightMsg", "恭喜发财!");
req.getRequestDispatcher("/newyear.jsp").forward(req, resp);
System.out.println("验证码正确");
}
}
✿ RandomImgServlet.java代码：
package randomcode;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import java.util.UUID;
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;
/**
* 验证码
* 验证码原理：【利用java.util.UUID 生成随机码【截取5位】】
* 将一份验证码存储到session中【用于判断验证码是否输入正确】
* 一份绘制到图片中【给用户看】
* @author Huangyujun
*
*/
@WebServlet("/randomimg")
public class RandomImgServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//生成随机数的红包口令
String[] randomCode = {"新年快乐", "万事如意","欢天喜地", "恭贺新禧",
"吉祥如意", "喜气洋洋", "步步高升","龙凤呈祥",
"一帆风顺", "万事大吉", "财源滚滚", "年年有余"};
//将验证码存储到图片
//1、创建图片对象
int width = 1600;
int height = 800;
int imageType = BufferedImage.TYPE_INT_RGB;
BufferedImage image = new BufferedImage(width, height, imageType);
//2、画板【背景对象--设置画笔背景颜色、形状（矩形）】
Graphics g = image.getGraphics();//画笔
g.setColor(Color.BLACK);
g.fillRect(0, 0, width, height);//画板（红包的画板）
//3、将随机数画入图片中
g.setColor(Color.RED);
Font font = new Font("宋体", Font.BOLD + Font.ITALIC, 100);
g.setFont(font);
int x = (int) (Math.random() * 12);
g.drawString(randomCode[x], width/2 - 250, 330);//画上祝福语
//4、干扰点（作为点缀）
g.setColor(Color.WHITE);
Random r = new Random();
for(int i = 0; i < 100; i++) {
g.fillRect(r.nextInt(width), r.nextInt(height), 4, 4);
}
//5、销毁画笔
g.dispose();
//6、将图片对象以流的方式保存到页面
ImageIO.write(image, "jpg", resp.getOutputStream());
}
}
✿ newyear.jsp 代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<span style="color: red">${rightMsg}</span>
<img src="/randomimg" alt="验证码" id="randomimg" onclick="change()"/></br>
<script>
function change(){
document.getElementById("randomimg").src="/randomimg?"+new Date().getTime();
}
setInterval(() => {change()}, 100);
</script>
</body>
</html>