验证码java加html

验证码的写法

想法：首先需要有一个画布，再在画布上画一个矩形的框，矩形框可以设置大小和颜色

然后再生成随机数，需要把随机数安放到矩形框中，生成的随机数也可以设置大小和颜色，还有位置

然后把生成的随机数验证码保存到session中，在将图片以输出流的形式输出

最后前端在接受一下就可以了

话不多说上代码

servlet

注意返回类型为图片类型，把他想象成画图工具更加的形象，打开画布——》验证码图片矩形框——》验证码的内容——》生成图片

package com.qy.servlet;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
import java.util.Random;

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;

@WebServlet("/generatorValidateCode.do")
public class GeneratorValidateCode extends HttpServlet{
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //定义返回数据类型
        response.setContentType("image/jpeg");
        //创建一个画布
        BufferedImage image = new BufferedImage(100, 32, BufferedImage.TYPE_INT_RGB);
        //在画布上画出一个矩形的框，填充背景颜色
        Graphics g = image.getGraphics();
        g.setColor(Color.yellow);
        g.fillRect(0, 0, 100, 32);
        
        String str = "ABCDEFG1234567890";
        List<String> list = Arrays.asList(str.split(""));
        
        String code = "";
        for(int i=0;i<4;i++){
            //填充内容
            g.setColor(Color.RED);
            int index = (int) Math.floor(Math.random()*str.length());
            String str1 = list.get(index);
            g.drawString(str1, 10+i*20, 16);
            code += str1;
        }
        //将验证码保存到session中
        request.getSession().setAttribute("valiateCode", code);
        
        //将图片转为输出流
        ImageIO.write(image, "jpg", response.getOutputStream());
        
        
    }
}

前端html

src地址是servlet的路径，每次onclick的时候刷新，注意后面加的一个问号用来区分

                        <div class="field">
                            <input type="text" class="input input-big" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
                           <img src="generatorValidateCode.do" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'">  
                                                   
                        </div>