用户登陆---弹出登陆框（jsp页面）

最新推荐文章于 2023-10-18 20:16:46 发布

帅气Dee海绵宝宝

最新推荐文章于 2023-10-18 20:16:46 发布

阅读量7.6k

点赞数 1

分类专栏：前端文章标签： jsp

本文链接：https://blog.csdn.net/xyjcfucdi128/article/details/84568896

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图：还用到了 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>

github 插件下载地址：https://github.com/2224132867/login-css-js

帅气Dee海绵宝宝

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
用户登陆---弹出登陆框（jsp页面）

效果图：还用到了 bootStrop的页面的遮罩效果 jsp页面代码（login.jsp代码）我这里对密码进行了MD5加密防止抓包时候能看到用户的登陆密码我给了一个固定的盐，加盐的话自己后台的密码加盐是什么样的&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...
复制链接

扫一扫