Java Web学习(14)：阶段项目小案例之实现用户登录(不使用数据库)

最新推荐文章于 2024-05-31 11:02:07 发布

life is wonderful

最新推荐文章于 2024-05-31 11:02:07 发布

阅读量1w

点赞数 4

分类专栏： JavaWeb Java Web学习之路文章标签： JavaWeb JSP JSP内置对象验证用户登录 JavaEE

本文链接：https://blog.csdn.net/erlian1992/article/details/51909880

版权

Java Web学习之路同时被 2 个专栏收录

53 篇文章 79 订阅

订阅专栏

JavaWeb

46 篇文章 9 订阅

订阅专栏

实现用户登录小例子的项目描述：

用户名admin，密码123456，登录成功使用服务器内部转发到login_success.jsp页面，并且提示登录成功的用

户名，如果登录失败则请求重定向到login_failure.jsp页面。

先啦来看项目的具体目录结构：

项目具体实现过程：

首选来完成前端登录界面。

1)login.jsp页面源码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Page title -->
		<title>登录界面</title>
		<!-- End of Page title -->
		<!-- Libraries -->
		<link type="text/css" href="css/login.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/easyTooltip.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<!-- End of Libraries -->
</head>
<body>
     <div id="container">
          <div class="logo">
                 <a href="#"><img alt="" src="images/logo.png"></a>
          </div>
          <div id="box">
                 <form action="dologin.jsp" method="post">
                         <p class="main">
                                <label>用户名：</label>
                                <input type="text" name="username" value="" />
                                <label>密码：</label>
                                <input type="password" name="password" value="" />
                         </p>
                         <p class="space">
                                <input type="submit" value="登录" class="login" style="cursor: pointer;"> 
                         </p>
                 </form>
          </div>
     </div>
</body>
</html>

2)login.css页面源码：

@import 'css3.css';

* {
	margin: 0;
	padding: 0;
}

body {
	position: relative;
	height: 100%;
	background: #fff url('../images/loginbg.png') left top repeat-x;
	font-family: Tahoma, Arial, sans-serif;
}

img {
	border: 0;
}

#container {
	width: 960px;
	margin: 0 auto;
}

#container .logo {
	width: 230px;
	margin: 240px auto 0;
}

#container #box {
	clear: both;
	float: none;
	width: 70%;
	margin: 50px auto 0;
}

p.main label {
	float: left;
	padding: 5px;
	display: inline;
	margin-left: 40px;
	font-size: 13px;
	color: #000;
	margin-right: 10px;
}

#box p {
	clear: both;
	float: none;
	width: 100%;
}

p.main INPUT {
	background: url('../images/input.png') 0 0 repeat-x;
	border: 1px solid #d3d3d3;
	color: #555;
	padding: 5px;
	float: left;
	width: 200px;
}

input.login {
	float: right;
	padding: 3px 10px 3px 10px;
	color: #fff;
	font-size: 12px;
	text-decoration: none;
	border: 1px solid #555;
	background: url('../images/rep1.png') 50% 50% repeat-x;
	display: inline;
	margin-right: 5px;
}

span {
	font-size: 13px;
	color: #666;
}

.space {
	padding-top: 15px;
}

span input {
	margin-left: 125px;
	margin-right: 5px;
	border: 1px solid #111;
	background: #444;
	color: #fff;
}

3)相关的JS代码我们从网上下载引入；

再来构建登录用户信息的dologin.jsp验证页面的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dologin页面</title>
</head>
<body>
        <%
                      request.setCharacterEncoding("UTF-8");//防止中文乱码
		      String username ="";
		      String password ="";
		      
		      //获取用户名和密码
		      username = request.getParameter("username");
		      password = request.getParameter("password");
		      
		      //如果用户和密码都等于admin,则登录成功
		      if("admin".equals(username)&&"123456".equals(password)){
		    	  
		    	  //将用户名封装到session对象中
		         session.setAttribute("loginUser", username);
		         //验证正确转发到成功页面
		         request.getRequestDispatcher("login_success.jsp").forward(request, response);
		         
		      }
		      else{
		    	  //请求重定向到失败页面
		         response.sendRedirect("login_failure.jsp");
		      }
        %>
</body>
</html>

接着构建验证信息成功的login_success.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Page title -->
		<title>login_success页面</title>
		<!-- End of Page title -->
		<!-- Libraries -->
		<link type="text/css" href="css/login.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/easyTooltip.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<!-- End of Libraries -->
</head>
<body>
        <div id="container">
		     <div class="logo">
			    <a href="#"><img src="images/logo.png" alt="" /></a>
		     </div>
		     <div id="box">
		     <% 
		            String loginUser = "";
		            //防止用户名为空
		            if(session.getAttribute("loginUser")!=null){
		                loginUser = session.getAttribute("loginUser").toString();
		            }
		      %>
		      欢迎您<font color="red"><%=loginUser%></font>,登录成功！
		     </div>
	   </div>
</body>
</html>

最后构建验证信息失败的login_falure.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Page title -->
		<title>login_failure页面</title>
		<!-- End of Page title -->
		<!-- Libraries -->
		<link type="text/css" href="css/login.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/easyTooltip.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<!-- End of Libraries -->
</head>
<body>
        <div id="container">
		     <div class="logo">
			    <a href="#"><img src="images/logo.png" alt="" /></a>
		     </div>
		     <div id="box">
		            登录失败！请检查用户或者密码!<br>
		            <a href="login.jsp">返回登录</a>   
		     </div>
	   </div>
</body>
</html>

运行的结果：

首先是登录界面，输入正确的用户名admin和密码123456后，再点击登录：

输入错误的用户名或密码，点击登录之后：

最后可以点击超链接跳转到登录页面。

假如将验证的用户名改为中文：李思思，密码改为：666666，在登录界面输入正确后也是可以的：

life is wonderful

关注

4
点赞
踩
52

收藏

觉得还不错? 一键收藏
2
评论
Java Web学习(14)：阶段项目小案例之实现用户登录(不使用数据库)

实现用户登录小例子的项目描述：用户名admin，密码123456，登录成功使用服务器内部转发到login_success.jsp页面，并且提示登录成功的用户名，如果登录失败则请求重定向到login_failure.jsp页面。先啦来看项目的具体目录结构：项目具体实现过程：首选来完成前端登录界面。
复制链接

扫一扫