1. 本章任務
上一章在人員管理頁面，已經實作了人員浏覽功能，本章繼續在人員管理頁面，實作新增人員的功能。
2. 增加新增按鈕
在表格的下方添加一個新增按鈕，點選後通過RouteServlet跳轉使用者新增頁面。
修改userManage.jsp頁面如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 使用c:标簽需要添加本行代碼 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>userManage.jsp</title>
</head>
<body>
<table>
<thead>
<tr>
<th>編号</th>
<th>姓名</th>
<th>角色</th>
</tr>
</thead>
<c:forEach items="${users}" var="item">
<td>${item.userId}</td>
<td>${item.userName}</td>
<td>${item.userRole}</td>
</c:forEach>
</table>
<a href="/HomeworkSystem/RouteServlet?childPage=userAdd.jsp">新增</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
3. 添加新增頁面
點選新增超連結後，會經過RouteServlet跳轉userAdd.jsp頁面，是以添加一個userAdd.jsp頁面如下。
<title>userAdd.jsp</title>
<form action="/HomeworkSystem/UserServlet?method=userAdd" method="post">
<table>
<td>姓名:</td>
<td><input type="text" name="userName" /></td>
<td>密碼:</td>
<td><input type="text" name="userPassword" /></td>
<td>角色:</td>
<td><select name="userRole">
<option value="master">校長</option>
<option value="teacher">老師</option>
<option value="student">學生</option>
</select></td>
</table>
<input type="submit" value="儲存"></input>
</form>
28
29
30
31
根據上面的代碼可知，使用者新增頁面打開後，可以輸入姓名、密碼，并選擇該使用者所屬的角色。
當點選儲存時，使用者輸入的資訊會送出給UserServlet，并且傳遞method參數為userAdd。
4. 通過UserServlet儲存新增使用者
建立UserServlet，接受jsp頁面送出的使用者資訊，儲存到資料庫中，然後傳回使用者清單頁面。
注意此時要重新加載使用者清單資料，以便展示最新的所有使用者資訊。
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 處理post請求
// 設定輸入輸出格式、編碼
response.setContentType("text/html");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
// 擷取method參數
String method = request.getParameter("method");
// 使用者操作資料庫
UserDao userDao = new UserDao();
if (method.equals("userAdd")) {// 新增使用者
// 擷取使用者在網頁輸入的使用者名和密碼
User user = new User();
user.setUserName(request.getParameter("userName"));
user.setUserPassword(request.getParameter("userPassword"));
user.setUserRole(request.getParameter("userRole"));
// 儲存到資料庫
userDao.add(user);
}
// 攜帶最新使用者資料到人員管理頁面
request.setAttribute("users", userDao.getUsers());
// 跳轉到管理背景頁面，且子頁面是使用者管理
request.setAttribute("childPage", "userManage.jsp");
request.getRequestDispatcher("/index.jsp").forward(request, response);
}
32
5. 測試
登入後點選左側人員管理：
點選新增按鈕，輸入新增使用者的資訊後點選儲存。
點選儲存後會跳轉人員管理頁面，發現新增使用者的資訊已經可以顯示了。