demand analysis

Essentially images, used to prevent malicious form registrations.

Through the img tag, src is the path of the servlet

step

Write a static page login.html

img tag, src is the servlet path. Write another a tag. Both are bound to the click event, and the picture is refreshed after the click.
Writing servlets

Output the written img to the page stream through ImageIO (response.getOutPutStream)
```
//将图片写入到浏览器页面上去
ImageIO.write(img,"jpg",response.getOutputStream());
```

the code

Login page login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script>
        window.onload=function () {
      
      
            var img=document.getElementById("image");
            var change=document.getElementById("change");
            img.onclick=function() {
      
      
                var date=new Date().getTime();
                img.src="/day/CheckCodeServlet?"+date;
            }
            change.onclick=function() {
      
      
                var date=new Date().getTime();
                img.src="/day/CheckCodeServlet?"+date;
            }
        }
    </script>
</head>
<body>

<img src="/day/CheckCodeServlet" id="image">
<a href="" id="change">看不见？点击换一张</a>
</body>
</html>

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;

@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        int height=50;
        int width=100;
        //创建对象，在内存中图片对象
        BufferedImage img = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);


        //美化图片
        Graphics g = img.getGraphics();
        g.setColor(Color.pink);
        g.drawRect(0,0,width-1,height-1);

        String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        Random ran=new Random();
        for (int i = 1; i <= 4; i++) {
    
    
            int index = ran.nextInt(str.length());
            char c = str.charAt(index);
            g.drawString(c+"",width/5*i,height/2);
        }
        g.setColor(Color.GREEN);
        for (int i = 0; i < 10; i++) {
    
    
            int x1 = ran.nextInt(width);
            int x2 = ran.nextInt(width);
            int y1 = ran.nextInt(height);
            int y2 = ran.nextInt(height);
            g.drawLine(x1,y1,x1,x2);

        }


        //将图片写入到浏览器页面上去
        ImageIO.write(img,"jpg",response.getOutputStream());


    }
}

demo

insert image description here

project summary

The principle of verification code implementation?

The essence of the verification code is a picture. By setting the src of the picture tag to point to the servlet location, by defining the img content in the servlet, and then writing the img content to the output stream of the response through ImageIO.write, that is, outputting it to the page .

Case-02 verification code (html, servlet, Response object)