验证码无处不在，它是防止恶意攻击服务器的一道有力屏障，平时看起来点击就能刷新的，并且图形千奇百怪的验证码看起来很神奇，其实没有那么复杂，接下来与大家分享一下这个小型JavaWeb项目。
编译器：IntelliJ IDEA
操作系统：win7
使用语言：Java
JDK版本：1.8
首先给大家看一下项目的主要构造：
看起来并不复杂吧^ ^
那么开始，首先大家配置一下Tomcat，我这里用的是Tomcat9，如果之前没配过Tomcat的话，下面我给大家简述一下（配好的忽略这一部分）：
1.点击Run下的Edit Configurations...
点开后会看到这个加号，点进去：
点这个Local（这里我们用本地服务）
点进去后：
我们需要注意以上三部分。
1部分是你Tomcat的名字，看你怎么改，我就老老实实写的tomcat9。
2部分需要点+号然后点击Artifact,右边的Application context我填的是/CheckCode/(关乎到你在网页打开项目时的url后缀)，如下：
3部分最好设置成热部署，方便测试，如下：
之后在File里找到Project Structure点开，点击Dependencies，再点击右边的+号，选择JARs，找到你Tomcat文件的目录，加进去就好了，好了之后是这样的：
因为这个项目里要用到Tomcat里的jasper.jar包，所以我们右击上面的蓝色部分，之后点击Edit，再点击加号，在libs目录下找到jasper.jar，加进去就OK了。
如果你看你的Tomcat目录下有jasper
,那就没问题啦。
以上为止，Tomcat就配置好了，下面我们来说其他需要准备的部分。
我们最好下载一个
脚本文件丢到web目录下，当然直接写链接也可以，但是没网你就不能测试啦。（jquery简单来说就是简化网页的后台开发，如果大家不太了解，可以自行百度学习，后面我可能也会写相关的文章来介绍这个JavaScript 库）
给个下载地址：http://www.jq22.com/jquery-info122
以上为止，我们就准备好环境了，下面来看具体代码。
-----------------------------------------------------------------------------------------------------------------------
第一部分：
img.jsp
<%!
//随机产生颜色值
public Color getColor() {
Random ran = new Random();
ran.nextInt(256);//0-255随机数
int r = ran.nextInt(256);
int g = ran.nextInt(256);
int b = ran.nextInt(256);
return new Color(r, g, b);//(red,green,blue) 0-255
}
//产生验证码值
public String getNum() {
//Math.random:[0-1)随机小数
int ran = (int) (Math.random() * 9000) + 1000;
return String.valueOf(ran);
}
%>
<%
//禁止缓存，防止验证码过期
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
response.setHeader("Expires", "0");//过期时间设置为0，就是立马过期的意思
//绘制验证码
BufferedImage image = new BufferedImage(80, 30, BufferedImage.TYPE_INT_RGB);
//画笔
Graphics graphics = image.getGraphics();
graphics.fillRect(0, 0, 80, 30);//填充矩形
graphics.setFont( new Font("seif",Font.BOLD,20));
//绘制验证码(黑色)
graphics.setColor(Color.BLACK);
String checkCode = getNum();//
StringBuffer sb = new StringBuffer();
for (int i = 0; i < checkCode.length(); i++) {
sb.append(checkCode.charAt(i) + " ");//验证码的每一位数字后都加空格
}
//绘制干扰线条
for (int i = 0; i < 30; i++) {
Random ran = new Random();
int xBrgin = ran.nextInt(80);
int yBegin = ran.nextInt(30);
int xEnd = ran.nextInt(xBrgin + 10);
int yEnd = ran.nextInt(yBegin + 10);
graphics.setColor(getColor());
//绘制线条
graphics.drawLine(xBrgin, yBegin, xEnd, yEnd);
}
graphics.drawString(sb.toString(), 15, 20);//绘制验证码
//将验证码真实值 保存在session中 供使用时比较真实性
session.setAttribute("CHECKCODE", checkCode);
//准备完毕，产生图片
ImageIO.write(image, "jpeg", response.getOutputStream());
//关闭
out.clear();
out = pageContext.pushBody();//<input type="image" src="xxx" />
%>
我相信聪明的大家看下来应该都比较顺，代码里的注释我也尽量写详尽了。
里面要注意的点就是Graphics这个画笔类，大家感兴趣可以ctrl+b研究一下它，这个项目里会用它画干扰线条，填充矩形，绘制验证码，就可以了。
第二部分：
Index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
function reloadCheckImg() {//让鼠标悬停在验证码时出现手型的空函数
$("img").attr("src", "img.jsp?t=" + (new Date().getMilliseconds()));//把img选中，使其src变成新的值,注意后面的?t=是为了让编译器知道两次的img.jsp不同
//强制刷新，每次传一个唯一的参数，服务端就知道是一个新的img.jsp了/
}
$(document).ready(function () {
$("#checkcodeId").blur(function () {
var $checkcode = $("#checkcodeId").val();
//校验:文本框中输入的值 发送到服务端
//服务端: 获取文本框输入的值，和真实验证码图片中的值相比，并返回验证结果
$.post(
"CheckCodeServlet",//服务端地址
"checkcode=" + $checkcode,
function (result) {//
alert(result);
}
);
})
})
</script>
<title>验证码</title>
</head>
<body>
<input type="text" name="checkcode" id="checkcodeId" size="4"/>
<!--验证码-->
<a href="javascript:reloadCheckImg();"><img src="img.jsp"/> </a>
</body>
</html>
以上部分就是用来配置前端网页的，同样注释我也尽量写详尽了。
需要注意的点：
1.<script type="text/javascript" src="jquery-3.2.1.min.js">
这里的src就是为什么让大家之前准备一个.js脚本文件，当然直接写链接也可以。
2.function reloadCheckImg() {//让鼠标悬停在验证码时出现手型的空函数
$("img").attr("src", "img.jsp?t=" + (new Date().getMilliseconds()));//把img选中，使其src变成新的值,注意后面的?t=是为了让编译器知道两次的img.jsp不同
//强制刷新，每次传一个唯一的参数，服务端就知道是一个新的img.jsp了/
}
这个算是个小技巧了，getMilliseconds()也可以写成getSeconds()，我怕刷新太快出问题所以写成毫秒了，这里你只要获取一个在实时变化的变量就可以，不一定是时间。
3.虽然里面有JQ语法，但也不难理解，有JS基础的应该都看得懂。
第三部分：
CheckCodeServlet.java
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String resultTip ="验证失败！";
//获取用户输入的验证码
String checkcodeClient = request.getParameter("checkcode");
//获取真实验证码值
String checkcodeServer = (String) request.getSession().getAttribute("CHECKCODE");
if (checkcodeServer.equals(checkcodeClient)) {
resultTip ="验证成功！";
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();//输出流
writer.write(resultTip);
writer.flush();
writer.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
这个没什么讲的，就是简单的servlet，和jsp联动实现功能。
感觉唯一需要注意的就是IDEA在生成servlet时会自动生成@WebServlet(name = ".....")
这时我们不要用它这个name；直接修改成@WebServlet("/CheckCodeServlet")
即可
具体测试：
1.输入正确验证码:
2.输入错误验证码:
3.点击图片更换验证码:
如果大家在调试途中有什么问题，欢迎留言也可以私信^ ^
8222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
