项目刚开始忘了写了 前端已经写得差不多了 先放上图赶下进度吧 之后会好好写得
前端页面css布局不用多说
这里主要引用了两个插件 “极验“还有”swiper”
这两个插件 =.=怎么说本身应该并没有坑可能是我太笨了 挖了个不大不小的坑
极验给了两个api一个是表单提交一个是ajax提交
这里给一下极验官网的文档
极验的给的demo目录挺友好比如我用的idea直接将解压缩的文件复制粘贴到项目里就行 弄好了的目录如下
然后我们打开login.jsp
看到了js需要修改的js块` var handler = function (captchaObj) {
$("#submit").click(function (e) {
var result = captchaObj.getValidate();
if (!result) {
$("#notice").show();
setTimeout(function () {
$("#notice").hide();
}, 2000);
} else {
$.ajax({
url: 'gt/ajax-validate2',
type: 'POST',//这个是ajax的提交方式
dataType: 'json',//类型
data: {//这里就是ajax要提交的数据 我就在这跌了很傻的一个跟头
auto_login: document.getElementById("auto_login").checked,//这是我加的参数用来传入书否记住密码复选框的状态
username: $('#username').val(),
password: $('#password').val(),
geetest_challenge: result.geetest_challenge,
geetest_validate: result.geetest_validate,
geetest_seccode: result.geetest_seccode
},
success: function (data) {
if (data.status === 'success') {
alert('登录成功');
} else if (data.status === 'fail') {
alert('用户名或密码输入错误请重试!');
captchaObj.reset();//重置验证按钮 不知道啥作用可以注释试一试
}
}
})
}
e.preventDefault();
});
// 将验证码加到id为captcha的元素里,同时会有三个input的值用于表单提交
captchaObj.appendTo("#captcha2");
captchaObj.onReady(function () {
$("#wait2").hide();
});
// 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
};
$.ajax({
url: "gt/register2?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
// 调用 initGeetest 初始化参数
// 参数1:配置参数
// 参数2:回调,回调的第一个参数验证码对象,之后可以使用它调用相应的接口
initGeetest({
gt: data.gt,
challenge: data.challenge,
new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
offline: !data.success, // 表示用户后台检测极验服务器是否宕机,一般不需要关注
product: "float", // 产品形式,包括:float,popup
width: "100%"
// 更多配置参数请参见:http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, handler);
}
});`
至此jsp方面修改完毕
而servlet上需要修改的就是参数也就是geetestConfig中的公钥私钥 注册普惠版在后台就有
StartCaptchaServlet 是验证调用的第一个servlet 不需要修改 这个servlet主要是和极验服务器验证
VerifyLoginServlet 需要修改的就是添加检查用户名密码的方法 在判断result上面添加 比如
if (u_name.equals("1135644844")&u_pwd.equals("123456")){
gtResult=1;
}else {
gtResult=0;
}
如上代码就设定了用户名1135644844 密码123456
这里在if里不要使用==判断 否则如果第一次验证失败 之后的验证无论如何都是flase
还有用户名密码直接试用request.getParameter(“username”)获取就行
密码和其他传入的数据同理 因为用的是$.ajax()方法提交 所以servlet收到的数据只有data里面传入的 一定记得data里面要传入你需要的数据
至此极验基本部署完毕 同学们可以运行服务器看看啦>_<
swiper官网API写得很清楚 这里放歌官网就行啦我用的是3
有问题尽管问我就好啦 知无不言言无不尽~