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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
Python交换变量
2008/09/06 Python
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python按比例随机切分数据的实现
2019/07/11 Python
解决python运行启动报错问题
2020/06/01 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
质量工程师岗位职责
2013/11/16 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
骨干教师考核方案
2014/05/09 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
成都人事代理协议书
2014/10/25 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技