java编写一个漂亮的验证码

效果:
java编写一个漂亮的验证码_第1张图片

PicCodeServlet .java代码:

/**
 验证码
 */
@WebServlet(name = "PicCodeServlet", urlPatterns = "/code")
public class PicCodeServlet extends HttpServlet {

    private Random random = new Random();

    /**
     写一个方法随机获取颜色
     */
    private Color getRandomColor() {
        //随机生成0-255之间整数
        int red = random.nextInt(256);
        int green = random.nextInt(256);
        int blue = random.nextInt(256);
        //参数:红,绿,蓝 (0-255)
        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','l','c','q',
                '0', '1', '2', '3', '4', '5', '6','7','8','9'};
        // 6. 循环4次,画4个字符
        for (int i = 0; i < 4; i++) {
            int index = random.nextInt(arr.length);
            char c = arr[index];  //随机得到一个字符
            // 7. 设置字的颜色为随机
            graphics.setColor(getRandomColor());
            // 8. 设置字体,大小为18。参数:字体,样式,大小
            graphics.setFont(new Font(Font.DIALOG, Font.BOLD + Font.ITALIC, 19));
            // 9. 将每个字符画到图片,x增加,y不变。
            //参数:画字符,x位置,y位置。把c从字符转成字符串
            graphics.drawString(String.valueOf(c), 10 + (i * 20), 20);
        }
        for (int i = 0; i < 8; i++) {
            // 10. 线的位置是随机的,x范围在width之中,y的范围在height之中。
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int x2 = random.nextInt(width);
            int y2 = random.nextInt(height);
            // 11. 画8条干扰线,每条线的颜色不同
            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);
    }
}

login.html
这个页面使用了bootstrap框架


<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 src="code" style="width: 90px; height: 30px; cursor: pointer;" title="看不清,点击刷新" id="picCode">
                <script type="text/javascript">
                    //图片的点击事件
                    document.getElementById("picCode").onclick = function () {
                        this.src = "code?n=" + 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>

你可能感兴趣的:(javaEE)