常用功能系列【hutool生成验证码】

1.后端代码

    @ApiOperation("获取验证码")
    @GetMapping("/getImage")
    public R ImgCode(HttpServletRequest request, HttpServletResponse response) {
        // 保存验证码信息
        String uuid = IdUtil.simpleUUID();
        // 生成验证码
        LineCaptcha captcha = CaptchaUtil.createLineCaptcha(500, 200,4,100);
        captcha.setBackground(Color.BLACK);
        System.out.println("验证码为:" + captcha.getCode());
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try {
            ImageIO.write(captcha.getImage(), "jpg", os);
            os.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
//        redisTemplate.opsForValue(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
        Map<String, Object> hashMap = new HashMap<>();
        hashMap.put("uuid", uuid);
        hashMap.put("img", Base64.encode(os.toByteArray()));
        return R.data(hashMap);
    }

2.前端代码

<div class='login_box'>
      <p>欢迎登录FAST-BOOT系统！</p>
      <div class='login_form'>
        <el-form :model='ruleForm' status-icon :rules='rules' ref='loginFormRef' label-width='25%'
                 class='demo-ruleForm'>
          <el-form-item label='用户名' prop='loginName'>
            <el-input prefix-icon='iconfont icon-yonghuming' v-model='ruleForm.loginName'></el-input>
          </el-form-item>
          <el-form-item label='密码' prop='pwd'>
            <el-input prefix-icon='iconfont icon-tianchongxing-' type='password' v-model='ruleForm.pwd'
                      autocomplete='off'></el-input>
          </el-form-item>
          <el-form-item label='验证码' prop='code'>
            <el-row>
              <el-col :span="10">
                <el-input  v-model='ruleForm.loginName'></el-input>
              </el-col>
              <el-col :span="12">
                  <img :src="codeUrl" style="margin-left:10px;100%;height: 36px" @click="getCode" class="login-code-img"/>
              </el-col>
            </el-row>

          </el-form-item>
          <el-form-item>
            <el-button type='primary' @click="submitForm('loginFormRef')">提交</el-button>
            <el-button @click="resetForm('loginFormRef')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>


<script>
import axios from 'axios'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    return {
      codeUrl: '',
      ruleForm: {
        pwd: '',
        loginName: '',
        uuid: ''
      },
      rules: {
        loginName: [
          {validator: validateUsername, trigger: 'blur'}
        ],
        pwd: [
          {validator: validatePass, trigger: 'blur'},
          {min: 6, max: 16, message: '密码长度应在6到16个字符之间', trigger: 'blur'}
        ]

      }
    }
  },
  mounted() {
    this.getCode()
  },
  methods: {
    getCode: function () {
      axios.get('/login/getImage').then((res) => {
        console.log("res", res)
        if (res.data.success) {
          this.codeUrl = "data:image/gif;base64," + res.data.data.img;
          this.ruleForm.uuid = res.data.data.uuid;
        }
      })
    },
    submitForm: function (formName) {
      
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

最终效果：