需要使用的技術：

JSP動態網頁

Servlet獲得客戶端請求、轉發請求、跳轉到下一個介面

JavaBean 業務Bean （業務邏輯具體實現類），處理業務邏輯

Dao 訪問資料庫，操作資料庫例表 （增刪查改）

MySQL 資料庫

實現系統以下介面和功能：

登入

我的資料

詳細資訊檢視

        更新我的資料

1、Tomcat配置

下載Tomcat安裝檔案apache-tomcat-8.0.42.tar.gz

下載連結: https://pan.baidu.com/s/1dFwzgXF 密碼: s537

解壓檔案並命名資料夾為Tomcat，將Tomcat資料夾移動到／usr／local／檔案目錄下。

開啟終端，修改檔案許可權,輸入sudochmod 755 /usr/local/Tomcat

在/usr/local/Tomcat/bin 目錄下，執行下面的語句

sh startup.sh

結果顯示：Tomact started

表示Tomact伺服器以及成功開啟。

此時開啟瀏覽器輸入locolhost:8080驗證tomact是否成功開啟

出現該頁面，表示tomcat以及成功打開了。

2、安裝MySQL資料庫

下載MySQL資料庫安裝檔案mysql-5.7.17-macos10.12-x86_64.dmg

下載連結: https://pan.baidu.com/s/1nvK5xYp 密碼: 9ewg

在Mac上安裝MySQl

安裝完成後，開啟Mac系統便好設定

系統便好設定中出現了MySQL的圖示，表示MySQL安裝成功

雙擊MySQL圖示，開啟MySQL服務，開啟後如下圖所示：

3、安裝MySQL視覺化檢視工具navicat

下載navicat安裝檔案navicat112_mysql_cs.dmg

下載連結: https://pan.baidu.com/s/1jILX1wa 密碼: 9nrm

安裝完成後，開啟navicat，連線我們剛才安裝的MySQL資料庫

連線需要輸入我們安裝MySQL時設定的相關資訊，包括密碼。

連線建立後，我們便可以看到navicat介面檢視中我們剛才建立的localhost連線。

4、Eclipse配置Tomcat

Eclipse下載連結: https://pan.baidu.com/s/1eSqX1Hg 密碼: 73m8

1.8Jar下載連結: https://pan.baidu.com/s/1bpEekRt 密碼: utnx

開啟eclipse，在eclipse便好設定-server-add介面中選中剛才安裝的tomcat版本，點選finish。

編輯Tomcat server 執行環境，在空白欄中輸入我們安裝Tomcat的路徑，點選finish。

成功之後，我們看到了下面的檢視

在java EE檢視下，Servers欄目中新建一個Tomcat伺服器

完成後，Servers欄下就會出現一個Tomcat伺服器，如下圖所示

右鍵選擇start將伺服器開啟

控制檯顯示如下，表示伺服器以及成功開啟。

5、Eclipse連線資料庫

開啟資料檢視，右擊database connections，選擇新建連線。

選擇MySQL，點選next。

輸入我們在MySQL視覺化工具navicat中建立的資料庫連線的相關資訊，點選finish，完成eclipse資料庫的連線。

6、測試Eclipse和資料庫的連通性

我們首先在MySQL視覺化工具navicat中新建一個數據庫，命名為demo。在demo資料庫中新建使用者資料表，如下圖所示：

建立“資料庫源類”，建立資料庫連線。具體實現內容如下：

public class DataSource {
	private static String url = "jdbc:mysql://localhost:3306/demo";  //連線路徑
	private static String user = "root"; //使用者名稱
	private static String password = "123"; //密碼

	/*開啟並返回資料庫連線	 */
	public static Connection getConnection() {
		try {
			MysqlDataSource dataSource = new MysqlDataSource();
			//設定連線屬性
			dataSource.setUrl(url);
			dataSource.setUser(user);
			dataSource.setPassword(password);
			//開啟並返回連線
			return dataSource.getConnection();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

建立“使用者資料訪問Dao具體實現類”，實現資料庫資料各項屬性的讀取，儲存、修改、刪除等功能。具體實現內容如下：

public class UserDaoServiceImpl implements IUserDaoService {
	@Override
	public List<TDemoUser> query() throws Exception {
		//獲得資料庫連線
		Connection conn = DataSource.getConnection();
		//建立資料庫操作的語句物件
		Statement stm = conn.createStatement();
		//查詢資料庫返回結果集
		ResultSet rs = stm.executeQuery("select * from t_demo_user"
				+ " where isdel=0 order by opertime desc");
		//建立封裝使用者資料的集合
		List<TDemoUser> list = new ArrayList<>();
		//遍歷結果集，封裝使用者資料
		while(rs.next()) {
			//建立使用者物件
			TDemoUser user = new TDemoUser();
			//封裝資料，給屬性設值
			user.setUserId(rs.getInt("user_id"));
	user.setUserName(rs.getString("user_name"));		user.setUserPassword(rs.getString("user_password"));		user.setUserGender(rs.getString("user_gender"));		user.setUserRole(rs.getString("user_role"));		user.setUserEmail(rs.getString("user_email"));		user.setUserTelphone(rs.getString("user_telphone"));		user.setUserBirthday(rs.getDate("user_birthday"));
			user.setIsdel(rs.getString("isdel"));
	user.setOpertime(rs.getTimestamp("opertime"));
			//新增使用者物件到集合中
			list.add(user);
		}
		//關閉連線
		conn.close();
		//返回使用者資料的集合
		return list;
	}

	@Override
	public List<TDemoUser> query(String userName) throws Exception {
		//獲得資料庫連線
		Connection conn = DataSource.getConnection();
		//建立資料庫操作的語句物件
		Statement stm = conn.createStatement();
		//查詢資料庫返回結果集
		ResultSet rs = stm.executeQuery("select * from t_demo_user"
				+ " where isdel=0 and user_name like '%"+userName+"%' order by opertime desc");
		//建立封裝使用者資料的集合
		List<TDemoUser> list = new ArrayList<>();
		//遍歷結果集，封裝使用者資料
		while(rs.next()) {
			//建立使用者物件
			TDemoUser user = new TDemoUser();
			//封裝資料，給屬性設值
			user.setUserId(rs.getInt("user_id"));
	user.setUserName(rs.getString("user_name"));
	user.setUserPassword(rs.getString("user_password"));		user.setUserGender(rs.getString("user_gender"));		user.setUserRole(rs.getString("user_role"));
	user.setUserEmail(rs.getString("user_email"));
	user.setUserTelphone(rs.getString("user_telphone"));
	user.setUserBirthday(rs.getDate("user_birthday"));
	user.setIsdel(rs.getString("isdel"));
	user.setOpertime(rs.getTimestamp("opertime"));
			//新增使用者物件到集合中
			list.add(user);
		}
		//關閉連線
		conn.close();
		//返回使用者資料的集合
		return list;
	}

	@Override
	public TDemoUser getUserById(String id) throws Exception {
		//獲得資料庫連線
		Connection conn = DataSource.getConnection();
		//建立資料庫操作的語句物件
		Statement stm = conn.createStatement();
		//查詢資料庫返回結果集
		ResultSet rs = stm.executeQuery("select * from t_demo_user"
				+ " where isdel=0 and user_id="+id);
		//定義使用者變數
		TDemoUser user = null;
		//遍歷結果集，封裝使用者資料
		while(rs.next()) {
			//建立使用者物件
			user = new TDemoUser();
			//封裝資料，給屬性設值
			user.setUserId(rs.getInt("user_id"));
	user.setUserName(rs.getString("user_name"));
	user.setUserPassword(rs.getString("user_password"));
	user.setUserGender(rs.getString("user_gender"))	user.setUserRole(rs.getString("user_role"));		user.setUserEmail(rs.getString("user_email"));		user.setUserTelphone(rs.getString("user_telphone"));		user.setUserBirthday(rs.getDate("user_birthday"));
	user.setIsdel(rs.getString("isdel"));
	user.setOpertime(rs.getTimestamp("opertime"));
		}
		//關閉連線
		conn.close();
		//返回使用者資料的集合
		return user;
	}

	@Override
	public TDemoUser find(String userName, String password) throws Exception {
		//獲得資料庫連線
		Connection conn = DataSource.getConnection();
		//建立資料庫操作的語句物件
		Statement stm = conn.createStatement();
		//查詢資料庫返回結果集
		ResultSet rs = stm.executeQuery("select * from t_demo_user"
				+ " where isdel=0 and user_name='"+userName+"' and user_password='"+password+"'");
		System.out.println("select * from t_demo_user"
				+ " where isdel=0 and user_name='"+userName+"' and user_password='"+password+"'");
		//定義使用者變數
		TDemoUser user = null;
		//遍歷結果集，封裝使用者資料
		while(rs.next()) {
			//建立使用者物件
			user = new TDemoUser();
			//封裝資料，給屬性設值
			user.setUserId(rs.getInt("user_id"));			user.setUserName(rs.getString("user_name"));		user.setUserPassword(rs.getString("user_password"));		user.setUserGender(rs.getString("user_gender"));	user.setUserRole(rs.getString("user_role"));		user.setUserEmail(rs.getString("user_email"));
	user.setUserTelphone(rs.getString("user_telphone"));
	user.setUserBirthday(rs.getDate("user_birthday"));
	user.setIsdel(rs.getString("isdel"));		user.setOpertime(rs.getTimestamp("opertime"));
			break;
		}
		//關閉連線
		conn.close();
		//返回使用者資料的集合
		return user;
	}

	@Override
	public void save(TDemoUser user) throws Exception {
		//獲得資料連線
		Connection conn = DataSource.getConnection();
		//建立資料庫操作語句物件
		PreparedStatement stm = conn.prepareStatement("insert into t_demo_user("
				+ "user_name,user_password,user_gender,user_role,user_email,user_telphone,"
				+ "user_birthday,isdel,opertime) values(?,?,?,?,?,?,?,?,?)");
		//設定儲存的資料
		stm.setString(1, user.getUserName());
		stm.setString(2, user.getUserPassword());
		stm.setString(3, user.getUserGender());
		stm.setString(4, user.getUserRole());
		stm.setString(5, user.getUserEmail());
		stm.setString(6, user.getUserTelphone());
		stm.setDate(7, user.getUserBirthday());
		stm.setString(8, "0");
		stm.setTimestamp(9, new Timestamp(System.currentTimeMillis()));
		//執行SQL，儲存資料到資料庫
		stm.executeUpdate();
		//關閉連線
		conn.close();
	}

	@Override
	public void update(TDemoUser user) throws Exception {
		//獲得資料連線
		Connection conn = DataSource.getConnection();
		//建立資料庫操作語句物件
		PreparedStatement stm = conn.prepareStatement("update t_demo_user set "
				+ "user_name=?,user_password=?,user_gender=?,user_role=?,user_email=?,"
				+ "user_telphone=?,user_birthday=?,isdel=?,opertime=? where user_id=?");
		//設定儲存的資料
		stm.setString(1, user.getUserName());
		stm.setString(2, user.getUserPassword());
		stm.setString(3, user.getUserGender());
		stm.setString(4, user.getUserRole());
		stm.setString(5, user.getUserEmail());
		stm.setString(6, user.getUserTelphone());
		stm.setDate(7, user.getUserBirthday());
		stm.setString(8, "0");
		stm.setTimestamp(9, new Timestamp(System.currentTimeMillis()));
		stm.setInt(10, user.getUserId());
		//執行SQL，儲存資料到資料庫
		stm.executeUpdate();
		//關閉連線
		conn.close();
	}

接下里編寫測試程式碼，嘗試從資料庫讀取使用者資料內容，並在控制檯列印輸出。測試內容為修改使用者資訊和查詢使用者資料列表。測試程式碼以及測試結果都如下入所示：

7、實現登入介面

首先要新建登入的業務介面類，主要宣告一個login函式。實現內容如下：

public interface ILoginService {
	public String login(HttpServletRequest request) throws Exception;
}

接著新建登入業務的具體實現類，類中首先定義資料訪問Dao物件，接著對使用者輸入的賬戶資訊進行驗證。獲得使用者輸入的賬戶名和密碼，並以此為索引查詢相應的使用者，如果找到就登入成功，跳轉到系統首頁，如果沒有找到，就要提示“使用者名稱或密碼輸入錯誤！”，頁面保留在登入介面。具體實現內容如下：

public class LoginServiceImpl implements ILoginService {
	private IUserDaoService idao = new UserDaoServiceImpl(); //定義資料訪問Dao物件
	/*登入驗證*/
	@Override
	public String login(HttpServletRequest request) throws Exception {
		//獲得請求中的使用者名稱與密碼
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		//通過Dao介面，訪問資料庫，使用者名稱與密碼為條件查詢使用者資料
		TDemoUser user = idao.find(userName, password);
		//驗證登入是否成功
		if(user!=null) { //成功
			System.out.println("登入成功");
			//會話中新增使用者物件
			HttpSession session = request.getSession(); //會話在伺服器快取使用者的資料，預設30分鐘
			session.setAttribute("user", user);
			return "/index.jsp";
		} else { //失敗
			//請求中新增錯誤資訊
			request.setAttribute("error", "使用者名稱或密碼錯誤!");
		return "/login.jsp";
		}
	}
}

然後新建一個LoginServlet類做為登入（Login）的控制器，宣告一個登入服務介面類的服務，並實現請求中資料的編碼格式的設定、訪問業務Bean，驗證登入，跳轉到下一個頁面等功能。具體實現如下：

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private ILoginService service = new LoginServiceImpl();
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//設定請求中資料的編碼格式
		request.setCharacterEncoding("utf-8"); //解決中文亂碼問題，只支援post模式
		try {
			//訪問業務Bean，驗證登入
			String path = service.login(request);
			//跳轉到下一個頁面		request.getRequestDispatcher(path).forward(request, response);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

此時我們在Tomcat伺服器上執行該web專案，可以看到下面的介面圖，此時我們故意輸入錯誤的使用者資訊。

可以看到顯示如下。頁面沒有跳轉到系統首頁，而是停留在了登入頁面，並且提示：使用者名稱或密碼輸入錯誤！

我們重新輸入正確的賬戶和密碼，成功登入才優備團隊內部系統，頁面展示如下。在頁面的右上角，我們可以看到剛才輸入登入的賬戶的簡要資訊。

8、實現“我的資料”頁面，完成資訊檢視和更新功能

類似“登入”頁面的顯示，為了能夠在頁面動態的和資料庫資訊進行互動，我們首先得新建一個我的資料業務介面類，介面類中包含我們需要在該頁面上實現的功能函式的宣告，包括頁面的檢視和內容的修改，具體實現如下：

public interface IMyInfoService {
	/ * 查詢當前使用者資料	 */
	public String view(HttpServletRequest request) throws Exception;
	
	/* 修改當前使用者資料 */
	public String update(HttpServletRequest request) throws Exception;
	
}

接著是我的資料頁面的具體實現類，在登入時建立的會話快取中，獲得當前使用者物件及一系列相關資訊，以實現使用者資訊的展示。在更新操作上，我們需要獲取請求中使用者的資訊，並將該資訊設定為當前使用者的相應屬性，最後將使用者屬性設定回會話當中。具體實現如下：

public class MyInfoServiceImpl implements IMyInfoService {
	private IUserDaoService idao = new UserDaoServiceImpl(); //定義資料訪問Dao物件
	@Override
	public String view(HttpServletRequest request) throws Exception {
		//從會話快取中，獲得當前使用者物件
		TDemoUser user = (TDemoUser) request.getSession().getAttribute("user");
		//獲得使用者的ID
		String id = String.valueOf(user.getUserId()); //整型轉換成字串型
		//查詢獲得使用者的最新資料
		user = idao.getUserById(id);
		//使用者資料設定回會話中
		request.getSession().setAttribute("user", user);
		return "/admin/myinfo/message.jsp";
	}
	@Override
	public String update(HttpServletRequest request) throws Exception {
		//獲得請求中使用者的資料
		String userName = request.getParameter("userName");
		String password = request.getParameter("passwordA");
		String gender = request.getParameter("gender");
		String role = request.getParameter("role");
		String email = request.getParameter("email");
		String telphone = request.getParameter("telphone");
		String birthday = request.getParameter("birthday");
		//從會話快取中，獲得當前使用者物件
		TDemoUser user = (TDemoUser) request.getSession().getAttribute("user");
		//封裝使用者資料（設定使用者的屬性）
		user.setUserName(userName);
		user.setUserPassword(password);
		user.setUserGender(gender);
		user.setUserRole(role);
		user.setUserEmail(email);
		user.setUserTelphone(telphone);
		//建立時間格式化物件
		DateFormat format = new SimpleDateFormat("yyyy-MM-dd");
		user.setUserBirthday(new Date(format.parse(birthday).getTime()));
		user.setOpertime(new Timestamp(System.currentTimeMillis()));
		//通過Dao介面，修改使用者資料
		idao.update(user);
		//更新快取中的資料
		//獲得使用者的ID
		String id = String.valueOf(user.getUserId()); 
		//查詢獲得使用者的最新資料
		user = idao.getUserById(id);
		//使用者資料設定回會話中
		request.getSession().setAttribute("user", user);
		return "/login.jsp";
	}
}

然後要做的就是我的資料頁面的控制器，宣告一個我們資料業務介面物件，並實現更新資訊和檢視資訊功能。具體實現內容如下

@WebServlet("/MyInfoServlet1")
public class MyInfoServlet1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private IMyInfoService service = new MyInfoServiceImpl();
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		//獲得當前的操作步驟
		String status = request.getParameter("status");
		//判斷進入不同的操作步驟
		if("update".equals(status)) {
			update(request, response);
		} else {
			view(request, response);
		}
	}
	/*查詢當前使用者資料*/
	protected void view(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			String path = service.view(request);
			request.getRequestDispatcher(path).forward(request, response);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	/*修改當前使用者資料 */
	protected void update(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			String path = service.update(request);
			request.getRequestDispatcher(path).forward(request, response);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
    public MyInfoServlet1() {
        super();
        // TODO Auto-generated constructor stub
}
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

此時我們在Tomcat伺服器上重新執行該web專案，並正確登入，點選左側欄“我的資料”，頁面顯示了當前使用者的具體資訊。詳情如下：

看到頁面上顯示的使用者資訊之後，我們可以回到MySQL視覺化工具navicat中檢視使用者資訊在資料庫中的具體情況。結果顯示，頁面讀取的使用者資訊和資料庫中的使用者資訊完全一致。資料庫中使用者資訊如下圖所示：

 接著，我們測試使用者資訊的更新功能。接上步驟頁面，我做了部分使用者資訊的修改，即修改了使用者名稱和聯絡電話。具體修改資訊如下：

完成更新資訊的輸入之後，點選確定，頁面跳轉到了登入頁面。此時，我們再次回到navicat頁面，檢視資料庫使用者資訊，可以看到我們剛才在頁面上做的使用者資料更新已經存回了資料庫。

接著我們重新登入才優備團隊內部系統，這次我們輸入更改後的使用者名稱稱和相應的密碼，登入成功後進入到系統首頁。

 這個時候，我們再次點選“我的資料”，檢視使用者資訊。顯示的資訊內容和我們更改後的內容保持一致。詳情如下圖所示：