1. 程式人生 > >在登入頁面加入隨機生成的驗證碼驗證登入

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

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();
        }
    }
}