滑动验证码--前端部分

1.原理

后端预先保存n张图片用来做滑动验证码的素材，然后在图片上面随机取一块固定大小的小图片作为滑动的素材，然后记录小图片相对于大图的位置，也就是小图上边距和大图上边距之前的距离（x坐标），小图左边距和大图左边距的距离（y坐标）。
前端先请求图片资源，后端返回大图、小图和小图的（y坐标），当用户拖动小图后，获取到小图的x坐标，将此时小图的x,y坐标返给后端做验证。

<!--html--><!--滑动验证码--><div class="img_bg" v-if="showImgContent"><!--滑动容器--><div class="sliderImg" ><!--大图--><img :src="save_big_url" alt="" class="big_img"><!--小图--><img :src="save_small_url"alt="" class="small_img"ref="small_img"@mousedown="move"><div class="img_tip">请滑动验证码进行验证。</div></div></div>

//js
data() {return {showImgContent: false,//是否展示图片验证码isCheckImg: false,// 是否使用滑动验证码positionX: 0, // 小图相对大图的左边距positionY: 0,// 小图相对大图的上边距save_big_url: "",//小图urlsave_small_url: "",//大图url}
}
methods:{// 获取验证图片和参数async mixVerifyCode(x = "") {   // x为空，请求图片和参数，验证时传x坐标let result;await httpServer("获取验证码图片和y坐标", {xvalue: x}).then((res) => {result = res;}).catch((err) => {})return result;},// 渲染图片showImg() {this.mixVerifyCode().then((res) => {// 给图片URL赋值this.save_big_url = res.save_big_urlthis.save_small_url = res.save_small_url// 初始化小图的位置this.$refs.small_img.style.top = `${res.yvalue}px`;this.$refs.small_img.style.left = `10px`;});},// 滑动验证码move(e) {let odiv = e.target;        //获取目标元素（小图）//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeft;let disY = e.clientY - odiv.offsetTop;// 鼠标移动时document.onmousemove = (e) => {       //鼠标按下并移动的事件if (e.preventDefault) e.preventDefault();//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disX;let top = e.clientY - disY;//绑定元素位置到positionX和positionY上面this.positionX = left;this.positionY = top;let bigImg = document.getElementsByClassName("big_img")[0];const bigX = bigImg.clientWidth - odiv.offsetWidth;left = Math.min(Math.max(0, left), bigX);//移动当前元素odiv.style.left = left + 'px';};// 鼠标按键释放时document.onmouseup = (e) => {if (e.stopPropagation) e.stopPropagation();if (e.preventDefault) e.preventDefault();e.cancelBubble = true;document.onmousemove = null;document.onmouseup = null;// 计算小图x值const xvalue = e.clientX - e.offsetX - document.getElementsByClassName("big_img")[0].getBoundingClientRect().x;// 想后端发起验证请求this.mixVerifyCode(parseInt(xvalue).toString()).then((res) => {if (res.is_success) {// 验证通过this.showImgContent = false;this.isCheckImg = true;// 继续你的业务逻辑} else {// 验证未通过this.isCheckImg = false;this.showImg();// 刷新图片验证码odiv.style.left = "0px";}})};}
}

滑动验证码--前端部分相关推荐

java多层if else嵌套语句的优化思路，滑动验证码防刷功能开发
阿里巴巴java开发手册里面,在控制语句部分有一个推荐,如下: [推荐]表达异常的分支时,少用 if-else 方式,这种方式可以改写成: if (condition) { ...return obj ...
前端验证码隐藏怎么实现_Python爬虫教程：200行代码实现一个滑动验证码
Python爬虫教程:教你用200行代码实现一个滑动验证码做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大 ...
Java滑动验证码【前端部分】
Java滑动验证码[前端] 实现思路 1.请求后端获得背景图.滑块.x.y.误差范围bound 2.将滑块设置到对应的位置:top = y 3.添加鼠标滑动事件实现代码后端请求(Controlle ...
200行代码实现一个滑动验证码
作者 | 崔庆才转载自进击的Coder(ID: FightingCoder) 做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还 ...
爬虫python代码-Python爬虫教程：200行代码实现一个滑动验证码
Python爬虫教程:教你用200行代码实现一个滑动验证码做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大 ...
python处理滑块验证码_使用python实现滑动验证码
首先安装一个需要用到的模块 pip install social-auth-app-django 安装完后在终端输入pip list会看到 social-auth-app-django 3.1.0so ...
float js 正则验证_爬虫篇 | 200 行代码实现一个滑动验证码
最近整理一个爬虫系列方面的文章,不管大家的基础如何,我从头开始整一个爬虫系列方面的文章,让大家循序渐进的学习爬虫,小白也没有学习障碍. 爬虫篇 | Python使用正则来爬取豆瓣图书数据爬虫篇 | ...
200 行代码实现一个滑动验证码
做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 我之 ...
vue 插件滑块验证_Vue插件之滑动验证码
本文实例为大家分享了Vue插件之滑动验证码的具体代码,供大家参考,具体内容如下预览目前仅前端实现,支持移动端滑动事件.版本V1.0.5 github文档地址安装 npm install --sa ...

滑动验证码--前端部分

1.原理

滑动验证码--前端部分相关推荐

最新文章

热门文章