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.$set 失效的坑 问题发现及解决方案)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- 小白vue教学(尤大大新活petite-vue的实现)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- springboot vue 异地登录(vue+springboot实现登录验证码)
- vue组件详解(Vue的方法和属性案例详解)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue各组件如何引用(Vue局部组件数据共享Vue.observable的使用)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue滚动条滚动事件(vue实现一个滚动条样式)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- vue 设置头部可以左右滑动(vue实现左右滑动效果实例代码)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- 15帅气男士发型,清爽时尚很有型,喜欢就试试(清爽时尚很有型)
- 哪几个历史人物被影协主席李雪健演的活灵活现(哪几个历史人物被影协主席李雪健演的活灵活现)
- 王伦狭隘,晁盖霸道,宋江奸诈骨头软,只有鲁智深才适合当寨主(王伦狭隘晁盖霸道)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
- 梁山创始人杜迁,为何不受宋江待见,只排名83位(梁山创始人杜迁)
- 法国面包(法国面包法棍)
热门推荐
- python 暗弱目标提取(Python提取频域特征知识点浅析)
- css图片颜色提取(解析CSS 提取图片主题色功能小技巧)
- python中怎样将字符串倒序(python字符串循环左移)
- windowsserver2008部署php项目(win2008 r2 服务器环境配置FTP/ASP/ASP.Net/PHP)
- 怎么进入云服务器(云服务器端口怎么打开?)
- 如何看懂云服务器(专业云服务器主机挑选从几个方面衡量?)
- 网站数据迁移到新服务器(网站服务器迁移数据需要注意什么?)
- 腾讯云服务器怎么安装宝塔(腾讯云服务器无法打开宝塔面板的解决方法放行安全组)
- thinkphp5开发教程(thinkPHP5框架接口写法简单示例)
- nginx tomcat集群(Nginx+tomcat负载均衡集群的实现方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9