在登錄頁面加入隨機生成的驗證碼驗證登錄

1.前端頁面，在點擊驗證碼時發送請求，獲得隨機驗證碼

<ul>
        <li class="user_main_text">驗證碼： </li>
        <li class="user_main_input">
        <img id="img" src="/getyanzheng" onclick="b()" alt="">
        <input  type="text" name="yanzheng"/></li>  
</ul>      

<script type="text/javascript">
   function b() {
      document.getElementById("img").src="/getyanzheng?num="+Math.random()； 
 </script>

2.編寫ImageUtil工具類

import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;

public class ImageUtil {
    //1.定義變量保存生成后的驗證碼字符串
    static String code = "";

    //2.生成驗證碼
    public static String createcode() {
        code = "";
        String a = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
        for (int i = 0; i < 4; i++) {
            int index = (int) (Math.random() * 62);
            char b = a.charAt(index);
            code = code + b;
        }
        return code;
    }

    //查看已經生成的驗證碼
    public static String getCode() {
        return code;
    }

    //3.生成圖片
    public static BufferedImage createimage() {
        BufferedImage bi = new BufferedImage(70, 30, BufferedImage.TYPE_INT_RGB);
        //1.得到一個畫布
        Graphics g = bi.getGraphics();
        //2.添加背景顏色
        g.setColor(Color.ORANGE);
        g.fillRect(0, 0, 70, 30);

        //3.添加干擾線
        for (int i = 0; i < 30; i++) {
            Random r = new Random();
            int red = r.nextInt(256);
            int green = r.nextInt(256);
            int blue = r.nextInt(256);
            Color c = new Color(red, green, blue);
            g.setColor(c);
            int x1 = r.nextInt(71);
            int y1 = r.nextInt(31);
            int x2 = r.nextInt(71);
            int y2 = r.nextInt(31);
            //g.drawLine(x1,y1,x2,y2);
            g.drawOval(x1, y1, x2, y2);
        }


        //3.添加文字
        g.setColor(Color.BLACK);
        g.setFont(new Font("宋體", Font.BOLD, 25));

        String str = getCode();
        //4.將文字填充到畫板中
        g.drawString(str, 10, 25);

        //5.關閉畫布
        g.dispose();
        return bi;
    }
}

3.在Controller層處理請求

package com.ly.controller;

import com.ly.util.ImageUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;

@Controller
public class ImageController {
    @RequestMapping("/getyanzheng")
    public void yanzheng(HttpServletResponse response){
        try {
            ImageUtil.createcode();
            BufferedImage image = ImageUtil.createimage();
            //以流的方式返回給客戶端
            response.setContentType("image/jpeg");
            ByteArrayOutputStream bt = new ByteArrayOutputStream();
            //將圖片轉換成字節流
            ImageIO.write(image,"jpeg",bt);
            //得到輸出流，返回客戶端
            ServletOutputStream outputStream = response.getOutputStream();
            outputStream.write(bt.toByteArray());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}