SpringMVC系列之开发登录界面的验证码

深碍√TFBOYSˉ_ 2021-09-11 03:56 367阅读 0赞

本博客介绍如何开发登录界面的验证码

先写个验证码生成的Controller类:

package com.appweb.controller.login;
    
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics2D;
    import java.awt.font.FontRenderContext;
    import java.awt.geom.Rectangle2D;
    import java.awt.image.BufferedImage;
    import java.io.ByteArrayOutputStream;
    import java.io.IOException;
    import java.util.Random;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.shiro.SecurityUtils;
    import org.apache.shiro.session.Session;
    import org.apache.shiro.subject.Subject;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.appweb.core.base.Const;
    
    
    @Controller
    @RequestMapping("/code")
    public class SecCodeController {
    
    	@RequestMapping
    	public void generate(HttpServletResponse response){
    		ByteArrayOutputStream output = new ByteArrayOutputStream();
    		String code = drawImg(output);
    		
    		Subject currentUser = SecurityUtils.getSubject();  
    		Session session = currentUser.getSession();
    		session.setAttribute(Const.SESSION_SECURITY_CODE, code);
    		
    		try {
    			ServletOutputStream out = response.getOutputStream();
    			output.writeTo(out);
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    	}
    	
    	/**
    	 * 绘画验证码
    	 * @param output
    	 * @return
    	 */
    	private String drawImg(ByteArrayOutputStream output){
    		String code = "";
    		//随机产生4个字符
    		for(int i=0; i<4; i++){
    			code += randomChar();
    		}
    		int width = 70;
    		int height = 25;
    		BufferedImage bi = new BufferedImage(width,height,BufferedImage.TYPE_3BYTE_BGR);
    		Font font = new Font("Times New Roman",Font.PLAIN,20);
    		//调用Graphics2D绘画验证码
    		Graphics2D g = bi.createGraphics();
    		g.setFont(font);
    		Color color = new Color(66,2,82);
    		g.setColor(color);
    		g.setBackground(new Color(226,226,240));
    		g.clearRect(0, 0, width, height);
    		FontRenderContext context = g.getFontRenderContext();
    		Rectangle2D bounds = font.getStringBounds(code, context);
    		double x = (width - bounds.getWidth()) / 2;
    		double y = (height - bounds.getHeight()) / 2;
    		double ascent = bounds.getY();
    		double baseY = y - ascent;
    		g.drawString(code, (int)x, (int)baseY);
    		g.dispose();
    		try {
    			ImageIO.write(bi, "jpg", output);
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		return code;
    	}
    	
    	/**
    	 * 随机参数一个字符
    	 * @return
    	 */
    	private char randomChar(){
    		Random r = new Random();
    		String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789";
    		return s.charAt(r.nextInt(s.length()));
    	}
    }

引入jQuery.js:

用jquery写个函数：

function genTimestamp() {  
                var time = new Date();  
                return time.getTime();  
            }

function changeCode() {  
                $("#Img").attr("src", "code.do?t=" + genTimestamp());  
            }

写个img标签调用函数：

![Center][]

[Center]: /images/20210813/de43c7e99e1447b197bb84abab9d1418.png