SpringBoot+Layui+SliderCaptcha滑块验证码登录
Posted 蒙面侠1024
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringBoot+Layui+SliderCaptcha滑块验证码登录相关的知识，希望对你有一定的参考价值。
从gitee上面下载SliderCaptcha源码，主要使用src目录下的三个目录文件
将这三个文件夹复制到你的项目静态资源文件夹中，如果你有自己的图片目录地址，将images目录下的几个图片文件复制粘贴到你的项目原有的图片目录
在html页面导入所需要的css和js
css
<link media="all" rel="stylesheet" th:href="@../../captcha/lib/font-awesome/css/font-awesome.css">
<link media="all" rel="stylesheet" th:href="@../../lib/layui-v2.6.3/css/layui.css">
<link media="all" rel="stylesheet" th:href="@../../captcha/disk/slidercaptcha.css">
js
<script charset="utf-8" th:src="@../../lib/layui-v2.6.3/layui.js"></script>
<script charset="utf-8" th:src="@../../lib/jq-module/jquery.particleground.min.js"></script>
<script charset="utf-8" th:src="@../../captcha/disk/longbow.slidercaptcha.js"></script>
滑块验证码div
<div class="layui-form-item" style="height: 200px">
<div id="captcha"></div>
</div>
滑块验证码js
这里使用了一个全局变量判断滑块验证码是否成功，如果滑块验证码验证通过，全局变量赋值为true，才能进一步登录，缺点：使用js直接赋值全局变量可用跳过验证码直接登录
var l = false;
sliderCaptcha(
id: 'captcha',
width: 300,
height: 150,
sliderL: 42,
sliderR: 9,
offset: 5,
loadingText: '正在加载中...',
failedText: '再试一次',
barText: '向右滑动填充拼图',
repeatIcon: 'fa fa-redo',
setSrc: function ()
//你的验证码图片存放的地址
return 'http://localhost:8080/images/Pic' + Math.round(Math.random() * 4) + '.jpg';
, onSuccess: function ()
l = true;
);
layui.use(['form','jquery'], function ()
var form = layui.form,
layer = layui.layer;
// 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location;
// 进行登录操作
form.on('submit(login)', function (data)
data = data.field;
//验证码
if (l==true)
if (data.sno == '')
layer.msg('学号不能为空');
return false;
if (data.password == '')
layer.msg('密码不能为空');
return false;
$.ajax(
type: "post",
url:"/login",
data:
username:data.userName,
pwd:data.password
,
success: function (data)
if (data.code == 200)
layer.msg(data.msg);
localStorage.setItem("role",data.data);
window.location.href="/index";
else
layer.msg(data.msg, icon: 5);
);
else
layer.msg('验证码不正确');
return false;
);
);
效果图
login.htm全部代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>人力资源管理系统-登陆</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="*" http-equiv="Access-Control-Allow-Origin">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no" name="format-detection">
<link media="all" rel="stylesheet" th:href="@../../captcha/lib/font-awesome/css/font-awesome.css">
<link media="all" rel="stylesheet" th:href="@../../lib/layui-v2.6.3/css/layui.css">
<link media="all" rel="stylesheet" th:href="@../../captcha/disk/slidercaptcha.css">
<style>
html, body width: 100%;height: 100%;overflow: hidden
body background: #1E9FFF;
body:after content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;
.layui-container width: 100%;height: 100%;overflow: hidden
.admin-login-background width:360px;height:300px;position:absolute;left:50%;top:30%;margin-left:-180px;margin-top:-100px;
.logo-title text-align:center;letter-spacing:2px;padding:14px 0;
.logo-title h1 color:#1E9FFF;font-size:25px;font-weight:bold;
.login-form background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;
.login-form .layui-form-item position:relative;
.login-form .layui-form-item label position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;
.login-form .layui-form-item input padding-left:36px;
.captcha width:60%;display:inline-block;
.captcha-img display:inline-block;width:34%;float:right;
.captcha-img img height:34px;border:1px solid #e6e6e6;height:36px;width:100%;
</style>
</head>
<body>
<div class="layui-container">
<div class="admin-login-background">
<div class="layui-form login-form">
<form action="" class="layui-form">
<div class="layui-form-item logo-title">
<h1>人力资源管理系统登录</h1>
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-username"></label>
<input autocomplete="off" class="layui-input" lay-verify="required|account" name="userName" placeholder="用户名" type="text" value="admin">
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-password"></label>
<input autocomplete="off" class="layui-input" lay-verify="required|password" name="password" placeholder="密码" type="password" value="admin">
</div>
<div class="layui-form-item" style="height: 200px">
<div id="captcha"></div>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-filter="login" lay-submit="">登 入</button>
</div>
</form>
<div>
<div style="width:310px;text-align: center">
<a href="/sys/register" style="color: #1E9FFF">注册账号</a>
</div>
</div>
</div>
</div>
</div>
<script charset="utf-8" th:src="@../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script charset="utf-8" th:src="@../../lib/layui-v2.6.3/layui.js"></script>
<script charset="utf-8" th:src="@../../lib/jq-module/jquery.particleground.min.js"></script>
<script charset="utf-8" th:src="@../../captcha/disk/longbow.slidercaptcha.js"></script>
<script>
var l = false;
sliderCaptcha(
id: 'captcha',
width: 300,
height: 150,
sliderL: 42,
sliderR: 9,
offset: 5,
loadingText: '正在加载中...',
failedText: '再试一次',
barText: '向右滑动填充拼图',
repeatIcon: 'fa fa-redo',
setSrc: function ()
return 'http://localhost:8080/images/Pic' + Math.round(Math.random() * 4) + '.jpg';
, onSuccess: function ()
l = true;
);
layui.use(['form','jquery'], function ()
var form = layui.form,
layer = layui.layer;
// 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location;
// 进行登录操作
form.on('submit(login)', function (data)
data = data.field;
//验证码
if (l==true)
if (data.sno == '')
layer.msg('学号不能为空');
return false;
if (data.password == '')
layer.msg('密码不能为空');
return false;
$.ajax(
type: "post",
url:"/login",
data:
username:data.userName,
pwd:data.password
,
success: function (data)
if (以上是关于SpringBoot+Layui+SliderCaptcha滑块验证码登录的主要内容，如果未能解决你的问题，请参考以下文章