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>
