基于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 {@Autowiredprivate UserService userService;/*登录验证*/@RequestMapping("/login")@ResponseBodypublic 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代码
@Servicepublic class UserServiceImpl implements UserService {@Autowiredprivate UserDao userDao;@Overridepublic 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;}@Overridepublic 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里设置的点击时间更新请求的写法）
