基于layui框架的登录验证

基于layui框架的登录验证

开发工具：idea,tomcat，ssm框架，以及引入的layui
一些关于框架的搭建在此略过，以后可能会发布一些相关文章
这里只改变了背景图片,是一个现成的页面

//form表单部分代码
<form class="layui-form">
    <div class="login_face"><img src="/sources/lay/images/face.jpg" class="userAvatar"></div>
    <div class="layui-form-item input-item">
        <label for="userName">用户名</label>
        <input type="text" placeholder="请输入用户名" autocomplete="off" id="userName" name="username" class="layui-input" lay-verify="required">
    </div>
    <div class="layui-form-item input-item">
        <label for="password">密码</label>
        <input type="password" placeholder="请输入密码" autocomplete="off" id="password" name="password" class="layui-input" lay-verify="required">
    </div>
    <div class="layui-form-item input-item" id="imgCode">
        <label for="code">验证码</label>
        <input type="text" placeholder="请输入验证码" autocomplete="off" id="code" name="code" class="layui-input" lay-verify="required">
        <img src="/user/getcode" onclick="this.src=this.src+'?'" id="codehz">
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
    </div>
</form>

   前端页面主要对三个框的name属性做了规范，以便controller入参自动封装，分别是username,password,和code
   首先编写了一个工具类ResultObject，用来封装校验后的结果信息，属性code大小表示查询状态，msg则是弹出信息提示，-1，0，1三种状态分别表示验证码错误，无此用户，用户查询成功

   这里编写controller，业务都在service里面处理

@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
        /*登录验证*/
    @RequestMapping("/login")
    @ResponseBody
    public ResultObject login(UserVo user, HttpServletRequest request, HttpServletResponse response){
        ResultObject resultObject=userService.login(user, request, response);
        return resultObject;
    }
 /*获取验证码*/
    @RequestMapping("/getcode")
    public void getCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
        userService.getCode(request,response );

    }

}

service代码

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;
    

    @Override
    public ResultObject login(UserVo user, HttpServletRequest request, HttpServletResponse response) {
       String code=user.getCode();//拿到验证码
        String session_code=request.getSession().getAttribute("code").toString();//拿到存储在服务器的校验验证码
        String msg="";
        Integer status_code=0;
        if(code.equals(session_code)){//验证码正确
            List<User> login = userDao.login(user);
            if(login.size()>0){
                msg="登陆成功";
                status_code=1;
            }else{
                msg="登陆失败";
                status_code=0;
            }
           
        }else {
            msg="验证码错误";
            status_code=-1;
        }
        /*将旧验证码失效*/
        request.getSession().setAttribute("code", "");

        ResultObject resultObject = new ResultObject(status_code,msg);
        return resultObject;
    }

    @Override
    public void getCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
            /*生成验证码*/
        ICaptcha captcha= CaptchaUtil.createLineCaptcha(116, 36);
        /*把码值存放在session*/
        request.getSession().setAttribute("code",captcha.getCode() );
        /*图片回写到前端*/
        captcha.write(response.getOutputStream());
    }
}

   其中包括两个方法，分别对应controller中对service的调用,login方法拿到前台的用户数据，先与session中存放的验证码进行比较，一致后再进行数据库查询操作，最后返回一个ResultObject对象，包含用户登录状态，同时将session里存放的当前验证码设置失效（否则此验证码将长期有效，容易遭到破解），getcode方法则是直接参考链接的插件htool
直接通过输出流将验证码图片返回前台

login前台对应的js文件

 //登录按钮
    form.on("submit(login)",function(data){
        var _this=$(this);
        $(this).text("登录中...").attr("disabled","disabled").addClass("layui-disabled");
       $.ajax({
           url:'/user/login',
           type:"get",
           data:data.field,
           success:function(data){
               /*验证码通过*/
               if(data.code!=-1){
                   /*查找到用户信息*/
                   if(data.code>0){
                       layer.msg(data.msg,function () {
                           window.location.href = "/index.jsp";
                       })
                   }else{//未查找到信息
                       layer.msg(data.msg);
                       $("#codehz").click();//刷新验证码
                       /*将按钮恢复为可登录状态*/
                       _this.text("登录").attr("disabled",false).removeClass("layui-disabled");
                   }
               }else{//验证码输入错误则重新生成
                   layer.msg(data.msg);
                   _this.text("登录").attr("disabled",false).removeClass("layui-disabled");
                   $("#codehz").click();//刷新验证码
               }
           }
       })
        return false;
    })

   值得一提的是，需要在用户登录失败后将登录按钮重置为可登录状态，同时需要在登录失败后再次发起getcode请求获取新的验证码（方法：在图片src属性增加’?'以保证请求更新，其实就是带假参数，这里采用点击事件是则利用了前台jsp里设置的点击时间更新请求的写法）