由于不能直接跳转,需要方法跳页面
pageController层跳页面:
@RequestMapping("pageLogin")
public String pageLogin(){
return "login";
}
@RequestMapping("pageIndex")
public String pageIndex(){
return "index";
}
下一步,开始写后台登录
controller层 登录+验证码
@RequestMapping("loginQuery")
public Integer loginQuery(UserBean userbean, HttpSession session) throws UnknownHostException {
return loginService.loginQuery(userbean, session);
}
@RequestMapping("gainCode")
public void gainCode(HttpServletRequest request, HttpServletResponse response){
CheckImgUtil.buildCheckImg(request,response);
}
在service实现类上
Integer code=0;
String imgCode = (String) session.getAttribute("checkcode");
if (!imgCode.equalsIgnoreCase(userbean.getImgCode())) {//判断验证码
code = 4;
} else {
QueryWrapper<UserBean> wrapper = new QueryWrapper<>();
UserBean user = longinDao.selectOne(wrapper.eq("userName", userbean.getUserName()));
if (user == null) {
code = 2;
} else {
if (!user.getUserPwd().equals(userbean.getUserPwd())) {
code = 3;
} else {
code = 1;
session.setAttribute("bean", user);
}
}
}
return code;
}
然后就是前台页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">
<!-- 必须先引入jquery的js -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
<!-- 引入bootbox的js文件 弹框 -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
</head>
<body style="text-align: center;padding-top: 80px">
<h1>登录页面</h1>
<div class="container">
<form class="form-horizontal" id="loginForm">
<div class="form-group">
<label class="col-md-2 control-label col-md-offset-3">用户名:</label>
<div class="col-md-3">
<input class="form-control" type="text" id="userName" placeholder="请输入用户名" name="userName">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label col-md-offset-3">密码:</label>
<div class="col-md-3">
<input class="form-control" type="text" id="userPwd" placeholder="请输入密码" name="userPwd">
</div>
</div>
<div class="form-group">
<label for="imgCode" class="col-md-2 control-label col-md-offset-3">验证码:</label>
<div class="col-md-3">
<input class="form-control" id="imgCode" placeholder="请输入验证码" name="imgCode">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label col-md-offset-3"></label>
<div class="col-md-3">
<img id="imgCode2" src="../login/gainCode" onclick="refCode()">
<a href="javascript:refCode()">看不清,换一张</a>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-5">
<button type="button" class="btn btn-danger glyphicon glyphicon-plus" onclick="regis()">注册</button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success glyphicon glyphicon-ok" onclick="login()">登录</button>
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript">
//刷新验证码
function refCode(){
//jquery : attr("属性名","属性值") prop("属性名","属性值")
$("#imgCode2").attr("src","/login/gainCode?"+new Date().getTime());
}
//跳注册页面
function regis(){
location.href="/register";
}
//精确登录
function login(){
$.ajax({
url:"../login/loginQuery",
type:"post",
data:$("#loginForm").serialize(),
dataType:"json",
success:function(data){
if(data==1){
data="登录成功";
}else if(data==2){
data="用户名不存在";
}else if(data==3){
data="密码错误";
}else {
data="验证码错误";
}
bootbox.alert({
size:"small",
title:"提示",
message:data,
buttons:{
ok:{
label:"确定",
className:"btn-success glyphicon glyphicon-ok"
}
}
});
if(data=="登录成功"){
//跳转到index页面
location.href="../page/pageIndex";
}
}
})
}
</script>
</html>
总结:如果是无验证码版登录,去掉controller中的gainCode方法,在前端页面去掉相应到验证码获取,就可以实现无验证码版登录