验证码-简单实现
验证码:
创建缓存图片：指定宽width=90,height=30
获取画笔对象
设置画笔颜色
填充矩形区域
从字符数组中随机得到字符 char[] arr = { ‘A’, ‘B’, ‘C’, ‘D’, ‘N’, ‘E’, ‘W’, ‘b’, ‘o’, ‘y’, ‘1’, ‘2’, ‘3’, ‘4’,‘5’,‘6’ };
循环4次，画4个字符
设置字的颜色为随机
设置字体，大小为18，
将每个字符画到图片，x增加，y不变。10+(i*20), 20
线的位置是随机的，x范围在width之中，y的范围在height之中。
画8条干扰线，每条线的颜色不同
将缓存的图片输出到响应输出流中
验证码Servlet代码
@WebServlet(name = "PicCodeServlet", urlPatterns = "/code")
public class PicCodeServlet extends HttpServlet {
//创建一个随机类
private Random ran = new Random();
//写一个方法随机生成一种颜色
private Color getRandomColor() {
//随机生成0~255之间的数
int red = ran.nextInt(256);
int green = ran.nextInt(256);
int blue = ran.nextInt(256);
//红，绿，蓝
return new Color(red, green, blue);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 创建缓存图片
int width = 90, height = 30;
//参数：宽，高，图片模式
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//2. 获取画笔对象
Graphics graphics = img.getGraphics();
//3. 设置画笔颜色
graphics.setColor(Color.WHITE);
//4. 填充矩形区域
graphics.fillRect(0, 0, width, height);
//5. 从字符数组中随机得到字符
char[] arr = { 'A', 'B', 'C', 'D', 'N', 'E', 'W', 'b', 'o', 'y', '1', '2', '3', '4','5','6' };
//6. 循环4次，画4个字符
for (int i = 0; i < 4; i++) {
//7. 设置字的颜色为随机
graphics.setColor(getRandomColor());
//8. 设置字体，大小为18
graphics.setFont(new Font(Font.SANS_SERIF,Font.BOLD+Font.ITALIC,19));
//随机得到下标
int index = ran.nextInt(arr.length);
char c = arr[index]; //随机得到一个字符
//9. 将每个字符画到图片，x增加，y不变。
graphics.drawString(String.valueOf(c),10+(i*20), 20);
}
//11. 画8条干扰线，每条线的颜色不同
for (int i = 0; i < 8; i++) {
//10. 线的位置是随机的，x范围在width之中，y的范围在height之中。
int x1 = ran.nextInt(width);
int y1 = ran.nextInt(height);
int x2 = ran.nextInt(width);
int y2 = ran.nextInt(height);
graphics.setColor(getRandomColor());
graphics.drawLine(x1,y1,x2,y2);
}
//12. 将缓存的图片输出到响应输出流中
//参数：图片对象,图片格式，输出流
ImageIO.write(img,"jpg",response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}}
登录是用来校验效果怎么样，你们也可以直接拿到自己的项目里试试效果，这个登录页面随便找的一个校验的，页面效果比较丑，还有些样式没有导进来。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录页面</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="max-width:400px">
<h3 style="text-align: center">用户登录</h3>
<form action="login" method="post" >
<div class="form-group">
<label for="name">用户名：</label>
<input type="text" name="name" class="form-control" id="name" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
</div>
<div class="form-inline">
<label for="vcode">验证码：</label>
<input type="text" name="vcode" class="form-control" id="vcode" placeholder="验证码" style="width: 70px" maxlength="4"/>
<!--验证码-->
<img id="imgCode" src="code" style="width: 90px; height: 30px; cursor: pointer;" title="看不清，点击刷新">
<script type="text/javascript">
//图片点击事件
document.getElementById("imgCode").onclick = function () {
this.src = "code?t=" + new Date().getTime();
};
</script>
</div>
<div style="text-align: center; padding-top: 20px;">
<input type="submit" value=" 登 录 " class="btn btn-primary"/>
</div>
</form>
</div>
</body>
</html>
