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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 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
谈谈关于php的优点与缺点
2013/04/11 PHP
php向js函数传参的几种方法
2014/08/10 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHPMailer发送邮件
2016/12/28 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
Js自定义多选框效果的实例代码
2017/07/05 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python图书管理系统
2020/04/05 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
pandas数据处理进阶详解
2019/10/11 Python
通过实例了解python property属性
2019/11/01 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
Django 实现图片上传和下载功能
2020/12/31 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
美丽乡村建设实施方案
2014/03/23 职场文书
支行行长竞聘报告
2014/11/06 职场文书
初中学生操行评语
2014/12/26 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书