我们以前在浏览网页进行登录操作时,是不是经常预见验证码的验证,当然不是指手机短信上的,这篇文是介绍在网页中,验证码如何绘制,后续的文章会通过小项目来说明如何进行验证。
首先来说一下实现的步骤:
1、需要一个界面用来显示,可以使用html,也可以使用jsp;
2、在servlet文件中绘制;
3、实例化缓冲区图片对象,指定宽度、高度、类型等;
4、获取画笔对象(绘图的图形库),设置颜色和显示的区域等;
5、绘制验证码--可以使用随机数,循环4次。还可以对随机数的格式进行设置;
6、绘制干扰线;
7、输出。
- 页面就简单的进行实现,大家多多包含:
<body>
<%
Cookie[] cookies = request.getCookies();
if(cookies!=null){
for(Cookie cookie:cookies){
if("username".equals(cookie.getName())){
response.sendRedirect("welcome.jsp");
return;
}
}
}
%>
<%
/* String msg = (String) request.getSession().getAttribute("msg"); */
String msg = (String)request.getAttribute("msg");
%>
<%=(msg==null)?"":msg%>
<h2>欢迎来到登录界面...</h2>
<form action="LoginServlet" method="post">
UserName:<input type="text" name="username" /><br />
PassWord:<input type="password" name="password" /><br />
VerificationCode:<input type="text" name="code"/>
<img src="CheckCodeServlet"/><br/>
<input type="checkbox" name="remember"/>记住我<br/>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
这里只给出了body中的内容,看了之后相信大家现在知道了为什么使用jsp文件了吧,更方便,既能写前端又能写后台,更好的交互。开头部分的cookie就是为了验证是否记住用户,这个验证码例子用不上。中间的内容是为了数据回显,如果我们用户名、密码或者验证码错误时用来显示,用来接收服务器的响应。后面部分就是界面的简单实现了,验证码部分为:
<img src="CheckCodeServlet"/>
我们先来看看界面情况----这里是输入错误了一次验证码,可以看到在界面实现部分是没有标签来是显示了,也为了防止页面的跳转,再次访问后会消失,使用的是转发+请求:
接下来看后台部分:
package com.hym.servlet;
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 javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//绘制验证码:
//实例化图像缓冲区对象
int width=120;
int height = 45;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//获取画笔对象
Graphics graphics = image.getGraphics();
//设置颜色
graphics.setColor(Color.PINK);
//填充区域
graphics.fillRect(0, 0, width, height);
//绘制验证码
Random random = new Random();
//设置验证码的颜色和字体
graphics.setColor(Color.GREEN);
graphics.setFont(new Font("宋体", Font.BOLD, 30));
for(int i=0;i<4;i++){
int code = random.nextInt(10);
graphics.drawString(code+"", 15*i+20,25);
}
//设置干扰线
graphics.setColor(Color.WHITE);
for(int i=0;i<13;i++){
graphics.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height));
}
//输出
ImageIO.write(image, "jpg", response.getOutputStream());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
在这里显示的话有一个小细节,我们在网页中用于接收的 img/>标签中的src正式指向我们的servlet类。
<img src="CheckCodeServlet"/>
public class CheckCodeServlet extends HttpServlet
可以看到当再次访问时,数据回显会消失,并且随机数会刷新。