vue和springboot实战项目(vue+spring boot实现校验码功能)
类别:编程学习 浏览量:2109
时间:2022-03-29 16:40:15 vue和springboot实战项目
vue+spring boot实现校验码功能本文实例为大家分享了vue+spring boot实现校验码功能的具体代码,供大家参考,具体内容如下
用vue写了一个校验码来玩玩,样子如下:
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.jpg" alt="vue和springboot实战项目(vue+spring boot实现校验码功能)" border="0" />
3.controller
@RequestMapping("/getVerify") public void getVerify(@RequestParam String uuid, HttpServletRequest request, HttpServletResponse response) { response.setContentType("image.jpg" alt="vue和springboot实战项目(vue+spring boot实现校验码功能)" border="0" />
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.jpg" alt="vue和springboot实战项目(vue+spring boot实现校验码功能)" border="0" />
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, .jpg" alt="vue和springboot实战项目(vue+spring boot实现校验码功能)" border="0" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vue应用转flutter(Vue和Flask通信的实现)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- 给孩子选购保温杯,注意这4个步骤,比颜值更重要(给孩子选购保温杯)
- 保温好 容量大 颜值高 保温杯你给娃娃买对了吗(保温好容量大颜值高)
- 《道德经》 人生避开骄狂,才能免去祸患(道德经人生避开骄狂)
- 郭麒麟(郭麒麟)
- 古人十句 戒骄 名言,醍醐灌顶,受益匪浅(古人十句戒骄名言)
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)
热门推荐
- docker 镜像mysql(解决docker拉取mysql镜像太慢的情况)
- docker容器测试环境构建(docker容器内安装TensorRT的问题)
- php实现无cookie的session(php实现多站点共用session实现单点登录的方法详解)
- docker执行shell脚本(基于Docker搭建ELK 日志系统的方法)
- vue滑动切换页面(vue实现点击翻转效果)
- JS脚本中Null与Undefined的区别
- 百度网和阿里云哪个好用(百度云服务器bcc有什么优势?)
- group by是底层如何实现分组的(group by 按某一时间段分组统计并查询推荐)
- python线程池有几种(对python 多线程中的守护线程与join的用法详解)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9