前端代码分析
验证码表单介绍
<el-form-item prop="code" v-if="captchaOnOff"><el-inputv-model="loginForm.code"size="large"auto-complete="off"placeholder="验证码"style="width: 50%"@keyup.enter="handleLogin"><template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template></el-input><div class="login-code"><img :src="codeUrl" @click="getCode" class="login-code-img"/></div></el-form-item>
可以看到<img :src="codeUrl" @click="getCode" class="login-code-img"/>：一个验证码图片元素，其中:src="codeUrl"表示通过 Vue 实例中的codeUrl变量动态绑定图片的源地址，@click="getCode"监听点击事件，当点击验证码图片时触发getCode方法。
接下来分析getCode的函数。
getCode的函数
function getCode() {getCodeImg().then(res => {captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;if (captchaOnOff.value) {codeUrl.value = "data:image/gif;base64," + res.img;loginForm.value.uuid = res.uuid;}});}
这个函数用于获取验证码图片和更新相关状态。
getCodeImg().then(res => { ... })：调用getCodeImg函数，并通过then方法处理返回的结果。then方法用于异步地处理 Promise 对象的结果。
codeUrl.value = "data:image/gif;base64," + res.img;：将验证码图片的 URL 更新为res对象中的img属性，并将其格式设置为 base64 编码的 GIF 图片URL。codeUrl变量可能是一个响应式变量，用于在 Vue 实例中绑定验证码图片的 URL，以实现动态更新。
loginForm.value.uuid = res.uuid;：将loginForm对象中的uuid属性设置为res对象中的uuid属性的值。loginForm.value可能是一个响应式变量，用于保存表单的数据对象。
接下来分析getCodeImg()函数
getCodeImg()函数
// 获取验证码export function getCodeImg() {return request({url: '/captchaImage',headers: {isToken: false},method: 'get',timeout: 20000})}
这是一个导出的函数getCodeImg，它使用request函数发送一个 GET 请求来获取验证码图片
url: '/captchaImage'：指定请求的 URL，即获取验证码图片的接口地址。
method: 'get'：指定请求的 HTTP 方法为 GET，即发送 GET 请求。
后端代码实现
首先写一个生成验证码的配置类
//配置类@SpringBootApplicationpublic class KaptchaConfig {@Beanpublic DefaultKaptcha producer() {// 创建一个Properties对象来设置Kaptcha的属性Properties properties = new Properties();properties.put("kaptcha.border", "no");properties.put("kaptcha.textproducer.font.color", "blue");properties.put("kaptcha.textproducer.char.space", "5");// 使用Properties对象创建一个Config实例Config config = new Config(properties);// 使用Config实例创建一个Kaptcha实例DefaultKaptcha defaultKaptcha = new DefaultKaptcha();defaultKaptcha.setConfig(config);return defaultKaptcha;}}
接下来编写验证码的controller类
/*** 验证码的Controller*/@RestControllerpublic class CaptchaController {@Autowiredprivate Producer producer;@GetMapping("captchaImage")public Map<String,String> captcha(HttpServletResponse response, HttpServletRequest request) throws ServletException, IOException {response.setHeader("Cache-Control", "no-store, no-cache");response.setContentType("image/jpeg");// 生成文字验证码String text = producer.createText();// 生成图片验证码BufferedImage image = producer.createImage(text);// 保存到验证码到 sessionrequest.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, text);ByteArrayOutputStream bos = new ByteArrayOutputStream();ImageIO.write(image, "jpg", bos);//转成字节数组byte[] bytes=bos.toByteArray();//转成base64String captchaStr = Base64Encoder.encode(bytes);// String captchaStr = Base64.getEncoder().encodeToString(bytes);String uuid = UUIDUtil.getRandomUUID();Map<String,String> map=new HashMap<>();map.put("img",captchaStr);map.put("uuid",uuid);return map;}}
由于前端需要base64编码的url，所以需要将转成base64编码的格式
还要通过UUIDUtil生成uuid，于是编写UUIDUtil类
public class UUIDUtil {public static String getRandomUUID(){return UUID.randomUUID().toString().toUpperCase().replace("-","");}}
这里生成一个32位的字符串。
总结
对于前后端分离的项目，首先要分析前端需要传递的参数是什么以及类型，根据前端传递的参数类型来编写后端的代码。
