Servlet+JavaBean+JSP打造Java Web註冊與登入功能

Servlet+JavaBean+JSP打造Java Web註冊與登入功能_java

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

上載者：User

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

採用Java Web所實現的MVC結構圖如下，其中控制器部分採用Servlet來實現，模型部分採用JavaBean來實現，而大部分的視圖採用Jsp頁面來實現。

思想基礎
JSP+JavaBean兩層結構工作原理應該是比較熟悉的，也比較好理解。
但是有一點必須要清楚就是使用者通過瀏覽器來發送網頁的請求，此請求到達伺服器後在伺服器端尋找對應的網頁，如果是首次請求（第二次就不用解釋執行了），對於JSP來說要產生Servlet，然後通過Servlet引擎來執行 Servlet，把調用JavaBean的結果嵌入到頁面中返回給使用者的瀏覽器。
JSP+JavaBean+Servlet三層結構的實質是多了一個Controller：Servlet來分發用戶端瀏覽器的請求。如果把起控制器作用的Servlet的作用理解為對用戶端的請求進行預先處理對理解Servlet將有很大的協助。通過web.xml設定檔可以找到使用者請求和特定的 Servlet的對應關係，每個Servlet都有一個特定的Servlet對象與之對應，所以說處理使用者請求的就是一個繼承自HttpServlet的 Servlet對象。

﹤!-- JSPC servlet mappings start --﹥   ﹤servlet﹥     ﹤servlet-name﹥ms1﹤/servlet-name﹥     ﹤servlet-class﹥news.FirstAction﹤/servlet-class﹥   ﹤/servlet﹥    ﹤servlet﹥     ﹤servlet-name﹥ms2﹤/servlet-name﹥     ﹤servlet-class﹥news.DetailAction﹤/servlet-class﹥   ﹤/servlet﹥ ﹤!-- JSPC servlet mappings end --﹥   ﹤servlet-mapping﹥     ﹤servlet-name﹥ms1﹤/servlet-name﹥     ﹤url-pattern﹥/newsmain﹤/url-pattern﹥   ﹤/servlet-mapping﹥    ﹤servlet-mapping﹥     ﹤servlet-name﹥ms2﹤/servlet-name﹥     ﹤url-pattern﹥/newsDetail﹤/url-pattern﹥   ﹤/servlet-mapping﹥

如上面所示的摘自web.xml的一段配置servlet，第一部分主要用來配置 Servlet與具體的Servlet對象關聯，第二部分主要用來配置請求由哪個Servlet處理，Servlet名字的關聯，處理請求就與具體 Servlet處理對象關聯起來，比如說，用戶端瀏覽器發來/newsmain的請求，它由ms1 servlet進行處理，通過ms1就能找到相對應的serlet對象news.FirstAction，即 /newsmain-﹥ms1-﹥news.FirstAction，這也就是設定檔的意義所在。到現在懂得了使用者/newsmain請求會被news.FirstAction類的對象進行處理，所以說，要看懂程式就要看懂FirstAction的作用是什麼就行了。比如說下面是 FirstAction的一個實現。

public final class FirstAction extends HttpServlet {  protected void service(HttpServletRequest req, HttpServletResponse resp)   throws ServletException, IOException {   DB db = new DB();  HttpSession session = req.getSession();   try {   session.setAttribute(Constants.NEWS_LIST_KEY, News    .SearchNewsTitle(db));  } catch (Exception e) {   e.printStackTrace();  }   db.close();  String target = "/P43_News/newsMain.jsp";  resp.sendRedirect(target);  }  }

通過這個實現可以看到，當伺服器收到用戶端請求執行 News.SearchNewsTitle(db)的操作，然後把傳回值通過session.setAttribute放到session裡，然後通過 resp.sendRedirect(target)間接轉移到newsMain.jsp，這樣在newsMain.jsp裡通過 session.getAttribute函數就可以得到在儲存在session裡的對應值。
回過頭來就容易看出JSP+JavaBean工作原理和JSP+JavaBean+Servlet工作原理的不同了，兩層結構必須把預先處理放在JSP中進行，比如說 News.SearchNewsTitle(db)，三層結構先把預先處理在Servlet裡進行了，然後相當於把這個處理結果通過Session返回給 JSP，讓JSP更關注於介面的顯示。

登陸註冊模組需求
1 註冊
1.1 使用者的註冊表單（使用者名稱，密碼，郵箱，暱稱，驗證碼）
1.2 提交註冊:要做（使用者名稱，密碼，郵箱，暱稱，驗證碼）的校正。
1.2.1 使用者名稱,密碼,郵箱,暱稱是在用戶端瀏覽器完成的，通過JS來實現。
1.2.2 驗證碼的是要在伺服器端的程式完成的。
2.如果註冊表單的校正通過, 那麼就進行商務邏輯的判斷。
2.1 如果使用者已經存在, 告訴使用者錯誤資訊。
2.2 如果郵箱已經存在, 告訴使用者錯誤資訊。
2.3 如果都不存在 .則進行第3步。
3. 將使用者的資訊儲存到資料庫中
4. 註冊成功, 跳轉到登入頁面
5. 登陸
5.1 將使用者的登陸資訊發送到後台進行驗證
5.2 如果驗證成功，則跳轉到首頁
5.3 如果跳轉失敗，則跳轉到登陸頁面，並提示錯誤資訊。

項目目錄結構
項目的源碼分成四個包檔案，分別用來存模數型，視圖，控制器和工具類，具體檔案如下：

對於視圖，我們定義三個JSP頁面，如下所示：

定義視圖
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"> <title>登入的表單</title> </head> <body>   <font color="red">${message }</font>  <a href="regist.jsp">註冊新帳號</a>  <form action="${pageContext.request.contextPath }/login" method="post">    使用者名稱:<input type="text" name="username"><br/>    密碼:<input type="password" name="password"><br/>    <input type="submit" value="登入"></form> </body> </html>

index.jsp頁面

<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!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>Insert title here</title> </head> <body>     <font color="red">${message }</font>      <%   if(request.getSession().getAttribute("username")==null)   {     response.sendRedirect("login.jsp");   }   else{    %>     <font color="red">"歡迎您：" <%=request.getSession().getAttribute("username").toString() %></font>    <%       }  %></body> </html>

regist.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>使用者註冊的表單</title> <script type="text/javascript">   function changeImage(){    document.getElementById("image").src="${pageContext.request.contextPath }/checkimage?" + new Date().getTime()  }  function validateForm(){    // 做 使用者名稱 , 密碼, 郵箱, 暱稱的校正    var username= document.getElementById("username").value;    if(username==""){      alert("使用者名稱 不可為空");      return false;    }    var password= document.getElementById("password").value;    if(password==""){      alert("密碼 不可為空");      return false;    }    var repassword= document.getElementById("repassword").value;    if(password!=repassword){      alert("密碼 必須 一致 ");      return false;    }    var nickname= document.getElementById("nickname").value;    if(nickname==""){      alert("暱稱 不可為空");      return false;    }    // ^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$    var email= document.getElementById("email").value;    if(email.match("^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$")==null){      alert("郵箱地址 不正確 ");      return false;    }  }</script> </head> <body>   <h3>使用者註冊的表</h3>  <font color="red">${message }</font>  <form action="${pageContext.request.contextPath }/regist" onsubmit="return validateForm();" method="post">    <table border="1">      <tr>        <td>使用者名稱</td>        <td>          <input type="text" name="username" id="username1" v>        </td>      </tr>      <tr>        <td>密碼</td>        <td>          <input type="password" name="password" id="password">        </td>      </tr>      <tr>        <td>請確認密碼</td>        <td>          <input type="password" name="repassword" id="repassword">        </td>      </tr>      <tr>        <td>暱稱</td>        <td>          <input type="text" name="nickname" id="nickname">        </td>      </tr>      <tr>        <td>郵箱</td>        <td>          <input type="text" name="email" id="email">        </td>      </tr>      <tr>        <td>驗證碼</td>        <td>          <input type="text" name="checkcode">          <img src="${pageContext.request.contextPath }/checkimage"           style="cursor: pointer;" id="image" onclick="changeImage();">        </td>      </tr>      <tr>        <td></td>        <td>          <input type="submit" value="註冊">        </td>      </tr>    </table>  </form></body> </html>

定義模型
User模型：

package com.vs2022.model;public class User {  private String username;  private String password;  private String nickname;  private String email;  // alt+shft+ s // 彈出 覆蓋 方法的 對話方塊 。  public String getUsername() {    return username;  }  public void setUsername(String username) {    this.username = username;  }  public String getPassword() {    return password;  }  public void setPassword(String password) {    this.password = password;  }  public String getNickname() {    return nickname;  }  public void setNickname(String nickname) {    this.nickname = nickname;  }  public String getEmail() {    return email;  }  public void setEmail(String email) {    this.email = email;  }}

UserOperation模型

package com.vs2022.model;import com.vs2022.utils.DBUtil;public class UserOperation {  public final static int USERNAMEEXIST=1;  public final static int EMAILEXIST=2;  public final static int SUCCESS=3;  public final static int FAIL=4;  public int regist(User user){    DBUtil db = new DBUtil();    if(db.serchUserName(user.getUsername())){      // 說明 使用者名稱 已經存在了       return USERNAMEEXIST;    }    if(db.serchEmail(user.getEmail())){      // 說明郵箱已經存在       return EMAILEXIST;    }    // 如果 走到 這裡, 則說明 ,郵箱 使用者名稱都不存咋, 那麼 就讓其註冊 . 添加 到資料庫中    db.updateUser(user);    return SUCCESS;  }  public int login(User user) {    DBUtil db = new DBUtil();    if(db.loginSuccess(user.getUsername(), user.getPassword())){      // 說明 找到 了使用者 名 和密碼 都正確的      return SUCCESS;    }    return FAIL;  }}

CheckCode模型

package com.vs2022.model;import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.util.Hashtable;import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession;public class CheckCode {private String getRandomString() {   int ranNum = (int) (Math.random() * 9000) + 1000;  return ranNum + "";}public void getCode(int width, int height, HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{   // 在記憶體中建立圖象  BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);  Graphics g=image.getGraphics();   //建立Graphics對象,其作用相當於畫筆  g.setColor(Color.getColor("F8F8F8"));  g.fillRect(0, 0, width, height);  //繪製背景  Font mfont=new Font("楷體",Font.BOLD,16); //定義字型樣式  g.setFont(mfont);          //設定字型  g.setColor(Color.RED);  //產生隨機數  String rans=getRandomString();  //將隨機數寫入會話  HttpSession session = request.getSession();  session.setAttribute("check", rans);  //將隨機數寫入圖片  g.drawString(rans, 5, 20);  // 圖象生效   g.dispose();  //輸出映像  ImageIO.write(image, "JPEG", response.getOutputStream());}}

定義控制器
LoginServlet類

package com.vs2022.controller;import java.io.IOException; import java.io.PrintWriter;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.vs2022.model.User; import com.vs2022.model.UserOperation;public class LoginServlet extends HttpServlet {  public void doGet(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {    // 完成 登入的 邏輯     String username = request.getParameter("username");    String password = request.getParameter("password");    User user = new User();    user.setUsername(username);    user.setPassword(password);    // 調用 業務功能 javabean 類 去實現 登入的 具體 商務邏輯    UserOperation us = new UserOperation();    // 傳回值 ?     int i = us.login(user);     if(i==4){      // 說明 登入失敗 ,使用者名稱 或 密碼錯誤      request.setAttribute("message", "使用者名稱或密碼錯誤");      request.getRequestDispatcher("login.jsp").forward(request, response);    }else{      // 登入 成功 , 跳轉到網站的 首頁, 用 重新導向      // 將username 存入到 session 域中      request.getSession().setAttribute("username", username);      response.sendRedirect("index.jsp");      //request.getRequestDispatcher("index.jsp").forward(request, response);    }  }  public void doPost(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {    doGet(request, response);  }}

RegistServlet類

package com.vs2022.controller;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.sun.org.apache.commons.beanutils.BeanUtils;import com.vs2022.model.User; import com.vs2022.model.UserOperation;public class RegistServlet extends HttpServlet {  public void doGet(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {    // 解決 post 方式 的亂碼    request.setCharacterEncoding("UTF-8");    // 完成驗證碼的校正     String checkcode = request.getParameter("checkcode");    String check_code_session = (String) request.getSession().getAttribute("check");    if(checkcode==null||!checkcode.equals(check_code_session)){      // 說明 驗證碼 輸入 不正確      request.setAttribute("message", "驗證碼輸入不正確");      request.getRequestDispatcher("regist.jsp").forward(request, response);      return;    }    // 如果 走到 了 這裡, 則說明 所有的 校正 都通過 ,就 要 調用 涉及 到 處理 商務邏輯 了     User user = new User();    // beanUtils 完成 資料的 封裝 到 java bean 對象 中 ，apache 基金會的 一個 開源的jar的 實現。    try {      // 前提 ： javabean的 欄位名 必須 要 與 表單中提交 過來 的 值 的 key 一致， 否則 不能 完成 封裝 .      BeanUtils.populate(user, request.getParameterMap());    } catch (Exception e) {      e.printStackTrace();      throw new RuntimeException("對不起， 封裝資料失敗 ");    }    // 所以 又 會 設計 一個 新的 java bean 類來 實現 商務邏輯    UserOperation us = new UserOperation();    try {      int feedBack = us.regist(user);      if(feedBack==UserOperation.EMAILEXIST){        // 說明 郵箱 已經存在         request.setAttribute("message", "郵箱已經存在 ");        request.getRequestDispatcher("regist.jsp").forward(request, response);      }else if(feedBack==UserOperation.USERNAMEEXIST){        // 說明 使用者名稱已經存在         request.setAttribute("message", "使用者名稱 已經存在 ");        request.getRequestDispatcher("regist.jsp").forward(request, response);      }else{        // 說明 註冊 成功 , 跳轉到 登入 頁面 . 要用 重新導向         response.sendRedirect("login.jsp" );      }    } catch (Exception e) {      e.printStackTrace();      throw new RuntimeException("添加 失敗 ");    }  }  public void doPost(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {    doGet(request, response);  }}

CheckImageServlet類

package com.vs2022.controller;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.vs2022.model.CheckCode;public class CheckImageServlet extends HttpServlet {  public void doGet(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {    //禁用緩衝，每次訪問此頁面，都重建    response.setHeader("Pragma","No-cache");     response.setHeader("Cache-Control","no-cache");     response.setDateHeader("Expires", 0);    response.setContentType("image/jpeg");    int width=40;    int height=30;    //產生驗證碼的匿名對象，並產生驗證碼    new CheckCode().getCode(width,height,request,response);  }  public void doPost(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {    doGet(request, response);  }}

定義工具類
DBUtil類

package com.vs2022.utils;import java.sql.*; import com.vs2022.model.User;public class DBUtil {  boolean bInited = false;  // 載入驅動  public void initJDBC() throws ClassNotFoundException {    // 載入MYSQL JDBC驅動程式    Class.forName("com.mysql.jdbc.Driver");    bInited = true;    System.out.println("Success loading Mysql Driver!");  }  public Connection getConnection() throws ClassNotFoundException,      SQLException {    if (!bInited) {      initJDBC();    }    // 串連URL為 jdbc:mysql//伺服器位址/資料庫名    // 後面的2個參數分別是登陸使用者名稱和密碼    Connection conn = DriverManager.getConnection(        "jdbc:mysql://localhost:3306/資料庫", "使用者名稱", "密碼");    return conn;  }  public boolean loginSuccess(String userName, String password) {    boolean returnValue = false;    String sql = "SELECT * FROM user where username=? and password=?";    Connection conn = null;    PreparedStatement ps=null;    int i=0;    try {      conn = getConnection();      ps=conn.prepareStatement(sql);      ps.setString(1, userName);      ps.setString(2, password);      ResultSet rs=ps.executeQuery();      if(rs.next()){        returnValue=true;      }    } catch (ClassNotFoundException e) {      e.printStackTrace();    } catch (SQLException e) {      e.printStackTrace();    }    return returnValue;  }  public boolean updateUser(User user) {    boolean flag=false;    int i=0;    Connection conn=null;    PreparedStatement ps=null;      String sql= "insert into user (username,password,nickname,email) values(?,?,?,?)";     try {      conn = getConnection();      ps=conn.prepareStatement(sql);      ps.setString(1, user.getUsername()); //對預留位置設定值，預留位置順序從1開始，第一個參數是預留位置的位置，第二個參數是預留位置的值。      ps.setString(2, user.getPassword());      ps.setString(3, user.getNickname());      ps.setString(4, user.getEmail());      i=ps.executeUpdate();      if(i>0){        flag=true;      }    } catch (ClassNotFoundException e) {      e.printStackTrace();    }catch (SQLException e) {      e.printStackTrace();    }    return flag;  }  public boolean serchUserName(String userName){    boolean returnValue = false;    String sql = "SELECT * FROM user where username=?";    Connection conn = null;    PreparedStatement ps=null;    try {      conn = getConnection();      ps=conn.prepareStatement(sql);      ps.setString(1, userName);      ResultSet rs=ps.executeQuery();      if(rs.next()){        returnValue=true;      }    } catch (ClassNotFoundException e) {      e.printStackTrace();    } catch (SQLException e) {      e.printStackTrace();    }    return returnValue;  }  public boolean serchEmail(String email){    boolean returnValue = false;    String sql = "SELECT * FROM user where email=?";    Connection conn = null;    PreparedStatement ps=null;    int i=0;    try {      conn = getConnection();      ps=conn.prepareStatement(sql);      ps.setString(1, email);      ResultSet rs=ps.executeQuery();      if(rs.next()){        returnValue=true;      }    } catch (ClassNotFoundException e) {      e.printStackTrace();    } catch (SQLException e) {      e.printStackTrace();    }    return returnValue;  }}

本文章原先以中文撰寫並發佈於 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