实现的效果：
后端：
1、中间用到了org.apache.commons.lang3.RandomUtils工具类，需要pom配置：
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.4</version> </dependency>
2、验证码实体类：
import lombok.Data; /** * 验证码类 */ @Data public class VerifyCode { private String code; private byte[] imgBytes; private long expireTime; }
3、随机验证码工具类
import org.apache.commons.lang3.RandomUtils; import java.awt.*; import java.util.Random; public class VerifyCodeRandomUtils extends RandomUtils { private static final char[] CODE_SEQ = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9'}; private static final char[] NUMBER_ARRAY = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'}; private static Random random = new Random(); public static String randomString(int length) { StringBuilder sb = new StringBuilder(); for (int i = 0; i < length; i++) { sb.append(String.valueOf(CODE_SEQ[random.nextInt(CODE_SEQ.length)])); } return sb.toString(); } public static String randomNumberString(int length) { StringBuilder sb = new StringBuilder(); for (int i = 0; i < length; i++) { sb.append(String.valueOf(NUMBER_ARRAY[random.nextInt(NUMBER_ARRAY.length)])); } return sb.toString(); } public static Color randomColor(int fc, int bc) { int f = fc; int b = bc; Random random = new Random(); if (f > 255) { f = 255; } if (b > 255) { b = 255; } return new Color(f + random.nextInt(b - f), f + random.nextInt(b - f), f + random.nextInt(b - f)); } public static int nextInt(int bound) { return random.nextInt(bound); } }
4、生成验证码工具类
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Service; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.OutputStream; import java.util.Random; /** * 验证码实现类 */ @Service public class VerifyCodeGenUtils { private static final Logger logger = LoggerFactory.getLogger(VerifyCodeGenUtils.class); private static final String[] FONT_TYPES = {"u5b8bu4f53", "u65b0u5b8bu4f53", "u9ed1u4f53", "u6977u4f53", "u96b6u4e66"}; private static final int VALICATE_CODE_LENGTH = 4; /** * 设置背景颜色及大小，干扰线 * * @param graphics * @param width * @param height */ private static void fillBackground(Graphics graphics, int width, int height) { // 填充背景 graphics.setColor(Color.WHITE); //设置矩形坐标x y 为0 graphics.fillRect(0, 0, width, height); // 加入干扰线条 for (int i = 0; i < 8; i++) { //设置随机颜色算法参数 graphics.setColor(VerifyCodeRandomUtils.randomColor(40, 150)); Random random = new Random(); int x = random.nextInt(width); int y = random.nextInt(height); int x1 = random.nextInt(width); int y1 = random.nextInt(height); graphics.drawLine(x, y, x1, y1); } } /** * 生成随机字符 * * @param width * @param height * @param os * @return * @throws IOException */ public String generate(int width, int height, OutputStream os) throws IOException { BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics graphics = image.getGraphics(); fillBackground(graphics, width, height); String randomStr = VerifyCodeRandomUtils.randomString(VALICATE_CODE_LENGTH); createCharacter(graphics, randomStr); graphics.dispose(); //设置JPEG格式 ImageIO.write(image, "JPEG", os); return randomStr; } /** * 验证码生成 * * @param width * @param height * @return */ public VerifyCode generate(int width, int height) { VerifyCode verifyCode = null; try ( //将流的初始化放到这里就不需要手动关闭流 ByteArrayOutputStream baos = new ByteArrayOutputStream(); ) { String code = generate(width, height, baos); verifyCode = new VerifyCode(); verifyCode.setCode(code); verifyCode.setImgBytes(baos.toByteArray()); } catch (IOException e) { logger.error(e.getMessage(), e); verifyCode = null; } return verifyCode; } /** * 设置字符颜色大小 * * @param g * @param randomStr */ private void createCharacter(Graphics g, String randomStr) { char[] charArray = randomStr.toCharArray(); for (int i = 0; i < charArray.length; i++) { //设置RGB颜色算法参数 g.setColor(new Color(50 + VerifyCodeRandomUtils.nextInt(100), 50 + VerifyCodeRandomUtils.nextInt(100), 50 + VerifyCodeRandomUtils.nextInt(100))); //设置字体大小，类型 g.setFont(new Font(FONT_TYPES[VerifyCodeRandomUtils.nextInt(FONT_TYPES.length)], Font.BOLD, 26)); //设置x y 坐标 g.drawString(String.valueOf(charArray[i]), 15 * i + 5, 19 + VerifyCodeRandomUtils.nextInt(8)); } } }
5、获取验证码接口
import com.financial.config.jwt.JwtIgnore; import com.financial.config.redis.RedisUtils; import com.financial.util.verify.VerifyCode; import com.financial.util.verify.VerifyCodeGenUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * - * All rights reserved. * * @author： Zhiyong Yang * Description： * Changelog: * Reversion 1.0 2020-05-08 Zhiyong Yang * - */ @RestController @RequestMapping(value = "verify", produces = MediaType.APPLICATION_JSON_UTF8_VALUE) public class VerifyCodeController { @Autowired private VerifyCodeGenUtils verifyCodeGenUtils; @Autowired private RedisUtils redisUtils; /** * 显示单张图片 * * @return */ @GetMapping("/getCode") public void verifyCode(HttpServletRequest request, HttpServletResponse response) { try { //设置长宽 VerifyCode verifyCode = verifyCodeGenUtils.generate(80, 36); String code = verifyCode.getCode(); // 方式一：（session）将VerifyCode绑定session // request.getSession().setAttribute("VerifyCode", code); // 待提交登录时候获取服务器存储的验证码作为比较 // String verifyCode1 = (String) request.getSession().getAttribute("VerifyCode"); // 方式二：（redis）获取session id 作为key,时间存5分钟 redisUtils.set("VerifyCode_" + request.getSession().getId(), code, 300); //设置响应头 response.setHeader("Pragma", "no-cache"); //设置响应头 response.setHeader("Cache-Control", "no-cache"); //在代理服务器端防止缓冲 response.setDateHeader("Expires", 0); //设置响应内容类型 response.setContentType("image/jpeg"); response.getOutputStream().write(verifyCode.getImgBytes()); response.getOutputStream().flush(); } catch (IOException e) { } } }
6、测试获取验证码：
http://127.0.0.1:8081/verify/getCode?timestamp=1614305656908
注意：使用localhost会使获取验证码和提交登录时候session id不一致。
前端：
登录页：
<div class="login-right-form"> <div class="login-right-form-title"> <h4 class="login-right-form-title-login">登录：</h4> <p class="login-right-form-title-tips">登录到后台管理系统</p> </div> <el-form class="login-right-form-item" ref="form" :model="form" :rules="rules"> <el-form-item label="" prop="username"> <el-input placeholder="用户名" v-model="form.username" maxlength="64" clearable> <i class="el-icon-user-solid el-input__icon" slot="suffix"></i> </el-input> </el-form-item> <el-form-item label="" prop="password"> <el-input placeholder="密码" v-model="form.password" @keyup.enter.native="onSubmit" show-password maxlength="32" clearable></el-input> </el-form-item> <el-form-item label="" prop="verify"> <el-input placeholder="验证码" v-model="form.verify" @keyup.enter.native="onSubmit" maxlength="4" style=" 60%" clearable></el-input> <el-image style=" 80px; height: 36px; float: right; border-radius: 4px;margin-top: 1px;" :src="verifyUrl" @click="refresh" fit="fit"> <div slot="error" class="image-slot"> <i class="el-icon-picture-outline"></i> </div> </el-image> </el-form-item> <el-form-item> <el-button class="login-right-form-item-btn" type="primary" @click="onSubmit"> 登录 </el-button> </el-form-item> </el-form> </div>
js:
<script> export default { // 当前的名称 name: "Login", // 组件，有引入组件时，放置组件名称。 comments: {}, // 数据，v-model绑定数据使用 data() { return { // 后面加时间戳，可以避免验证码缓存，只要时间戳改变，验证码会重新加载 verifyUrl: process.env.VUE_APP_URL + '/verify/getCode?timestamp=' + new Date().getTime(), }; }, // 定义函数 methods: { // 点击验证码，时间戳改变，重新加载验证码 refresh() { this.verifyUrl = process.env.VUE_APP_URL + '/verify/getCode?timestamp=' + new Date().getTime() } }, }; </script>
效果：
