JavaWeb個人博客項目：手把手教你實現博客後臺系統之登錄與註冊模塊4

後臺系統的所有界面圖以及之前的準備工作歡迎看我之前的博文>3<

具體的代碼未來將傳到csdn下載或github下載~

有任何問題歡迎下方評論=W=

一、圖片效果

①項目目錄圖1與圖2

②登錄模塊圖

③註冊模塊圖

---

二、設置字符集過濾器

①Java Resources的src-->建立package，命名爲filter-->創建一個DoFilter的java文件，具體代碼如下

（PS.這個過濾器我也是仿照csdn一個老哥的做的，在此感謝這位老哥>3<）

DoFilter.java文件：

package filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

public class DoFilter implements Filter {

		public DoFilter(){
			System.out.println("過濾器構造");
		}
		public void destroy() {
			System.out.println("過濾器銷燬");
		}
		public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain) throws IOException, ServletException {
			request.setCharacterEncoding("utf-8"); //將編碼改爲utf-8
			response.setContentType("text/html;charset=utf-8");
			chain.doFilter(request, response);
		}
	 
		public void init(FilterConfig arg0) throws ServletException {
			System.out.println("過濾器初始化");
		}
	 
	}

②在WebContent-->WEB-INF-->web.xml中，設置如下內容

web.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>MyBlog</display-name>
  <filter>
    <filter-name>Dofilter</filter-name>
    <filter-class>filter.DoFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>Dofilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <!-- 歡迎頁，即進入項目的第一個界面 -->
  <welcome-file-list>
    <welcome-file>login.jsp</welcome-file>
  </welcome-file-list>
</web-app>

---

三、EL與JSTL表達式

①先載入JSTL的Jar包，在項目右鍵BuildPath-->Configure Build Path的Libraries裏-->Add Jars-->選擇目標Jar包

②爲確保載入Jar包成功，應該在WebContent-->WEB-INF-->lib的文件夾中查看是否有如下內容，這次用的便是有jstl前綴的jar包

③在WebContent-->新建一個jsp文件，取名爲base.jsp-->寫入如下內容

（關於layui、bootstrap等框架資源百度即可，按照目錄結構放入其中）

base.jsp文件：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<link rel="stylesheet" href="${ctx }/js/layui/css/layui.css">
<script src="${ctx }/js/jquery-3.2.1.min.js"></script>
<script src="${ctx }/js/layui/layui.js"></script>
<script src="${ctx}/js/bootstrap/js/bootstrap.min.js"></script>

---

四、登錄模塊

①邏輯分析（以下爲我畫的管理員登錄業務流程圖）

 

②詳細的數據庫之前的博文已經寫了，爲了更好閱讀這裏再寫一次

建數據庫，命名爲blog-->建表,命名爲dai_adm，設計表的字段如下

屬性名	類型	長度	允許空	是否主鍵	說明
adm_id	tinyint	4	NOT NULL	主鍵	管理員id、自增
adm_name	varchar	20	NOT NULL		管理員名稱
adm_password	varchar	20	NOT NULL		管理員密碼

 

③既然是登錄，自然要與數據庫進行對接，這裏我使用的是mysql數據庫，要求要加載好mysql的jar包，步驟同之前JSTL的Jar包設置步驟

  3.1 在Java Resources的src下-->新建package，命名爲util-->新建一個config.properties文件，內容如下

（由於我mysql是接入3306端口，數據庫連接時使用的用戶名是root，沒有設置密碼，所以這麼設置，如果你有密碼,pwd=你的密碼）

config.properties文件：

driverClass=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/blog?useUnicode=true&characterEncoding=utf-8&useSSL=false
#mysql username
user=root
#mysql password
pwd=

  3.2 在Java Resources的src下-->util包中-->新建一個class文件，命名爲DBUtil，代碼如下

DBUtil.java文件：

package util;


import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.Properties;

public class DBUtil {
	private static String driverClass;
	private static String url;
	private static String user;
	private static String pwd;
	
	//static block靜態塊
	static{
		//產生properties類的實例
		Properties prop = new Properties();
		//轉換成文件流
		InputStream is = DBUtil.class.getClassLoader().getResourceAsStream("util/config.properties");
		
		try {
			prop.load(is);
			driverClass = prop.getProperty("driverClass").trim();
			url = prop.getProperty("url").trim();
			user = prop.getProperty("user").trim();
			pwd = prop.getProperty("pwd").trim();
			Class.forName(driverClass);
			
			//當前類的位置
			System.out.println(DBUtil.class.getResource(""));
			//當前類的根目錄的位置
			System.out.println(DBUtil.class.getClassLoader().getResource(""));
		} catch (Exception e) {
			e.printStackTrace();
		}		
	}
	
	public static Connection getConnection(){
		// 數據庫的連接
		Connection conn = null;
		try {
			conn = DriverManager.getConnection(url, user,pwd);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return conn;
	}
	public static void closeConnection(Connection conn) throws SQLException {
		conn.close();
	}
	
}

④這個項目使用了MVC結構，登錄模塊也就是對管理員進行操作，這裏先寫pojo層，再寫dao層

  4.1 在src中-->新建一個package，命名爲pojo-->新建一個class文件，命名爲Adm，內容如下

Adm.java文件：

package pojo;

public class Adm{
	private Integer adm_id;
	private String adm_name;
	private String adm_password;
	
	public Integer getAdm_id() {
		return adm_id;
	}
	public void setAdm_id(Integer adm_id) {
		this.adm_id = adm_id;
	}
	public String getAdm_name() {
		return adm_name;
	}
	public void setAdm_name(String adm_name) {
		this.adm_name = adm_name;
	}
	public String getAdm_passward() {
		return adm_password;
	}
	public void setAdm_passward(String adm_password) {
		this.adm_password = adm_password;
	}
}

   4.2 由於後來要做分頁功能，所以還要封裝一個類-->pojo包中-->新建一個class，命名爲ChangePage，內容如下

ChangePage.java文件：

package pojo;

public class ChangePage {
	private int page; //默認第一頁
	private int limit; //默認一頁10條數據
	private int startRow = (page-1)*limit;//mysql里語句隨之發生改變
	private String sort;//排序字段
	private String order;//排序關鍵字
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	public int getLimit() {
		return limit;
	}
	public void setLimit(int limit) {
		this.limit = limit;
	}
	public int getStartRow() {
		return (page-1)*limit;
	}
	public void setStartRow(int startRow) {
		this.startRow = startRow;
	}
	public String getSort() {
		return sort;
	}
	public void setSort(String sort) {
		this.sort = sort;
	}
	public String getOrder() {
		return order;
	}
	public void setOrder(String order) {
		this.order = order;
	}
}

 4.3 在src中-->新建一個package，命名爲dao-->新建一個interface文件，命名爲AdmDao，內容如下

AdmDao.java文件：

package dao;

import java.util.ArrayList;

import pojo.Adm;

public interface AdmDao {
	//1.查詢管理員,返回一個管理員類型  這是login裏頭的方法
	public Adm getAdm(String username,String password);
	//2查詢所有的管理員
	public ArrayList<Adm> getAllAdm();
	//3.添加管理員
	public boolean insertAdm(String username,String pwd);
	//4.根據id刪除管理員
	public boolean deleteAdm(int id);
	//5.修改管理員信息
	public boolean updateAdm(Adm a);
	//6.根據adm_name查詢是否存在該用戶，即id唯一，用戶名唯一
	public boolean queryIsExist(String username);
	//7.根據id，查詢一個管理員
	public Adm getOneAdm(int adm_id);
	//8 分頁查詢所有的管理員
	public ArrayList<Adm> getPageAdm(int page,int limit);
	
}

4.4 寫AdmDao的實現類，本應該放在不同的包裏，我當時爲了簡便，依然放在了dao包

dao包-->新建class文件，命名爲AdmDaoImpl-->實現AdmDao接口，代碼如下

AdmDaoImpl.java文件：

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import pojo.Adm;
import pojo.ChangePage;
import util.DBUtil;

public class AdmDaoImpl implements AdmDao {

	// 分頁方法
	@Override
	public ArrayList<Adm> getPageAdm(int page, int limit) {
		ArrayList<Adm> adm = new ArrayList<Adm>();
		Connection conn = DBUtil.getConnection();
		ChangePage cp = new ChangePage();
		cp.setLimit(limit);
		cp.setPage(page);
		int startRow = cp.getStartRow();
		String sql = "select * from dai_adm limit " + startRow + "," + limit + "";
		// 預編譯
		try {
			PreparedStatement prep = conn.prepareStatement(sql);
			ResultSet rst = prep.executeQuery();
			while (rst.next()) {
				Adm ad = new Adm();
				ad.setAdm_id(rst.getInt(1));
				ad.setAdm_name(rst.getString("adm_name"));
				ad.setAdm_passward(rst.getString("adm_password"));
				adm.add(ad);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				DBUtil.closeConnection(conn);
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		return adm;
	}

	// 查詢所有的管理員
	@Override
	public ArrayList<Adm> getAllAdm() {
		ArrayList<Adm> adm = new ArrayList<Adm>();
		Connection conn = DBUtil.getConnection();
		// 在數據庫中添加記錄
		String sql = "select * from dai_adm";
		// 預編譯
		try {
			PreparedStatement prep = conn.prepareStatement(sql);
			ResultSet rst = prep.executeQuery();
			while (rst.next()) {
				Adm ad = new Adm();
				ad.setAdm_id(rst.getInt(1));
				ad.setAdm_name(rst.getString("adm_name"));
				ad.setAdm_passward(rst.getString("adm_password"));
				adm.add(ad);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				DBUtil.closeConnection(conn);
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		return adm;
	}

	@Override
	public Adm getAdm(String username, String password) {
		Adm a = null;
		Connection conn = DBUtil.getConnection();
		String sql = "select * from dai_adm where adm_name = ? and adm_password = ?";
		// 預編譯
		PreparedStatement prep;
		try {
			prep = conn.prepareStatement(sql);
			prep.setString(1, username);
			prep.setString(2, password);
			ResultSet rst = prep.executeQuery();
			if (rst.next()) {
				System.out.println("啊啊啊，我是servlet，我已經查到信息了！！！");
				a = new Adm();
				a.setAdm_id(rst.getInt("adm_id"));
				a.setAdm_name(rst.getString("adm_name"));
				a.setAdm_passward(rst.getString("adm_password"));
				return a;
			} else {
				// System.out.println(username+","+password);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				DBUtil.closeConnection(conn);
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		return a;
	}

	// 3.添加管理員
	@Override
	public boolean insertAdm(String username, String pwd) {
		Connection conn = DBUtil.getConnection();
		// 在數據庫中添加記錄
		String sql = "insert into dai_adm(adm_name,adm_password) values(?,?)";
		// 預編譯
		PreparedStatement prep;
		try {
			prep = conn.prepareStatement(sql);
			prep.setString(1, username);
			prep.setString(2, pwd);
			prep.executeUpdate();
			return true;
		} catch (SQLException e) {
			e.printStackTrace();
			return false;
		} finally {
			try {
				DBUtil.closeConnection(conn);
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	}

	@Override
	public boolean deleteAdm(int adm_id) {
		Connection conn = DBUtil.getConnection();
		// 在數據庫中刪除記錄
		String sql = "delete from dai_adm where adm_id = ?";
		// 預編譯
		PreparedStatement prep;
		try {
			prep = conn.prepareStatement(sql);
			prep.setInt(1, adm_id);
			prep.executeUpdate();
			return true;
		} catch (SQLException e) {
			e.printStackTrace();
			return false;
		} finally {
			try {
				DBUtil.closeConnection(conn);
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	}

	@Override
	public boolean updateAdm(Adm a) {
		Connection conn = DBUtil.getConnection();
		// 在數據庫中修改記錄
		String sql = "update dai_adm set adm_name = ?,adm_password = ? where adm_id=?";
		// 預編譯
		PreparedStatement prep;
		try {
			prep = conn.prepareStatement(sql);
			prep.setString(1, a.getAdm_name());
			prep.setString(2, a.getAdm_passward());
			prep.setInt(3, a.getAdm_id());
			prep.executeUpdate();
			return true;
		} catch (SQLException e) {
			e.printStackTrace();
			return false;
		} finally {
			try {
				DBUtil.closeConnection(conn);
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	}

	@Override
	public boolean queryIsExist(String username) {
		Connection conn = DBUtil.getConnection();
		// 在數據庫中查詢記錄
		String sql = "select * from dai_adm where adm_name = ?";
		// 預編譯
		PreparedStatement prep;
		try {
			prep = conn.prepareStatement(sql);
			prep.setString(1, username);
			ResultSet rst = prep.executeQuery();
			if (rst.next()) {
				return true;
			} else {
				return false;
			}

		} catch (SQLException e) {
			e.printStackTrace();

		} finally {
			try {
				DBUtil.closeConnection(conn);
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		return false;
	}

	@Override
	public Adm getOneAdm(int adm_id) {
		Adm a = null;
		Connection conn = DBUtil.getConnection();
		// 在數據庫中修改記錄
		String sql = "select * from dai_adm where adm_id = ?";
		// 預編譯
		PreparedStatement prep;
		try {
			prep = conn.prepareStatement(sql);
			prep.setInt(1, adm_id);
			ResultSet rst = prep.executeQuery();
			a = new Adm();
			if (rst.next()) {
				a.setAdm_id(rst.getInt(1));
				a.setAdm_name(rst.getString("adm_name"));
				a.setAdm_passward(rst.getString("adm_password"));
				return a;
			}

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				DBUtil.closeConnection(conn);
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		return a;
	}

}

      PS：這裏有一個方法叫做getAllAdm（），還有一個方法叫做getPageAdm（）。

      前者我是用來獲得總共有多少條管理員信息，後者我是用來獲得分頁信息與分頁數據的，前者本來不需要在數據庫上走那麼多步驟。

      因爲ResultSet創建的對象可以使用last()方法跳到最後一條數據，然後再使用getRow()方法獲得總數，這裏建議大家按照這種方法。

 

⑤Service層：src-->新建package包，命名爲servlet-->新建一個Servlet文件，命名爲LoginServlet-->在URL mappings中改名爲/login-->鍵入代碼，如下

LoginServlet.java文件：

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.AdmDao;
import dao.AdmDaoImpl;
import pojo.Adm;

/**
 * Servlet implementation class LoginServlet
   WebServlet裏的/login就是剛剛改的URL Mappings的內容
 */
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 * void getSession()方法相當於得到一個session對象，而void setAttribute()和String Attribute分別是對屬性賦值和得到屬性值的方法。
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		PrintWriter out = response.getWriter();
		String name = request.getParameter("username");
		String pwd = request.getParameter("pwd");
		
		AdmDao a = new AdmDaoImpl();
		Adm adm = a.getAdm(name	, pwd);
		System.out.println(a.toString());
		if(adm!=null) {
			request.getSession().setAttribute("admin",adm);			
			//重定向到成功頁面
			response.sendRedirect("index.jsp"); 
		}else {
			//out.println("啊啊啊，我應該轉發到失敗的界面了");
			request.setAttribute("errMsg", "賬號或密碼錯誤，請重新輸入信息！");
			//轉發到login界面
			request.getRequestDispatcher("login.jsp").forward(request, response); 
			return;
		}
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

⑥WebContent-->新建jsp文件，命名爲login.jsp-->鍵入代碼，如下（使用了bootstrap和layui框架）

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">
<link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/b_register.css">
<%@include file="base.jsp"%>
<title>登錄</title>
</head>
<body>
	<%
		String errorMsg = (String) request.getAttribute("errMsg");
		if (errorMsg == null) {
			errorMsg = "";
		}
	%>
	<div id="box">
		<!--  action="${ctx}/login" -->
		<form id="myform" method="post" action="${ctx}/login">
			<div class="form-group">
				<label for="username">用戶名</label> <input type="text"
					class="form-control" id="username" name="username"
					placeholder="請輸入用戶名："> <span id="tip"
					style="color: red; margin-top: 20px;"><%=errorMsg%></span>

			</div>

			<div class="form-group">
				<label for="pwd">密碼</label> <input type="password"
					class="form-control" id="pwd" name="pwd" placeholder="請輸入密碼：">
			</div>

			<button type="submit" class="btn btn-default btn_" id="btn">確定</button>
			<span style="margin-left: 250px;"></span> <a href="register.jsp"><button
					type="button" class="btn btn-default btn_">註冊</button></a>
		</form>
	</div>
	<script type="text/javascript">
		layui.use([ 'layer' ], function() {
			layui.use([ 'form' ], function() {
				var form = layui.form;
			});
			//	點擊提交執行的內容
			$('#username').blur(function() {
				//或者取長度
				if ($("#username").val() == "") {
					layer.msg("用戶名不能輸入爲空哦！", {
						icon : 2
					});
					return;
				}
			});
			//點擊提交，表單驗證
			$('#btn').click(function() {
				if ($("#pwd").val() === "") {
					layer.msg("密碼不能輸入爲空哦！", {
						icon : 2
					});
					return;
				}
			});
		});
	</script>
</body>
</html>

5.1 這裏CSS目錄如下（CSS並不重要，可以自己調整）

5.2 b_register的css樣式如下

b_register.css文件：

@CHARSET "UTF-8";
*{
	margin:0;
	padding:0;
}
body{
    background:url("./image/19.jpg") no-repeat;
}
#box{
	width:520px;
	height:400px;
	margin:200px auto;
	border-radius:20px;
	background-color: rgba(0, 0, 0, 0.3);
	box-shadow:1px 2px 5px black;
	padding: 1px;
	position:relative;
	background-image: url(./image/18.gif); 
    opacity: 0.8;
}
#myform{
	margin:30px;
}
span{
	margin-left:100px;
}
.btn_{
	color:tomato;
	margin-top:30px;
}

5.3 base的css樣式如下

base.css文件：

@charset "UTF-8";
body {
	width: 100%;
	height: 100%;
	background: url('../css/image/18.gif');
	overflow: hidden;
}

 #box {
	height:550px;
	display:flex;
	align-items:center;
	justify-content:center;
	align-content:center;  
	
}

⑤當輸入用戶名或密碼錯誤時，應該有的提示

⑥當輸入密碼正確時，應進入後臺主界面，這裏大家在WebContent裏新建一個jsp文件，取名爲index即可，這裏放一張後臺圖，具體的下篇博文再更

---

五、註冊模塊 

①邏輯分析（以下爲我畫的管理員註冊業務流程圖，註冊成功即自動跳轉登錄頁面）

②Service層：這裏主要就是首先判斷你是否輸入用戶名，用戶名輸入過後判斷是否這個用戶名已經存在（用戶名和id都是唯一的），然後再驗證你兩次密碼是否相同，最後再進入註冊。

所以說前臺可以判斷1是是否輸入2是密碼兩次是否一致；

後臺連接數據庫後應該是進行了兩個操作1是判斷用戶名是否存在2是進行往數據庫裏增加數據

 

2.1 src-->在servlet包裏-->新建一個Servlet文件，命名爲RegisterServlet-->在URL mappings中改名爲/register-->鍵入代碼，如下

RegisterServlet.java文件：

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.AdmDao;
import dao.AdmDaoImpl;

/**
 * Servlet implementation class RegisterServlet
   WebServlet裏的/register就是剛剛改的URL Mappings的內容
 */
@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public RegisterServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String result = "false";
		PrintWriter writer = null;
		try {
			PrintWriter out = response.getWriter();
			//1.接收參數
			String username = request.getParameter("username");
			String pwd = request.getParameter("pwd");
			AdmDao a = new AdmDaoImpl();
			boolean flag= a.insertAdm(username,pwd);
		    if(flag){
		    	result = "true";
			}
		    writer =  response.getWriter();
		    writer.write(result);
		}catch(Exception e) {
			e.printStackTrace();
		}finally {
			writer.flush();
			writer.close();
		}
		
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

2.2 src-->在servlet包裏-->新建一個Servlet文件，命名爲QueryAdmIsExist-->在URL mappings中改名爲/isExist-->鍵入代碼，如下

QueryAdmIsExist.java文件：

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.AdmDao;
import dao.AdmDaoImpl;

/**
 * Servlet implementation class QueryAdmIsExist
 */
@WebServlet("/isExist")
public class QueryAdmIsExist extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public QueryAdmIsExist() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		//根據姓名查詢用戶是否存在 改的更完善了一點
		String result = "false";
		PrintWriter writer = null;
		try {
			String username = request.getParameter("username");
			AdmDao a = new AdmDaoImpl();
			boolean flag = a.queryIsExist(username);
			if(flag==true) {
				result = "true";
			}
			writer =  resp.getWriter();
			writer.write(result);
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			writer.flush();
			writer.close();
		}
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

③在WebContent下-->新建jsp文件，命名爲register.jsp-->鍵入代碼，如下（這裏使用的是ajax，和上面登錄模塊不一樣，注意區別）

register.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">
<link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/b_register.css">
<%@include file="base.jsp"%>
<title>註冊</title>
</head>
<body>
<div id="box">
<form id="myform"  method="post">
  <div class="form-group">
    <label for="username">用戶名</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="請輸入用戶名：">
    <span id="tip" style="color:red;margin-top:20px;"></span>
  </div>
  
  <div class="form-group">
    <label for="pwd">密碼</label>
    <input type="password" class="form-control" id="pwd" name="pwd" placeholder="請輸入密碼：">
  </div>
   <div class="form-group">
    <label for="conFirmPwd">確認密碼</label>
    <input type="password" class="form-control" id="conFirmPwd" name="conFirmPwd" placeholder="請再次輸入密碼：">
  </div>
  <button type="button" class="btn btn-default btn_" id = "btn">提交</button>
  <span style="margin-left:250px;"></span>
  <a href="login.jsp"><button type="button" class="btn btn-default btn_">返回</button></a>
</form>
</div>
</body>
<script>
layui.use([ 'layer' ], function() {
	/* alert(0); */
	layui.use([ 'form' ], function() {
		var form = layui.form;
	});
	var isOk = false;
	//	點擊提交執行的內容
	$('#username').blur(function() {
		//或者取長度
		if ($("#username").val() == "") {
			layer.msg("不能輸入爲空哦！", {
				icon : 2
			});
			return;
		}else {
				$.post('isExist', 
				{
					username : $('#username').val()
				},
				function(result) { 
					//alert(typeof result);
					if(result=="true"){
						//alert(1);
						isOk = false;
						//利用jquery對元素設置樣式
						$('#username').css("border", "1px solid red");
						//html() 設置標籤之間的 內容
						$('#tip').html('該用戶已存在');
						$('#tip').css("color", "red");
						return;
					}else{
						//alert(2);
						isOk = true;
						//利用jquery對元素設置樣式
						$('#username').css("border", "1px solid gray");
						//html() 設置標籤之間的 內容
						$('#tip').html('該用戶名可用');
						$('#tip').css("color", "green");
					}
					
			}, "text");
		}
	});
	//點擊提交，表單驗證
	$('#btn').click(function() {
		if (!isOk) {
			return;
		}	
	  if($("#pwd").val() !== $("#conFirmPwd").val()){
			layer.msg("兩次密碼輸入不同！",{
				icon : 2
			});
			return;
		}
		 //提交表單
   	   $.post("register",//後臺地址
			{
				username: $("#username").val(),
					 pwd:$("#pwd").val(),
			},//需要提交到後臺的數據
			function(result){
				//alert(typeof result);
				//alert(result);
				if (result) {
					//添加成功
					layer.msg("註冊成功", {
						icon : 1
					});
					window.location.href = "login.jsp";
				}else{
					layer.msg("註冊失敗",{
						icon : 2
					});
					// 這裏使用JQuery實現會有問題 
					document.getElementById("myform").reset();
					$('#tip').html("");
				}
			},
			"json"); 
		//清空表單
	});
});
</script>
</html>

④註冊時用戶名存在或可用的區別圖片如下

---

最後有任何問題歡迎給我留言，我看到就一定會回覆的>w<