登录系统需要验证验证码，简单的生成验证码，以及前端页面展示。

后端代码：

@GetMapping("/captchaImage")

public AjaxResult captcha() throws IOException {

String key = UUID.randomUUID().toString();

String code = captchaProducer.createText();

BufferedImage image = captchaProducer.createImage(code);

ByteArrayOutputStream outputStream = new ByteArrayOutputStream();

ImageIO.write(image, "jpg", outputStream);

BASE64Encoder encoder = new BASE64Encoder();

String str = "data:image/jpeg;base64,";

String base64Img = str + encoder.encode(outputStream.toByteArray());

// 将生成的验证码放入redis缓存中

redisCache.hset(Constants.CAPTCHA_CODE_KEY,key, code, 120);

AjaxResult ajax = AjaxResult.success();

ajax.put("uuid", key);

ajax.put("img", base64Img);

return ajax;

}

前端代码：

1、定义login.js（用于请求后端接口）

import request from '@/utils/request'

// 获取验证码

export function getCodeImg () {

return request({

url: '/captchaImage',

headers: {

isToken: false

},

method: 'get',

timeout: 20000

})

}

2、登录页面 login.vue

① 引入getCodeImg 方法

import { getCodeImg } from '@/api/login'

② 定义codeUrl接收

data () {

return {

codeUrl: ''

}

③定义方法getCode

methods: {

getCode () {

getCodeImg().then(res => {

this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff

if (this.captchaOnOff) {

// 如果后端只是返回了string没有添'data:image/gif;base64,'，必须添加上，否则前端不显示

// this.codeUrl = 'data:image/gif;base64,' + res.img

this.codeUrl = res.img

this.loginForm.uuid = res.uuid

}

})

}

}

④ el-form 定义验证码

<el-form-item prop="code" v-if="captchaOnOff">

<el-input

v-model="loginForm.code"

auto-complete="off"

placeholder="验证码"

style="width: 63%"

@keyup.enter.native="handleLogin"

>

<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />

</el-input>

<div class="login-code">

< img :src="codeUrl" @click="getCode" class="login-code-img"/>

</div>

</el-form-item>

效果图：