java实现滑块验证码,js实现滑动验证码
目录
1.效果演示2.后端代码控制层工具类3.前端页面功能：java实现滑动验证码
项目是采用跳羚队，梅文
开发工具：采用想法
1.效果演示
2.后端代码
控制层
@ controller公共类SliderCodeController { @ auto wired resource loader资源加载器；@ Autowired private FileUtil FileUtil；//设置横轴位置缓存公共静态缓存字符串，整数cacheg=CacheBuilder.newBuilder().expireAfterWrite(60，时间单位。秒)。最大尺寸(666666)。build()；@ get mapping @ request mapping(索引)公共字符串测试(HttpServletRequest，模型模型)抛出io exception { return index } @ get mapping @ request mapping( getImg )public @ response正文映射字符串，对象getPic(http servlet请求请求)抛出io异常{ try { File target File=File util。getfile( target )；file tempImgFile=file util。getfile( temp )；映射字符串，对象结果映射=verifyimageutil。picturetemplatescut(tempImgFile，目标文件)；//生成流水号，这里就使用时间戳代替String lno=Calendar.getInstance().getTimeInMillis()" "；cacheg.put(lno，integer。(结果映射的值。get( xWidth ) )；resultMap.put(capcode ，lno)；//移除横坐标送前端结果图。移除( x width )；返回结果图；} catch(Exception e){ e . printstacktrace()；返回null } } @ get mapping @ request mapping( checkImgCode )public @ response正文映射字符串，Object checkcap code(@ request param( xpos )int xpos，@RequestParam(capcode )字符串cap代码，HttpServletRequest请求抛出IOException { Map String，Object result=new HashMap String，Object()；整数x=cacheg。getifpresent(cap代码)；if (x==null) { //超时result.put(code ，3)；} else if (xpos - x 5 xpos - x -5) { //验证失败result.put(code ，2)；} else { //验证成功result.put(code ，1)；}返回结果；}}
工具类
@组件公共类文件util { @ Value( $ { file。路径} )私有字符串文件路径；@Value(${file.target.path} )私有字符串target file path @ Value($ { file . target . num } )私有整数target filenum @ Value($ { file . temp . path } )私有字符串tempfile path @ Value($ { file . temp . num } )私有整数tempfileNum公共文件获取文件(字符串类型){ int num=0；字符串imgType= .jpg ；字符串旧文件路径=" "；如果(类型。equals( target ){ num=new Random().nextInt(目标filenum)1；旧文件路径=目标文件路径；} else if(类型。equals( temp ){ num=new Random().nextInt(tempfileNum)1；img type=-w . png ；old file path=tempfile path } String path=file path String file img=num imgTypeString file path=path file img file path file=新文件（路径);如果(!路径文件。exists()){路径文件。mkdirs()；}文件file=新文件(文件路径)；如果(!文件。exists()){ try { file。创建新文件()；类路径资源类路径资源=新类路径资源(旧文件路径文件img)；InputStream InputStream=类路径资源。getinputstream()；if(inputStream.available()！=0){ fileutils。copy inputstreamtofile(inputStream，file)；} inputstream。close()；} catch(io异常e){ e . printstacktrace()；} }返回文件；} }
3.前端页面
!DOCTYPE html html xmlns : th= http://www。百里香叶。org head meta charset= UTF八国集团标题滑动验证码/title link rel=样式表 href=/CSS/slide。CSS rel= external no follow 脚本src=/js/jquery-1。11 .1 .量滴js /script src=/js/jquery。lgy幻灯片。js /script/headbydydiv id= imgs code /div script $(function(){ setTimeout(function(){ create code()；}, 1000)}());//显示验证码函数createcode() {$ .ajax({type : POST ，url : /getImg ，dataType : json ，success : function(data){ if(data！=null) {$(#imgscode ).img码({前置img : 数据： image/png；base64， data.slidingImage，back img : data : image/png；base64， data.backImage，yHeight : data.yHeight，刷新回调： function(){//刷新验证码创建代码()；}、回调：函数(消息){控制台。日志(消息)；var $ this=this$。ajax({type : POST ，url : /checkImgCode ，data : {xpos : msg.xpos，capcode : data.capcode}，dataType : json ，success : function(data){ console。如果(数据)则记录(数据)。code==1){ $ this。获取成功()；} else { if(数据。code==4){创建代码()；} else if(数据。code==3){ $ this。get fail(验证码过期，请刷新);} else {$this.getfail(验证不通过);}} }})}});} } })}/脚本/正文/html到此这篇关于爪哇实现滑动验证码的示例代码的文章就介绍到这了，更多相关爪哇滑动验证码内容请搜索盛行信息技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持盛行它！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。