前言
为了防止恶意软件对“登录”等需要验证码的功能进行暴力破解，网站通常会使用验证码来增加安全性。验证码通常由一些经处理后的不规则的数字，字母及线条组成，其中线条是为了防止机器人解析验证码的真实内容。这个案例用的知识比较基础，需要用到servlet、Ajax、awt来实现。效果如下图所示，鼠标在输入框失去焦点时，触发校验函数进行验证：
哈哈哈，这个√和×有点丑啊，凑合看，反正没问题。
一.编写登录页login.jsp
本步主要完成以下的功能：
1.编写登录界面基本的元素
2.编写js程序，监听blur事件，输入框失去焦点时触发的函数
3.在校验函数中用ajax将用户输入的验证码传递给负责比对验证码的servlet
4.servlet对比，如果正确，则会返回√的图片，不正确会返回错×的图片
5.ajax将结果渲染到网页上
login.jsp的代码如下：
<%-- Created by IntelliJ IDEA. User: 害恶细君 Date: 2021/10/20 Time: 12:39 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>login</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function (){ //通过验证码输入框的blur事件来触发函数 $("#checkCodeId").blur(function (){ let checkCode=$("#checkCodeId").val(); //在服务器端对验证码进行校验 $.post("CheckCodeServlet", "checkCode="+checkCode, function (result) { //根据返回的图片路径显示不同的提示图片 let resultHTML=$("<img src='"+result+"'height='115px' width='15px'/>"); $("#result").html(resultHTML); }) }) }); //刷新验证码 function reload($img){ $img.attr("src","img.jsp?t="+(new Date().getTime())); } </script> </head> <body> <table border="0"> <tr> <td>验证码</td> <td><input type="text" name="checkCode" id="checkCodeId" size="4"></td> <!--点击图片，重新加载验证码,img为验证码图片--> <td><a href="javascript:reload($('img'))"><img src="img.png"/></a></td> <!--验证码校验结果的图片--> <td id="result"></td> <td>看不清? 点击验证码更换一张</td> </tr> </table> </body> </html>
二.绘制验证码
MIME（Multipurpose Internet Mail Extension）多用途因特网邮件扩展协议。是描述信消息内容的因特网标准，用于设置文本，图像，音频，视频，以及其他应用程序专用的数据类型。开发者可以通过jsp中page指令的contentType属性设置页面的MIME类型。例如：contentType="image/jpeg"表示页面会被JPEG等图片格式。
下面通过设置MIME将一个jsp渲染成jpeg图片，用于生成验证码：
1.先编写img.jsp。代码如下：
<%@ page import="java.awt.*" %> <%@ page import="java.util.Random" %> <%@ page import="java.awt.image.BufferedImage" %> <%@ page import="javax.imageio.ImageIO" %><%-- Created by IntelliJ IDEA. User: 害恶细君 Date: 2021/10/20 Time: 16:06 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>img</title> </head> <body> <!--定义一些全局方法--> <%! //随机生成颜色 public Color getColor(){ Random random=new Random(); int r=random.nextInt(256); int g=random.nextInt(256); int b=random.nextInt(256); return new Color(r,g,b); } //生成验证码(随机生成4位数字) public String getNum(){ int ran= (int) (Math.random()*9000+1000); return String.valueOf(ran); } %> <% //禁用浏览器缓存，防止验证码不及时被加载 response.setHeader("pragma","no-cache"); response.setHeader("cache-control","no-cache"); response.setDateHeader("expires",0); //设置验证码图片：宽80px，gao30px，颜色类型为RGB BufferedImage image=new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB); //创建画笔对象graphics Graphics graphics=image.getGraphics(); //填充验证码图片的背景色：从（0，0）开始填充，填充宽度为80px,填充高度为30px graphics.fillRect(0,0,80,30); /* *在验证码图片上随机生成60条干扰线段 * 线段的起始位置为（xBegin,yBegin）,结束位置为（xEnd，yEnd） */ for (int i=0;i<60;i++){ Random random=new Random(); int xBegin=random.nextInt(80); int yBegin=random.nextInt(30); int xEnd=random.nextInt(xBegin+10); int yEnd=random.nextInt(yBegin+10); //设置线条的颜色 graphics.setColor(getColor()); //绘制线条 graphics.drawLine(xBegin,yBegin,xEnd,yEnd); } //设置验证码的字体格式：字体为serif，粗体，18像素 graphics.setFont(new Font("serif",Font.BOLD,18)); //设置验证码的字体颜色为黑色 graphics.setColor(Color.black); //获取验证码 String checkcode=getNum(); //验证码的各个数字之间增加一些间隔（空格） StringBuffer sb=new StringBuffer(); for (int i = 0; i < checkcode.length(); i++) { sb.append(checkcode.charAt(i)+" "); } //从坐标（15，20）开始绘制验证码 graphics.drawString(sb.toString(),15,20); //将验证码的值放入session中，供后续使用 session.setAttribute("CHECKCODE",checkcode); //将验证码绘制成JPEG格式 ImageIO.write(image,"jpeg",response.getOutputStream()); out.clear(); //验证码会被其他页面所引用 //JPEG格式的验证码生成后，会作为<img/>元素的src属性被其他页面引用 out=pageContext.pushBody(); %> </body> </html>
三.编写Servlet
在这个servlet里校验用户输入的验证码
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.io.IOException; import java.io.PrintWriter; @WebServlet("/CheckCodeServlet") public class CheckCodeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req,resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取前端输入的验证码 String checkCodeClient=req.getParameter("checkCode"); String result= "imgs/wrong.png"; //获取服务器端session中的验证码 String checkcodeServlet= (String) req.getSession().getAttribute("CHECKCODE"); if (checkCodeClient.equals(checkcodeServlet)){ result="imgs/right.png"; } //以IO的方式，返回result值（提示图片路径） resp.setContentType("text/html;charset=UTF-8"); PrintWriter pw =resp.getWriter(); pw.write(result); pw.flush(); pw.close(); } }
okk，终于写完了，没想到居然写了快六千字，代码量有点小多啊。
接下来我要学后端框架了，先从Mybatis开始吧，那我们下期见，拜拜！
![杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]](https://ucc.alicdn.com/pic/developer-ecology/xsqfoqm5pyibg_09d05e48e8364b9588701e9347609934.gif?x-oss-process=image/resize,h_160,m_lfit)
![node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘](https://ucc.alicdn.com/3rkpnpbboddyy/developer-article1611150/20240924/6d75171d53ae4374be44c9d91a3bd8f0.png?x-oss-process=image/resize,h_160,m_lfit)
