vue+spring boot实现校验码功能


Posted in Vue.js onMay 27, 2021

本文实例为大家分享了vue+spring boot实现校验码功能的具体代码,供大家参考,具体内容如下

用vue写了一个校验码来玩玩,样子如下:

vue+spring boot实现校验码功能

1.img标签

<img
     ="height:40px; width: 100px; cursor: pointer;"
     ref="imgIdentifyingCode"
     :src="selectedLogoPicture.imgUrl"
     class="logoImg"
 >

2.js代码

/**
     * 获取校验码
     */
    getIdentifyingCode() {
      let selft = this;
      //let pic = this.$refs.imgIdentifyingCode
      selft.loadingChack = true;
      let uuid = Utils.getUuid(32, 16);
      this.$store.state.uuid = uuid;
      this.$api.reader.getVerify(
        { responseType: "arraybuffer", uuid: uuid },
        r => {
          selft.loadingChack = false;
          selft.selectedLogoPicture.imgUrl = "data:image/png;base64," + r;
        }
      );
    },

3.controller

@RequestMapping("/getVerify")
 public void getVerify(@RequestParam String uuid, HttpServletRequest request, HttpServletResponse response) {
  response.setContentType("image/jpeg");// 设置相应类型,告诉浏览器输出的内容为图片
  response.setHeader("Pragma", "No-cache");// 设置响应头信息,告诉浏览器不要缓存此内容
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expire", 0);
  userService.getRandcodedDawTransparent(uuid, request, response);// 输出验证码图片方法
 }

4.service

@Override
 public void getRandcodedDawTransparent(String uuid, HttpServletRequest request, HttpServletResponse response) {
  try {
   Map<String, Object> map = CodeUtil.getRandcodedDawTransparent();
   // 将生成的随机字符串保存到session中
   log.info("==保存的uuid:"+uuid);
   log.info("==保存的code:"+map.get("code"));
   sessionUtil.saveCode(uuid, map.get("code"));

   response.setContentType("image/png");
   OutputStream out = response.getOutputStream();

   out.write((byte[]) map.get("img"));
   out.flush();
   out.close();
  } catch (IOException e) {
   log.error(e.getMessage());
  }
 }

5.util

public static Map<String, Object> getRandcodedDawTransparent() throws IOException {
  Map<String, Object> rsMap = new HashMap<>();
  // 创建BufferedImage对象
  BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  // 获取Graphics2D
  Graphics2D g2d = image.createGraphics();

  // 增加下面代码使得背景透明
  image = g2d.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
  g2d.dispose();
  g2d = image.createGraphics();

  g2d.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// 字体大小
  g2d.setColor(getRandColor(110, 133));// 字体颜色

  // 绘制干扰线
  for (int i = 0; i <= lineSize; i++) {
   drowLine(g2d, width, height);
  }
  // 绘制随机字符
  String randomString = "";
  for (int i = 1; i <= stringNum; i++) {
   randomString = drowString(g2d, randomString, i);
  }
  log.info(randomString);
  rsMap.put("code", randomString);
  g2d.dispose();
  ByteArrayOutputStream baos = new ByteArrayOutputStream();// io流
  ImageIO.write(image, "png", baos);// 写入流中
  byte[] bytes = baos.toByteArray();// 转换成字节
  bytes = Base64.encodeBase64(bytes);
  rsMap.put("img", bytes);

  return rsMap;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue-cropper组件实现图片切割上传
May 27 #Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 #Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
Vue实现动态查询规则生成组件
详解vue身份认证管理和租户管理
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
You might like
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
python图像常规操作
2017/11/11 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python如何调用外部系统命令
2019/08/07 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
执行力心得体会
2013/12/31 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
责任担保书范文
2014/05/21 职场文书
婚前协议书范本
2014/10/27 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android