版权声明:帅气Dee海绵宝宝 https://blog.csdn.net/xyjcfucdi128/article/details/84568896
效果图:还用到了 bootStrop的 页面的遮罩效果
jsp页面代码(login.jsp代码)我这里对密码进行了MD5加密防止抓包时候能看到用户的登陆密码 我给了一个固定的盐,
加盐的话自己后台的密码加盐是什么样的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" isELIgnored="false" pageEncoding="utf-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="ftm" uri="http://java.sun.com/jsp/jstl/fmt" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" /><!-- multipart/form-data; -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>登录页面</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/md5/md5.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bootstrap.min.js"></script>
<link href="<%=request.getContextPath() %>/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/login.css" media="all" />
<script type="text/javascript">
$(function(){
jQuery(document).ready(function($) {
$('.theme-login').ready(function(){
$('.theme-popover-mask').fadeIn(100);
$('.theme-popover').slideDown(200);
})
$('.theme-poptit .close').click(function(){
$('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
})
})
$("#buttonLoginUser").click(function() {
//console.log("140b6ce18716153fba3bf98a52722bd5");
var pass = $("#password").val();
var salt ='{hyll}';
var user=$("#username").val();
pass=pass+salt;
//alert(pass);
pass=hex_md5(pass);//密码加盐
//console.log(pass);
//alert(pass);
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/login" ,//url "/userLogin/loginUser" /login
data: {username:user,password:pass},//$('#login').serialize()
success: function (result) {
$('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
location.reload();
},
error : function() {//errorThrown 返回错误信息
$(".ipt").val("");
$(".error").html("账号或密码错误");
}
});
})
if('${sessionScope.SPRING_SECURITY_CONTEXT==null}'){
//bootStrop的遮罩效果
$("#myModal").modal('show');
$('#myModal').modal({backdrop: 'static', keyboard:false});
}
})
</script>
</head>
<body>
<div class="theme-popover" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="theme-poptit" >
<a href="javascript:history.go(-1)" title="返回上一级" class="close">×</a>
<%--<a href="javascript:;" onclick="closeLogin()" title="关闭" class="close">×</a>--%>
<center><h3>登录</h3></center>
</div>
<div class="theme-popbod dform">
<c:if test="${sessionScope.loginException!=null}">${sessionScope.loginException}</c:if>
<form id="login" class="theme-signin" name="loginform" action="" method="post">
<ol>
<!-- <li ><h4>登录</h4></li> -->
<li><strong>用户名:</strong><input class="ipt" id="username" type="text" name="username" size="20" /></li>
<li><strong>密码:</strong><input class="ipt" id="password" type="password" name="password" size="20" /></li>
<li class="error" style="color: #E10000;font-size: 12px"></li>
<li><input class="btn btn-primary" id="buttonLoginUser" type="button" name="submit" value=" 登 录 " /></li>
</ol>
</form>
</div>
</div>
</body>
</html>
其他页面引用 login.jsp:先判断 用户是否登陆,没有登陆就直接显示 登陆框
<c:if test="${sessionScope.SPRING_SECURITY_CONTEXT==null}">
<%-- 登录 --%>
<%@ include file="login.jsp"%>
</c:if>