VUE项目编写验证码

<dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>1.6.2</version> </dependency> 1.页面验证码输入框及验证码显示 <el-form-item prop="code" label="验证码"> <el-input v-model="form.code" auto-complete="off" placeholder="验证码" style="width: 55%;float: left;" @keyup.enter.native="handleLogin" > <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="validCode" /> </el-input> <div class="login-code" style="float: left;margin-left: 10px;"><img :src="codeUrl" @click="getCode()" ></div> </el-form-item> 2. //获取验证吗 getCode() {//获取验证吗 this.$axios({ url: `/api/login/code`, method: 'post', }).then(res=>{ console.log(res.data); this.codeUrl = res.data.data.img this.formLabelAlign.uuid = res.data.data.uuid }) }, 3.获取验证码后台代码 public ApiResult code() { Map<String,Object> imgResult=null; try { SpecCaptcha specCaptcha = new SpecCaptcha(130,48,4); specCaptcha.setFont(new Font("Times New Roman",1, 32)); specCaptcha.setCharType(2); String result = specCaptcha.text(); String uuid =UuidUtil.get32UUID() ; // 保存 redisUtils.set2(uuid, result, 2, TimeUnit.MINUTES); // 验证码信息 imgResult = new HashMap<String,Object>(2){{ put("img", ((Captcha) specCaptcha).toBase64()); put("uuid", uuid); }}; } catch (Exception e) { e.printStackTrace(); return ApiResultHandler.buildApiResult(400, "添加失败", null); } return ApiResultHandler.buildApiResult(200, "成功", imgResult); }