验证码功能前后端实现以及使用createObjectURL下载内容以及生成图片

参考文章:使用vue.js axios 下载功能?
参考:ajax请求二进制流图片并渲染到html中img标签
使用CreateObjectURL实现下载文件以及渲染图片
HTML5 进阶系列:文件上传下载
java生成验证码
createObjectURL的api文档说明

需求

需求:需要完成图片验证码功能,前端技术栈vue+axios,后端主要是springboot+mybatis.因为使用前端分离,前端通过请求验证码图片,并且将后端和验证码图片一起返回的序列同时存储,校验验证码时,带上序列一同校验.后端将验证码存到redis中,key为验证码序列,value为验证码.校验时,能够用前端的序列找到的验证码和前端传过来的验证码一致,即验证码验证通过.
其中,验证码序列是设置在响应头返回的.传统的接收短信验证码的方式不能获取响应头的内容.后端生成验证码图片,验证验证码的全部代码
这里就涉及一个问题,传统获取短信验证码的方式如下:

<template>
  <img
       class="get_verification"
       :src="captchaSrc"
       ref="captcha"
       alt="captcha"
       @click.prevent="onClickChangeCaptcha"
       >
</template>
<script>
    onClickChangeCaptcha() {
      this.$refs.captcha.src = this.captchaSrc + "?date=" + Date.now();
    }
</script>

所以为了获取到响应头的内容,前端只能改为用axios发送responseType为blob即可使用axios获取响应头的内容,
完整代码参考:前端登录验证码校验全部代码
主要代码:

 onClickChangeCaptcha() {
      reqcaptCha().then(res => {
        console.log(res);
        const blob = res.data;
        var img = this.$refs.captcha;
        const URL = window.webkitURL || window.URL;
        img.onload = function(e) {
          //清除url对象
          URL.revokeObjectURL(img.src);
        };
        img.src = URL.createObjectURL(blob);
      });
    },

至此功能基本完成,但是在前端继续开发过程中,却出现了问题,原因是使用mock拦截Ajax请求,但是该请求是可以正常返回的,只是和使用mock返回的不一样,即返回的不是blob数据,是二进制数据,尝试转化为blob,但是无法正常显示.
正常不适用mock返回的数据,使用responseType:'blob'自动将数据转化为blob:


正常的blob数据

使用mock后返回的不是blob数据:


普通二进制数据

具体原因要再看看哈哈哈

关于浏览器兼容问题:


image.png

推荐阅读更多精彩内容

  • Mockito简介什么是mock?在软件开发的世界之外, "mock"一词是指模仿或者效仿。 因此可以将“mock...
    燕京麒麟阅读 2,583评论 0 6
  • 最近我的朋友Jack进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是Jack非常熟悉的vue全家桶,...
    Java大生阅读 19,229评论 0 22
  • 如果说友谊是一颗长青树,那么,浇灌它的必定是出自内心的清泉;如果说友谊是一朵开不败的鲜花,那么,照耀它的必定是从心...
    陈小苗阅读 75评论 0 1
  • 記得小時候,時間顯得特別漫長而耐用。那時候的一天就像現在的一周、一個月,那樣的絮絮叨叨。 尤其是夏天,總感覺一天可...
    夏木_Woodson阅读 84评论 0 0
  • 目标:掌握敏捷落地实施的能力,能够成为敏捷教练 开始时间:2017.07.03 结束时间:2017.12 现状:基...
    羊圈阅读 194评论 0 0
  • 我小的时候养狗还不兴郑重其事地起个名字,最多就是阿黄,大黑这样。我家那会儿也有一条狗,就叫“小狗”。因为它刚到我家...
    赵启辰阅读 321评论 9 5
  • 让爱悄悄赶走了烦恼 让疼悄悄淹没了大脑 我的爱好就是把你讨好 情调没对味就会疯掉 你的微笑就会把我醉倒 氧气不重要...
    李译阅读 181评论 0 1