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>