基于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里设置的点击时间更新请求的写法）