servlet--验证码案例

时间 2021-01-05

【验证码案例】

【1】register.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register登录注册页面_验证码</title>
</head>
<body>
<!--案例需求：点击验证码图片或超链接就发生改变-->
<img id="checkCode" src="/day15_response/checkCodeServlet" />

<a id="chao" href="">看不清，换一张？</a>

<!--js代码区-->
<script>
    Window.onload = function () {
        //1.获取图片对象
        var img = document.getElementById("checkCode");
        //2.绑定单击事件
        img.onclick=function () {
            //3.修改属性
            var time = new date().getTime();//得到毫秒值
            img.src="/day15_response/checkCodeServlet？"+time;

        }

        //1.获取超链接对象
        var caholianjie = document.getElementById("chao");
        //2.绑定单击事件
        caholianjie.onclick=function () {
            //3.修改属性
            var time = new date().getTime();//得到毫秒值
            img.src="/day15_response/checkCodeServlet？"+time;

        }

    }

</script>

</body>
</html>

【2】 CheckCodeServlet类

package cn.itcast.web.servlet;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

/*
* 案例：验证码
*     分析：
*          1.创建一个对象--在内从中创建一个图片对象
*          2.美化图片：
*            1.填充背景颜色
*            2.画边框
*            3.写验证码=画字符
*            4.画干扰线
*          3.将图片输出到页面
* */
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.创建图片对象---传入三个参数宽、高、类型
        int width = 100;
        int height = 50;
        BufferedImage image = new BufferedImage(100, 50, BufferedImage.TYPE_INT_RGB);
        //2.美化
            //首先图片对象获取一个画笔对象好进行1.填充2.画边框3.写验证码4.画干扰线
            Graphics g = image.getGraphics();
            //1.【填充背景颜色】--第1步设置画笔颜色、第2步再去fill填充Rect矩形
            g.setColor(Color.yellow);
            g.fillRect(0, 0, width, height);
            //2.【画边框】--第1步设置画笔颜色、第2步再去画边框=draw画矩形Rect
            g.setColor(Color.red);
            g.drawRect(0, 0, width - 1, height - 2);
            //3.【写验证码=写字符】--第1步设置画笔颜色、第2步写字符
            //                   --分析：字符得是随机的才可以吧！所以先定义一个字符串,再随机获取一个字符
            String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            g.setColor(Color.black);
            for (int i = 0; i < 4; i++) {
                char c = str.charAt(new Random().nextInt(str.length()));
                g.drawString(c + "", width / 5 * i, height / 2);
            }
            //4.画干扰线--第1步设置画笔颜色、第2步draw画干扰线Line
            //         --分析：干扰线 得随机 ，随机生成坐标，俩点之间可以确定一条直线
            g.setColor(Color.blue);
        for (int i = 0; i < 10; i++) {
            //随机生成坐标
            int x1 = new Random().nextInt(width);
            int x2 = new Random().nextInt(width);
            int y1 = new Random().nextInt(height);
            int y2 = new Random().nextInt(height);
            //画干扰线
            g.drawLine(x1,y1,x2,y2);
        }



        //3.将图片输出到页面上展示---传入三个参数图片对象、后缀名、字节输出流
        ImageIO.write(image, "jpg", response.getOutputStream());


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}