验证码算法

验证码:

  1. 创建缓存图片:指定宽width=90,height=30
  2. 获取画笔对象
  3. 设置画笔颜色
  4. 填充矩形区域
  5. 从字符数组中随机得到字符 char[] arr = { ‘A’, ‘B’, ‘C’, ‘D’, ‘N’, ‘E’, ‘W’, ‘b’, ‘o’, ‘y’, ‘1’, ‘2’, ‘3’, ‘4’,‘5’,‘6’ };
  6. 循环4次,画4个字符
  7. 设置字的颜色为随机
  8. 设置字体,大小为18,
  9. 将每个字符画到图片,x增加,y不变。10+(i*20), 20
  10. 线的位置是随机的,x范围在width之中,y的范围在height之中。
  11. 画8条干扰线,每条线的颜色不同
  12. 将缓存的图片输出到响应输出流中

验证码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);
    }
}

登录是用来校验效果怎么样,你们也可以直接拿到自己的项目里试试效果,这个登录页面随便找的一个校验的,页面效果比较丑,还有些样式没有导进来。


<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>

你可能感兴趣的:(项目工具)