如何制作一个网页验证码

验证码无处不在，它是防止恶意攻击服务器的一道有力屏障，平时看起来点击就能刷新的，并且图形千奇百怪的验证码看起来很神奇，其实没有那么复杂，接下来与大家分享一下这个小型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.点击图片更换验证码:

如果大家在调试途中有什么问题，欢迎留言也可以私信^ ^

如何制作一个网页验证码相关推荐

在html中怎么制作友情链接,如何制作一个网页链接，用描文本、友情链接交易方式教你如何制作？...
如何制作一个网页链接,用描文本.友情链接交易方式教你如何制作?作为seo优化人员如何运用外界链接开展百度搜索引擎提升?下面和小编一起看看! 1.锚点链接链接应该是有关的优先,百度搜索引擎提升锚点链接 ...
九宫格——用html+css制作一个网页
自用(仅供参考,如有错误欢迎指出) 要求: 1.通过html和css制作一个可以根据页面缩放进行变化的九宫格. 2.并且可以通过手机浏览器访问. 过程: 1.网页制作先不管通过网页访问这一项,先写一 ...
使用Hype物理引擎制作一个网页小游戏（中）
在上一小节中,相信大家跟着小编的教程都能够顺利完成这款网页小游戏的静态场景制作,在本小节中,小编将带着大家完成网页小游戏的动画录制部分. 第一步:从上一节的游戏预览效果可以看到,游戏过程中,上方的矩形 ...
用HTML，CSS，JS制作一个网页计算器
今天分享一个自己做的网页计算器,我个人感觉,虽然不精简,但是应该涉及到的东西都有了,所以分享出来,那我直接上代码了. <html> <head><meta charset ...
css选择器制作一个网页,CSS选择器和做网页思路
这节要做出以下效果的网页其实,做网页就像画画一样,要分为一个一个的区域制作当把基本的区域确定好后,我们才能开始制作网页拿我们今天要做的这种个网页为例,我们可以先把它分为三个区域分别为蓝绿黄区域 ...
如何使用javascript制作一个网页端3D贪吃蛇游戏（附源码及链接）
先来看游戏的最终效果: 3D网页版贪吃蛇游戏下面来具体讲一下如何实现. 该游戏使用Hightopo的SDK制作,总共100多行代码,没有WebGL基础的同学们也可很快掌握. 场景初始化首先,我们对 ...
给自己的网页制作一个网页图标
昨天我在做一个用Node.js搭建一个简单服务器的练习时,遇到了一个问题,就是前端的网页在向后端做数据请求时,除了我们用户所做的基本请求以外,浏览器一般会默认自带的向服务器发送另外一个请求,也就是我们 ...
开网站需要多少钱,制作一个网页需要多少钱
建立商业网站对您的技能和预算来说都是一项挑战.但是,如果您正在寻找快速简便的解决方案,那么找外包公司是一个不错的选择.外包商提供预制模板.友好的可视化编辑器,为客户提供网络托管.域名.客户支持和各种有 ...
尝试自己制作一个网页版的单机冒险岛！！
很多人都玩过游戏,当游戏玩多了,又是否会自己制作游戏的想法?不管你们有没有,反正我有.可惜学艺不精没办法玩成一个完整的游戏.就试着去模仿一个游戏,在执行一些事情的时候决又不知道用什么方法去完成我想要的 ...

如何制作一个网页验证码

如何制作一个网页验证码相关推荐

最新文章

热门文章