Java Web學習(14)：階段專案小案例之實現使用者登入(不使用資料庫)
阿新 • • 發佈：2019-01-30
實現使用者登入小例子的專案描述：
使用者名稱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，在登入介面輸入正確後也是可以的：
