购物网站

项目刚开始忘了写了前端已经写得差不多了先放上图赶下进度吧之后会好好写得
网站首页

前端页面css布局不用多说
这里主要引用了两个插件 “极验“还有”swiper”
这两个插件 =.=怎么说本身应该并没有坑可能是我太笨了挖了个不大不小的坑

极验给了两个api一个是表单提交一个是ajax提交
这里给一下极验官网的文档

极验的给的demo目录挺友好比如我用的idea直接将解压缩的文件复制粘贴到项目里就行弄好了的目录如下
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
有问题尽管问我就好啦知无不言言无不尽~

猜你喜欢