JSP實現使用者登入、註冊和退出功能

JSP實現使用者登入、註冊和退出功能_JSP編程

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文講述使用JSP實現使用者登入，包括使用者登入、註冊和退出功能等。

1.系統使用案例圖

2.頁面流程圖

3.資料庫設計
本例使用oracle資料庫

建立使用者表

包括id，username，password和email，共4個欄位

-- Create table create table P_USER (  id  VARCHAR2(50) not null,  username VARCHAR2(20),  password VARCHAR2(20),  email VARCHAR2(50) ) tablespace USERS  pctfree 10  initrans 1  maxtrans 255  storage  (  initial 64  minextents 1  maxextents unlimited  ); -- Add comments to the table comment on table P_USER  is '使用者表'; -- Add comments to the columns comment on column P_USER.id  is 'id'; comment on column P_USER.username  is '使用者名稱'; comment on column P_USER.password  is '密碼'; comment on column P_USER.email  is 'email';

4.頁面設計
4.1登入頁面
login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>  <head>  <base href="<%=basePath%>">    <title>登入頁面</title>    <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <!--  <link rel="stylesheet" type="text/css" href="styles.css">  -->  </head>   <body>  <form action="login_action.jsp" method="post">   <table>    <tr>     <td colspan="2">登入視窗</td>    </tr>    <tr>     <td>使用者名稱：</td>     <td><input type="text" name="username" />     </td>    </tr>    <tr>     <td>密碼：</td>     <td><input type="text" name="password" />     </td>    </tr>    <tr>     <td colspan="2"><input type="submit" value="登入" /> <a href="register.jsp">註冊</a>     </td>    </tr>   </table>  </form> </body> </html>

頁面效果

3.2登入邏輯處理頁面
login_action.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ page import="java.sql.*" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>   <%  String username = request.getParameter("username");  String password = request.getParameter("password");  if(username==null||"".equals(username.trim())||password==null||"".equals(password.trim())){   //out.write("使用者名稱或密碼不可為空！");   System.out.println("使用者名稱或密碼不可為空！");   response.sendRedirect("login.jsp");   return;   //request.getRequestDispatcher("login.jsp").forward(request, response);  }  boolean isValid = false;  Connection con = null;// 建立一個資料庫連接  PreparedStatement pre = null;// 建立先行編譯語句對象，一般都是用這個而不用Statement  ResultSet result = null;// 建立一個結果集對象  try  {   Class.forName("oracle.jdbc.driver.OracleDriver");// 載入Oracle驅動程式   //System.out.println("開始嘗試串連資料庫！");   String url = "jdbc:oracle:" + "thin:@127.0.0.1:1521:orcl";// 127.0.0.1是本機地址，orcl是Oracle的預設資料庫名   String user = "scott";// 使用者名稱,系統預設的賬戶名   String pwd = "tiger";// 你安裝時選設定的密碼   con = DriverManager.getConnection(url, user, pwd);// 擷取串連   // System.out.println("串連成功！");   String sql = "select * from p_user where username=? and password=?";// 先行編譯語句，“？”代表參數   pre = con.prepareStatement(sql);// 執行個體化先行編譯語句   pre.setString(1, username);// 設定參數，前面的1表示參數的索引，而不是表中列名的索引   pre.setString(2, password);// 設定參數，前面的1表示參數的索引，而不是表中列名的索引   result = pre.executeQuery();// 執行查詢，注意括弧中不需要再加參數   if (result.next()){    isValid = true;   }  }  catch (Exception e)  {   e.printStackTrace();  }  finally  {   try   {    // 逐一將上面的幾個對象關閉，因為不關閉的話會影響效能、並且佔用資源    // 注意關閉的順序，最後使用的最先關閉    if (result != null)     result.close();    if (pre != null)     pre.close();    if (con != null)     con.close();    //System.out.println("資料庫連接已關閉！");   }   catch (Exception e)   {    e.printStackTrace();   }  }  if(isValid){   System.out.println("登入成功！");   session.setAttribute("username", username);   response.sendRedirect("welcome.jsp");   return;  }else{   System.out.println("登入失敗！");   response.sendRedirect("login.jsp");   return;  }  %>

使用JDBC串連資料庫，如果使用者名稱或密碼為空白時，還是跳轉到登入頁面login.jsp
如果使用者名稱和密碼不為空白，進行串連資料庫查詢使用者表，如果能夠查詢到記錄，表示登入成功，將使用者資訊儲存到session，跳轉到歡迎頁面welcome.jsp

如果根據使用者名稱和密碼查詢不到記錄，表示登入失敗，重新跳轉到登入頁面login.jsp

3.3歡迎頁面
welcome.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>  <head>  <base href="<%=basePath%>">    <title>My JSP 'welcom.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <!--  <link rel="stylesheet" type="text/css" href="styles.css">  -->  </head>   <body>  <table>   <tr>    <td><img src="images/logo4.png" />    </td>    <td><img src="images/logo2.png" height="90" />    </td>   </tr>   <tr>    <td colspan="2"><hr />    </td>   </tr>   <tr>    <td>     <table>      <tr>       <td><a>Main</a>       </td>      </tr>      <tr>       <td><a>Menu1</a>       </td>      </tr>      <tr>       <td><a>Menu2</a>       </td>      </tr>      <tr>       <td><a>Menu3</a>       </td>      </tr>      <tr>       <td><a>Menu4</a>       </td>      </tr>      <tr>       <td><a>Menu5</a>       </td>      </tr>      <tr>       <td><a>Menu6</a>       </td>      </tr>      <tr>       <td><a>Menu7</a>       </td>      </tr>      <tr>       <td><a>Menu8</a>       </td>      </tr>     </table></td>    <td>     <form action="loginout.jsp" method="post">      <table>       <tr>        <td colspan="2">登入成功!</td>       </tr>       <tr>        <td>歡迎你，</td>        <td>${username }</td>       </tr>       <tr>        <td colspan="2"><input type="submit" value="退出" /></td>       </tr>      </table>     </form></td>   </tr>  </table> </body> </html>

使用EL運算式展示使用者資訊
效果

3.4歡迎頁面退出邏輯處理頁面
loginout.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>  <head>  <base href="<%=basePath%>">    <title>My JSP 'loginout.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <!--  <link rel="stylesheet" type="text/css" href="styles.css">  -->   </head>   <body>  <%  session.removeAttribute("username");  response.sendRedirect("login.jsp");  %>  </body> </html>

將session的使用者資訊移除，跳轉到登入頁面login.jsp
3.5註冊頁面
register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>  <head>  <base href="<%=basePath%>">    <title>註冊頁面</title>    <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <!--  <link rel="stylesheet" type="text/css" href="styles.css">  -->  </head>   <body>  <form action="register_action.jsp" method="post">   <table>    <tr>     <td colspan="2">註冊視窗</td>    </tr>    <tr>     <td>使用者名稱：</td>     <td><input type="text" name="username" /></td>    </tr>    <tr>     <td>密碼：</td>     <td><input type="text" name="password1" /></td>    </tr>    <tr>     <td>確認密碼：</td>     <td><input type="text" name="password2" /></td>    </tr>    <tr>     <td>email：</td>     <td><input type="text" name="email" /></td>    </tr>    <tr>     <td colspan="2"><input type="submit" value="註冊" /> <a href="login.jsp">返回</a></td>    </tr>   </table>  </form> </body> </html>

當在登入頁面點擊“註冊“時開啟使用者註冊頁面
效果

3.6註冊邏輯處理頁面
register_action.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ page import="java.sql.*" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>  <%  String username = request.getParameter("username");  String password1 = request.getParameter("password1");  String password2 = request.getParameter("password2");  String email = request.getParameter("email");  if(username==null||"".equals(username.trim())||password1==null||"".equals(password1.trim())||password2==null||"".equals(password2.trim())||!password1.equals(password2)){   //out.write("使用者名稱或密碼不可為空！");   System.out.println("使用者名稱或密碼不可為空！");   response.sendRedirect("register.jsp");   return;   //request.getRequestDispatcher("login.jsp").forward(request, response);  }  boolean isValid = false;  Connection con = null;// 建立一個資料庫連接  PreparedStatement pre = null;// 建立先行編譯語句對象，一般都是用這個而不用Statement  ResultSet result = null;// 建立一個結果集對象  try  {   Class.forName("oracle.jdbc.driver.OracleDriver");// 載入Oracle驅動程式   //System.out.println("開始嘗試串連資料庫！");   String url = "jdbc:oracle:" + "thin:@127.0.0.1:1521:orcl";// 127.0.0.1是本機地址，orcl是Oracle的預設資料庫名   String user = "scott";// 使用者名稱,系統預設的賬戶名   String pwd = "tiger";// 你安裝時選設定的密碼   con = DriverManager.getConnection(url, user, pwd);// 擷取串連   //System.out.println("串連成功！");   String sql = "select * from p_user where username=?";// 先行編譯語句，“？”代表參數   pre = con.prepareStatement(sql);// 執行個體化先行編譯語句   pre.setString(1, username);// 設定參數，前面的1表示參數的索引，而不是表中列名的索引   result = pre.executeQuery();// 執行查詢，注意括弧中不需要再加參數   if (!result.next()){    sql = "insert into p_user(id,username,password,email) values(?,?,?,?)";// 先行編譯語句，“？”代表參數    pre = con.prepareStatement(sql);// 執行個體化先行編譯語句    pre.setString(1, System.currentTimeMillis()+"");// 設定參數，前面的1表示參數的索引，而不是表中列名的索引    pre.setString(2, username);// 設定參數，前面的1表示參數的索引，而不是表中列名的索引    pre.setString(3, password1);// 設定參數，前面的1表示參數的索引，而不是表中列名的索引    pre.setString(4, email);// 設定參數，前面的1表示參數的索引，而不是表中列名的索引    pre.executeUpdate();// 執行    isValid = true;   }  }  catch (Exception e)  {   e.printStackTrace();  }  finally  {   try   {    // 逐一將上面的幾個對象關閉，因為不關閉的話會影響效能、並且佔用資源    // 注意關閉的順序，最後使用的最先關閉    if (result != null)     result.close();    if (pre != null)     pre.close();    if (con != null)     con.close();    //System.out.println("資料庫連接已關閉！");   }   catch (Exception e)   {    e.printStackTrace();   }  }  if(isValid){   System.out.println("註冊成功，請登入！");   response.sendRedirect("login.jsp");   return;  }else{   System.out.println("使用者名稱已存在！");   response.sendRedirect("register.jsp");   return;  }  %>

首先判斷使用者名稱和密碼是否為空白，以及密碼和確認密碼是否一致，如果上述條件不成立時，返回到註冊頁面register.jsp
如果上述條件成立，就根據使用者名稱到資料庫查詢，如果能夠查詢到記錄，說明使用者名稱已經存在，返回到註冊頁面register.jsp

如果查詢不到記錄，說明此使用者名稱可用來進行註冊，使用JDBC向使用者表插入1條記錄；之後跳轉到登入頁面login.jsp

4.總結
本例使用JSP實現使用者登入，編寫過程中，主要遇到了2個小問題。

4.1查詢之後，判斷記錄是否存在，需要使用 if (!result.next())，而不是通常查詢中使用的while迴圈，這一點需要注意，特別是在處理註冊時。

4.2關於JSP頁面的編譯報錯問題。

當在JSP小指令碼中中使用return時要謹慎，很可能會出現編譯錯誤。

處理方法是，JSP首頁面只使用JSP小指令碼，保證return之後沒有還需要編譯的內容即可。

以上即為使用JSP實現使用者登入的簡單介紹，希望對大家的學習有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More