Servlet+JavaBean+JSP打造Java Web注冊與登錄功能

更新時間：2016年05月25日 18:23:35 作者：xing

比作MVC的話,控制器部分采用Servlet來實(shí)現(xiàn)，模型部分采用JavaBean來實(shí)現(xiàn),而大部分的視圖采用Jsp頁面來實(shí)現(xiàn),接下來我們就來詳細(xì)看看如何用Servlet+JavaBean+JSP打造Java Web注冊與登錄功能

采用Java Web所實(shí)現(xiàn)的MVC結(jié)構(gòu)圖如下，其中控制器部分采用Servlet來實(shí)現(xiàn)，模型部分采用JavaBean來實(shí)現(xiàn)，而大部分的視圖采用Jsp頁面來實(shí)現(xiàn)。

思想基礎(chǔ)
JSP+JavaBean兩層結(jié)構(gòu)工作原理應(yīng)該是比較熟悉的，也比較好理解。
但是有一點(diǎn)必須要清楚就是用戶通過瀏覽器來發(fā)送網(wǎng)頁的請求，此請求到達(dá)服務(wù)器后在服務(wù)器端查找對應(yīng)的網(wǎng)頁，如果是首次請求（第二次就不用解釋執(zhí)行了），對于JSP來說要生成Servlet，然后通過Servlet引擎來執(zhí)行 Servlet，把調(diào)用JavaBean的結(jié)果嵌入到頁面中返回給用戶的瀏覽器。
JSP+JavaBean+Servlet三層結(jié)構(gòu)的實(shí)質(zhì)是多了一個Controller：Servlet來分發(fā)客戶端瀏覽器的請求。如果把起控制器作用的Servlet的作用理解為對客戶端的請求進(jìn)行預(yù)處理對理解Servlet將有很大的幫助。通過web.xml配置文件可以找到用戶請求和特定的 Servlet的對應(yīng)關(guān)系，每個Servlet都有一個特定的Servlet對象與之對應(yīng)，所以說處理用戶請求的就是一個繼承自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對象關(guān)聯(lián)，第二部分主要用來配置請求由哪個Servlet處理，Servlet名字的關(guān)聯(lián)，處理請求就與具體 Servlet處理對象關(guān)聯(lián)起來，比如說，客戶端瀏覽器發(fā)來/newsmain的請求，它由ms1 servlet進(jìn)行處理，通過ms1就能找到相對應(yīng)的serlet對象news.FirstAction，即 /newsmain-﹥ms1-﹥news.FirstAction，這也就是配置文件的意義所在。到現(xiàn)在懂得了用戶/newsmain請求會被news.FirstAction類的對象進(jìn)行處理，所以說，要看懂程序就要看懂FirstAction的作用是什么就行了。比如說下面是 FirstAction的一個實(shí)現(xiàn)。

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); 
 } 
 
}

通過這個實(shí)現(xiàn)可以看到，當(dāng)服務(wù)器收到客戶端請求執(zhí)行 News.SearchNewsTitle(db)的操作，然后把返回值通過session.setAttribute放到session里，然后通過 resp.sendRedirect(target)間接轉(zhuǎn)移到newsMain.jsp，這樣在newsMain.jsp里通過 session.getAttribute函數(shù)就可以得到在存儲在session里的對應(yīng)值。
回過頭來就容易看出JSP+JavaBean工作原理和JSP+JavaBean+Servlet工作原理的不同了，兩層結(jié)構(gòu)必須把預(yù)處理放在JSP中進(jìn)行，比如說 News.SearchNewsTitle(db)，三層結(jié)構(gòu)先把預(yù)處理在Servlet里進(jìn)行了，然后相當(dāng)于把這個處理結(jié)果通過Session返回給 JSP，讓JSP更關(guān)注于界面的顯示。

登陸注冊模塊需求
1 注冊
1.1 用戶的注冊表單（用戶名，密碼，郵箱，昵稱，驗(yàn)證碼）
1.2 提交注冊:要做（用戶名，密碼，郵箱，昵稱，驗(yàn)證碼）的校驗(yàn)。
1.2.1 用戶名,密碼,郵箱,昵稱是在客戶端瀏覽器完成的，通過JS來實(shí)現(xiàn)。
1.2.2 驗(yàn)證碼的是要在服務(wù)器端的程序完成的。
2.如果注冊表單的校驗(yàn)通過, 那么就進(jìn)行業(yè)務(wù)邏輯的判斷。
2.1 如果用戶已經(jīng)存在, 告訴用戶錯誤信息。
2.2 如果郵箱已經(jīng)存在, 告訴用戶錯誤信息。
2.3 如果都不存在 .則進(jìn)行第3步。
3. 將用戶的信息保存到數(shù)據(jù)庫中
4. 注冊成功, 跳轉(zhuǎn)到登錄頁面
5. 登陸
5.1 將用戶的登陸信息發(fā)送到后臺進(jìn)行驗(yàn)證
5.2 如果驗(yàn)證成功，則跳轉(zhuǎn)到首頁
5.3 如果跳轉(zhuǎn)失敗，則跳轉(zhuǎn)到登陸頁面，并提示錯誤信息。

項(xiàng)目目錄結(jié)構(gòu)
項(xiàng)目的源碼分成四個包文件，分別用來存取模型，視圖，控制器和工具類，具體文件如下：

2016525181241671.jpg (219×241)

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

2016525181315413.jpg (298×221)

定義視圖
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(){

    // 做 用戶名 , 密碼, 郵箱, 昵稱的校驗(yàn)

    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>請確認(rèn)密碼</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>驗(yàn)證碼</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())){
      // 說明 用戶名 已經(jīng)存在了 
      return USERNAMEEXIST;
    }

    if(db.serchEmail(user.getEmail())){
      // 說明郵箱已經(jīng)存在 
      return EMAILEXIST;
    }


    // 如果 走到 這里, 則說明 ,郵箱 用戶名都不存咋, 那么 就讓其注冊 . 添加 到數(shù)據(jù)庫中
    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{ 
  // 在內(nèi)存中創(chuàng)建圖象
  BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  Graphics g=image.getGraphics();   //創(chuàng)建Graphics對象,其作用相當(dāng)于畫筆
  g.setColor(Color.getColor("F8F8F8"));
  g.fillRect(0, 0, width, height);  //繪制背景
  Font mfont=new Font("楷體",Font.BOLD,16); //定義字體樣式
  g.setFont(mfont);          //設(shè)置字體
  g.setColor(Color.RED);
  //生成隨機(jī)數(shù)
  String rans=getRandomString();
  //將隨機(jī)數(shù)寫入會話
  HttpSession session = request.getSession();
  session.setAttribute("check", rans);
  //將隨機(jī)數(shù)寫入圖片
  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);

    // 調(diào)用 業(yè)務(wù)功能 javabean 類 去實(shí)現(xiàn) 登錄的 具體 業(yè)務(wù)邏輯
    UserOperation us = new UserOperation();

    // 返回值 ? 
    int i = us.login(user); 

    if(i==4){

      // 說明 登錄失敗 ,用戶名 或 密碼錯誤
      request.setAttribute("message", "用戶名或密碼錯誤");
      request.getRequestDispatcher("login.jsp").forward(request, response);

    }else{

      // 登錄 成功 , 跳轉(zhuǎn)到網(wǎng)站的 首頁, 用 重定向

      // 將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");

    // 完成驗(yàn)證碼的校驗(yàn) 
    String checkcode = request.getParameter("checkcode");
    String check_code_session = (String) request.getSession().getAttribute("check");
    if(checkcode==null||!checkcode.equals(check_code_session)){

      // 說明 驗(yàn)證碼 輸入 不正確
      request.setAttribute("message", "驗(yàn)證碼輸入不正確");
      request.getRequestDispatcher("regist.jsp").forward(request, response);
      return;
    }

    // 如果 走到 了 這里, 則說明 所有的 校驗(yàn) 都通過 ,就 要 調(diào)用 涉及 到 處理 業(yè)務(wù)邏輯 了 

    User user = new User();
    // beanUtils 完成 數(shù)據(jù)的 封裝 到 java bean 對象 中 ，apache 基金會的 一個 開源的jar的 實(shí)現(xiàn)。
    try {
      // 前提 ： javabean的 字段名 必須 要 與 表單中提交 過來 的 值 的 key 一致， 否則 不能 完成 封裝 .
      BeanUtils.populate(user, request.getParameterMap());
    } catch (Exception e) {
      e.printStackTrace();
      throw new RuntimeException("對不起， 封裝數(shù)據(jù)失敗 ");
    }

    // 所以 又 會 設(shè)計(jì) 一個 新的 java bean 類來 實(shí)現(xiàn) 業(yè)務(wù)邏輯
    UserOperation us = new UserOperation();
    try {
      int feedBack = us.regist(user);

      if(feedBack==UserOperation.EMAILEXIST){

        // 說明 郵箱 已經(jīng)存在 
        request.setAttribute("message", "郵箱已經(jīng)存在 ");
        request.getRequestDispatcher("regist.jsp").forward(request, response);



      }else if(feedBack==UserOperation.USERNAMEEXIST){

        // 說明 用戶名已經(jīng)存在 
        request.setAttribute("message", "用戶名 已經(jīng)存在 ");
        request.getRequestDispatcher("regist.jsp").forward(request, response);


      }else{
        // 說明 注冊 成功 , 跳轉(zhuǎn)到 登錄 頁面 . 要用 重定向 
        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;
    //生成驗(yàn)證碼的匿名對象，并生成驗(yàn)證碼
    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;

  // 加載驅(qū)動
  public void initJDBC() throws ClassNotFoundException {
    // 加載MYSQL JDBC驅(qū)動程序
    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//服務(wù)器地址/數(shù)據(jù)庫名
    // 后面的2個參數(shù)分別是登陸用戶名和密碼
    Connection conn = DriverManager.getConnection(
        "jdbc:mysql://localhost:3306/數(shù)據(jù)庫", "用戶名", "密碼");
    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()); //對占位符設(shè)置值，占位符順序從1開始，第一個參數(shù)是占位符的位置，第二個參數(shù)是占位符的值。
      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;
  }
}

您可能感興趣的文章: