前端调用后台验证码接口

首先我们后台验证码用hutool包的工具类
引入依赖

     <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.0.7</version></dependency>

Controller

 /*** 获取验证码图片* @return*/@RequestMapping("/getAuthCodeImg")public void  getAuthCodeImg(HttpSession session, HttpServletResponse response, Integer count){//定义图形验证码的长和宽  码值个数  干扰圈数CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(90, 40, 4, 10);BufferedImage codeImg = circleCaptcha.getImage();if (null != count && count > 0){//重新生成验证码circleCaptcha.createCode();}//String codeImg = lineCaptcha.getImageBase64();String authCode = circleCaptcha.getCode();if(session.getAttribute("validateCode")!=null){session.removeAttribute("validateCode");session.setAttribute("validateCode", authCode);}else{session.setAttribute("validateCode", "请输入验证码");}ServletOutputStream sos;try {sos = response.getOutputStream();ImageIO.write(codeImg, "jpeg", sos);sos.close();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}

前端代码

<img src="/register/getAuthCodeImg?count=0" id="authCodeImg" onclick="changeCodeImg(this)">

js代码

 function changeCodeImg(codeImg){codeImg.src = "/register/getAuthCodeImg?count=1&timestamp="+new Date().getTime();}

“看不清？换一张”

<a href="javascript:" id="authCodeImg" onclick="upsecode()">看不清?换一张</a>

function upsecode(){document.getElementById("imgCode").src = "/pdc/captcha/captcha?t="+Math.random();}

前端调用后台验证码接口相关推荐

php 调用微信支付的时间戳,前端调用微信支付接口
支付按钮的点击事件$(´.Save_Patient_Msg´).click(function(){ $(´.Save_Patient_Msg´).off(´click´); var hrdfId = ...
在web前端调用后台java程序(java类)的方式
在web前端调用后台java程序(java类)的方式: 首先静态html标签是无法直接调用java程序的,但是可以通过imput button按钮点击,onclick事件调用一个js函数,用这个js函 ...
axios vue 回调函数_VUE使用axios调用后台API接口的方法
VUE使用axios调用后台API接口的方法引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可 ...
调用图形验证码接口时，为什么要在接口后方添加随机数
问题:今天在写登录模块调用图形验证码时,发现图形验证码接口返回的是一张图(即文件流),纠结怎么使用. 解决:将返回结果直接与标签的src属性绑定就行. 在此基础上发现,调用接口的后面要跟一个随机数.这 ...
nodejs本地启动websocket服务，前端调用本地websocket接口调试
之前经常用nodejs启动http的本地服务调试接口,今天因为需要调试websocket所以使用nodejs启动了本地服务,分享一个本地使用nodejs启动websocket服务的方法! 启动本地的w ...
fastadmin调用发送邮件验证码接口
1.配置文件 'mail_type' => '1',//smtp可以是qq邮箱或者网易云邮箱'mail_smtp_host' => 'smtp.163.com','mail_smtp_po ...
下载---当前端调用下载文件接口，接口通了，浏览器却没有下载文件（不一定好使）
1.下载文件封装 import request from './request' export function download(url, params,filename) { reques ...
前端调用后端的接口实现excel文件下载（下载Blod文件）（附带时间格式处理方法）
下载Blod文件(导出处理文件流) // data表示后端返回的文件流 // fileName表示需要导出的文件名 --> 如果没有入参,则文件名默认为当前时间 export function ...
前端调用SOE服务接口
1.get (必须在所有参数写完以后,如果返回是json格式加一个参数:f=pjson) let parameter = 'datatype=' + datatype +'&marker='+ ...

前端调用后台验证码接口

前端调用后台验证码接口

前端调用后台验证码接口相关推荐

最新文章

热门文章