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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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 zip文件解压类代码
2009/12/02 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Python回调函数用法实例详解
2015/07/02 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Django添加feeds功能的示例
2018/08/07 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
python之生成多层json结构的实现
2020/02/27 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
教师病假条范文
2015/08/17 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript