图形验证码制作

一：在前端页面加载的时候就要发送请求获取图形验证码【在钩子函数mounted中调用getImageCode()】

//随机生成uuid的方法【生成的值传到后台作为Redis的key值】
createUuid(){
    var s = [];
    var hexDigits = "0123456789abcdefghi";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";
    var uuid = s.join("");
    return uuid;
},
    //点击图片切换图片验证码
    getImageCode(){
        //1.判断localStorage中是否存在key是否存在【key传到后台作为存入redis的key值】
        var key = localStorage.getItem("code")
        if(key==null){
            //2.创建value，存入localStorage
            var value = this.createUuid()
            localStorage.setItem("code",value)
            key = localStorage.getItem("code")
        }
        //发送请求  base64ImageCodePrefix：data:image/jpeg;base64,
        //base64ImageCode为img标签src绑定的数据模型属性
        this.$http.get("/verifyCode/image/"+key).then(res=>{
            this.base64ImageCode = this.base64ImageCodePrefix+res.data.resultObj
        })
    },

 二：后台接口获取到传过来的key值，调用业务层方法并传入key，并处理业务异常

/**
     * 返回图形验证码Base64字符串给前端
     * @param key
     * @return AjaxResult
     */
    @GetMapping("/image/{key}")
    public AjaxResult verifyCode(@PathVariable("key") String key){
        try {
            String code = verifyCodeService.getImgCode(key);
            return AjaxResult.getResult().setResultObj(code);
        }
        catch (BusinessException e) {
            e.printStackTrace();
            return AjaxResult.getResult().setMsg(e.getMessage());
        }
        catch (Exception e) {
            e.printStackTrace();
            return AjaxResult.getResult().setMsg("系统异常，请稍后重试");
        }
    }

三：业务层将对传过来的key值进行判空，为空则抛出业务异常，不为空则调用StrUtis工具类生成4位的验证码，然后将传过来的key作为key，生成的验证码作为value存入Redis，并设置有效时间，一般为3分钟，然后调用图形验证码生成工具类VerifyCodeUtils.verifyCode方法传入宽、高、以及验证码生成Base64图形验证码字符串并返回

/**
     * 获取图形验证码Base64
     * @param key
     * @return String
     */
    @Override
    public String getImgCode(String key) {
        if(StringUtils.isEmpty(key)){
            throw new BusinessException("key为空");
        }
        //生成随机验证码
        String code = StrUtils.getComplexRandomString(4);
        //将验证码和传的key设置进redis,3分钟有效
        redisTemplate.opsForValue().set(key,code,3, TimeUnit.MINUTES);
        //将验证码合并到图片
        return VerifyCodeUtils.verifyCode(115,40,code);
    }

四：最后在img上绑定一个事件，调用getImageCode()方法，到此就完成了图形验证码的功能【base64前缀：base64ImageCodePrefix:"data:image/jpeg;base64,"】