校验码生成

1、后端

VerificationCode生成校验码图片的类，由4个[0-9a-zA-Z]组成

public class VerificationCode {
	private static int width = 100;
	private static int height = 30;
	private static Color bgColor = new Color(255, 255, 255);
	private static String codes = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
	private static String[] fontNames = {"宋体", "楷体", "隶书", "微软雅黑" };
	
	private String text;
	private Random random = new Random();
	
	
	public static void ouptput(BufferedImage image, OutputStream out) throws IOException {
		ImageIO.write(image, "JPEG", out);
	}
	
	public BufferedImage getImage() {
		BufferedImage image = createImage();
		Graphics2D g2 = (Graphics2D)image.getGraphics();
		StringBuffer sb = new StringBuffer();
		for (int i = 0; i < 4; i++) {
			String s = randomChar() + "";
			sb.append(s);
			g2.setColor(randomColor());
			g2.setFont(randomFont());
			
			float x = i * width * 1.0f / 4;
			g2.drawString(s, x, height - 8);
		}
		
		this.text = sb.toString();
		drawLine(image);
		
		return image;
	}
	
	public String getText() {
		return text;
	}
	
	private BufferedImage createImage() {
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics2D g2 = (Graphics2D)image.getGraphics();
		g2.setColor(bgColor);
		g2.fillRect(0, 0, width, height);
		
		return image;
	}
	
	private char randomChar() {
		return codes.charAt(random.nextInt(codes.length()));
	}
	
	private Color randomColor() {
		int red = random.nextInt(150);
		int green = random.nextInt(150);
		int blue = random.nextInt(150);
		
		return new Color(red, green, blue);
	}
	
	private Font randomFont() {
		String name = fontNames[random.nextInt(fontNames.length)];
		int style = random.nextInt(4);
		int size = random.nextInt(5) + 24;

		return new Font(name, style, size);
	}
	
	private void drawLine(BufferedImage image) {
		Graphics2D g2 = (Graphics2D)image.getGraphics();
		int num = 5;
		for (int i = 0; i < num; i++) {
			int x1 = random.nextInt(width);
			int y1 = random.nextInt(height);
			int x2 = random.nextInt(width);
			int y2 = random.nextInt(height);
			g2.setColor(randomColor());
			g2.setStroke(new BasicStroke(1.5f));
			g2.drawLine(x1, y1, x2, y2);
		}
	}
}

controller层代码

@RestController
public class LoginController {
	
	@GetMapping("/verifyCode")
	public void verifyCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
		VerificationCode code = new VerificationCode();
		BufferedImage image = code.getImage();
		String text = code.getText();
		
		HttpSession session = request.getSession(true);
		session.setAttribute("verify_code",  text);
		
		VerificationCode.ouptput(image, response.getOutputStream());
		
		
	}
}

2、前端

<template>
  <div>
    <el-form
        ref="loginForm"
        v-loading="loading"
        element-loading-text="正在登录..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :model="loginForm"
        class="loginContainer"
    >
      <h3 class="loginTitle">系统登录</h3>
      <el-form-item prop="username">
        <el-input size="normal" type="text" v-model="loginForm.username" auto-complete="off"
                  placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input size="normal" type="password" v-model="loginForm.password" auto-complete="off"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input size="normal" type="text" v-model="loginForm.code" auto-complete="off"
                  placeholder="点击图片更换验证码" style="width: 250px"></el-input>
        <img :src="vcUrl"  alt="" style="cursor: pointer">
      </el-form-item>
      <el-checkbox size="normal" class="loginRemember" v-model="checked"></el-checkbox>
      <el-button size="normal" type="primary" style="width: 100%;" >登录</el-button>
    </el-form>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          loading : false,
          vcUrl : 'http://localhost:8080/verifyCode',
          loginForm: {
            username: 'admin',
            password: '123'
          },
          checked: true
        }
      }
  }
</script>

<style>
  .loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
  }

  .loginTitle {
    margin: 15px auto 20px auto;
    text-align: center;
    color: #505458;
  }

  .el-form-item__content{
    display: flex;
    align-items: center;
  }
</style>