Java Web學習(19)：階段專案之使用JSP+JavaBean完成使用者登入
阿新 • • 發佈：2019-02-07
Model1簡介
Java Web應用程式的開發總體上來說有兩個模型就是Model1和Model2。Model1模型出現前，整個Web應用
的情況：幾乎全部由JSP頁面組成，JSP頁面接收處理客戶端請求，對請求處理後直接做出響應。這樣的弊端顯露無
疑：在介面層充斥著大量的業務邏輯的程式碼和資料訪問層的程式碼，Web程式的可擴充套件性和可維護性特別差。
JavaBean的出現可以使JSP頁面中使用JavaBean封裝的資料或者呼叫JavaBean的業務邏輯程式碼，這樣大大提高
了程式的可維護性。
Model1圖示：
在Model1中，由Jsp頁面去呼叫Javabean。
Javabean既可以封裝資料同時也可以封裝業務邏輯。
Javabean一般把屬性設計為私有，使用setter和getter訪問屬性。
Javabean就是符合某種設計規範的Java類。
專案案例
使用JSP+JavaBean完成使用者登入功能。相關的程式碼提供出來，還有一部分的JS程式碼和圖片沒有提供。
整個專案的目錄結構：
JavaBean實體類Users：
<span style="font-size:18px;">package com.entity; import java.io.UnsupportedEncodingException; /** * 使用者實體類 * @author Administrator * @date 2016年7月11日 */ public class Users { //私有屬性 private String username; private String password; //無參構造器 public Users(){ } //通過重構得到setter和getter方法 public String getUsername() { return username; } public void setUsername(String username) throws UnsupportedEncodingException { this.username = toUTF8(username); } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } private String toUTF8(String str) throws UnsupportedEncodingException { return new String(str.getBytes("iso-8859-1"),"UTF-8"); } }</span>
JavaBean業務邏輯類UsersDAO：
<span style="font-size:18px;">package com.dao; import com.entity.Users; /** * 使用者的業務邏輯類 * @author Administrator * @date 2016年7月11日 */ public class UsersDAO { //使用者登入方法 public boolean usersLogin(Users u){ if("admin".equals(u.getUsername())&&"123456".equals(u.getPassword())){ return true; }else{ return false; } } }</span>
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>
login.css原始碼：
<span style="font-size:18px;">@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;
}</span>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>
<jsp:useBean id="loginUser" class="com.entity.Users" scope="page"></jsp:useBean>
<jsp:useBean id="userDAO " class="com.dao.UsersDAO" scope="page"></jsp:useBean>
<jsp:setProperty property="*" name="loginUser"/>
<%
//防止中文亂碼
request.setCharacterEncoding("utf-8");
//如果使用者和密碼都等於admin,則登入成功
if(userDAO.usersLogin(loginUser)){
//將使用者名稱封裝到session物件中
session.setAttribute("loginUser", loginUser.getUsername());
//驗證正確轉發到成功頁面
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_failure.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：
輸入admin和123：
