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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue使用watch监听属性变化
Apr 30 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设计模式 Builder(建造者模式)
2011/06/26 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
php 实现进制相互转换
2016/04/07 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
virtualenv实现多个版本Python共存
2017/08/21 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
大学生就业自荐书
2014/06/16 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书