綜合練習筆記（用戶管理系統）
1. 結合上次用戶信息列表展示案例進行簡單修改
* 列表查詢
* 登錄
* 添加
* 刪除
* 修改
2. 增加更多複雜的功能
* 刪除選中
* 分頁查詢
* 複雜條件查詢
簡單修改
- 列表查詢
- 列表查詢是首次創建一個項目，（當然我們開始之前，前端人員已經準備了相應的靜態頁面），所以需要按照三層架構的方法創建相應的層，也即要創建相應的包，service包，dao包，web包；在service和dao層都是先創建響應的接口，然後再分別對接口做實現，所以分別創建impl包；web包中創建一個servlet包，放Servlet，而頁面展示的文件則放在工程默認的web文件夾中。
- 本次列表查詢的流程圖如下所示
![列表查詢的流程圖]()
上次所作的案例已經基本實現，但是還需要對展示界面list.jsp略作修改
修改後的list.jsp代碼下所示
<div class="container">
<h3 style="text-align: center">用戶信息列表</h3>
<div style="float: left; margin: 5px;">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">姓名</label>
<input type="text" class="form-control" id="exampleInputName2">
</div>
<div class="form-group">
<label for="exampleInputName3">籍貫</label>
<input type="text" class="form-control" id="exampleInputName3">
</div>
<div class="form-group">
<label for="exampleInputEmail2">郵箱</label>
<input type="email" class="form-control" id="exampleInputEmail2">
</div>
<button type="submit" class="btn btn-default">查詢</button>
</form>
</div>
<div style="float: right; margin: 5px;" >
<tr>
<td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加聯繫人</a></td>
</tr>
<tr>
<td colspan="8" align="center"><a class="btn btn-primary" href="add.html">刪除選中</a></td>
</tr>
</div>
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th><input type="checkbox"></th>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>籍貫</th>
<th>QQ</th>
<th>郵箱</th>
<th>操作</th>
</tr>
<c:forEach items="${users}" var="user" varStatus="s">
<tr>
<td><input type="checkbox"></td>
<td>${s.count}</td>
<td>${user.name}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.address}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
<td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">刪除</a></td>
</tr>
</c:forEach>
</table>
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 25px; margin: 8px">
共16條記錄，共4頁
</span>
</ul>
</nav>
</div>
</div>
- 登錄
- 首先將登錄界面用login.jsp實現，並且加入驗證碼
- 驗證碼用CheckCodeServlet來實現，將驗證碼以圖片形式保存到response輸出流中；將驗證碼內容以session形式存到服務器
- 登錄的實現流程如圖所示
![登錄的實現流程圖]()
- 其中登陸服務的代碼LoginServlet的代碼如下所示：
// 1.設置請求編碼格式
request.setCharacterEncoding("utf-8");
// 2.獲取數據
// 2.1獲取輸入的驗證碼
String verifycode = request.getParameter("verifycode");
System.out.println(verifycode);
// 2.2獲取用戶信息
Map<String, String[]> map = request.getParameterMap();
// 4.驗證碼判斷
HttpSession session = request.getSession();
String checkCode_session = (String)session.getAttribute("checkCode_session");
System.out.println(checkCode_session);
//獲取完後移除session中存儲的驗證碼，以保證驗證碼的唯一性
session.removeAttribute("checkCode_session");
if (checkCode_session != null && checkCode_session.equalsIgnoreCase(verifycode)){
//驗證碼正確
// 3.用BeanUtils工具包封裝User對象
User user = new User();
try {
BeanUtils.populate(user, map);
System.out.println(user.getUsername()+"------"+user.getPassword());
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 5.登陸判斷
UserService service = new UserServiceImpl();
User loginUser = service.login(user);
if (loginUser != null){
//登陸成功
System.out.println("登陸成功");
session.setAttribute("username", loginUser.getUsername());
//跳轉到index.jsp
response.sendRedirect(request.getContextPath()+"/index.jsp");
}else{
//登陸失敗
System.out.println("登陸失敗");
request.setAttribute("login_error", "用戶名或密碼錯誤!");
//跳轉登陸界面login.jsp
request.getRequestDispatcher("/login.jsp").forward(request, response);
}
}else {
//驗證碼錯誤
request.setAttribute("cc_error", "驗證碼錯誤!");
//跳轉登陸界面login.jsp
request.getRequestDispatcher("/login.jsp").forward(request, response);
}
- dao層登錄方法如下所示：
public User SelectUserByUsernameAndPassword(User user) {
try {
//查詢數據庫
String sql = "select * from user where username = ? and password = ?";
User loginuser = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class),
user.getUsername(), user.getPassword());
return loginuser;
} catch (DataAccessException e) {
// e.printStackTrace();
return null;
}
}
- 添加聯繫人
- 要實現添加功能，則需要一個添加的頁面add.jsp，用戶在該頁面輸入信息，點擊提交後將信息存到數據庫，並在用戶列表頁面list.jsp進行展示
- 項目基本的架構已經完成，所以只需要添加一個AddUserServlet，並在service層以及dao層添加響應的增加聯繫人方法即可
- 添加聯繫人實現流程如圖所示
![添加聯繫人流程圖]()
- 其中添加聯繫人服務AddUserServlet代碼如下所示
// 1.設置請求編碼格式
request.setCharacterEncoding("utf-8");
// 2.接受數據
Map<String, String[]> map = request.getParameterMap();
// 3.封裝爲User對象
User user = new User();
try {
BeanUtils.populate(user, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 4.調用service層的添加方法
UserService service = new UserServiceImpl();
service.addUser(user);
// 5.轉發給UserListServlet
request.getRequestDispatcher("/userListServlet").forward(request, response);
- dao層實現添加用戶的代碼如下所示
public void add(User user) {
String sql = "insert into user values(null, ?, ?, ?, ?, ?, ?, null, null)";
template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail());
}
- 刪除
- 刪除功能的實現需要web層增加一個Servlet，記爲DelUserServlet，service層和dao層需要增加一個刪除方法
- 刪除功能實現流程如圖所示
![刪除單個用戶流程圖]()
- 其中需要設置list.jsp中刪除按鈕，點擊會一個提示框，確認纔會刪除
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id})">刪除</a></td>
<script>
function deleteUser(id){
if (confirm("您確定要刪除嗎？")){
location.href="${pageContext.request.contextPath}/delUserServlet?id=" + id;
}
}
</script>
- 其中web層DelUserServlet實現代碼爲
//獲取請求標識id
String id = request.getParameter("id");
//調用service層刪除方法
UserService service = new UserServiceImpl();
service.delete(id);
//重定向到UserListServlet
response.sendRedirect(request.getContextPath()+"/userListServlet");
- dao層刪除用戶的實現代碼爲
public void deleteUserById(int parseInt) {
String sql = "delete from user where id = ?";
template.update(sql, parseInt);
}
- 此處有一點需要注意，在list.jsp頁面的請求中，id是String類型的，而在數據庫中，id是int類型的，所以需要將id進行轉換後才能才數據庫中正確操作，轉換方法也很簡單，即
int parseInt = Integer.parseInt(id);
- 修改
- 修改功能一般分爲兩步走；一個是回顯用戶數據，第二個是修改用戶信息
-
回顯用戶數據 ： 在點擊修改按鈕時，需要跳轉到一個修改的頁面，此處記爲update.jsp；在此頁面中回顯該用戶的信息；
-
修改用戶信息 ： 在修改頁面update.jsp點擊提交按鈕後，需要將新的用戶數據修改到數據庫中，覆蓋掉原來的用戶信息；
-
在這兩步操作中，我們都需要一個標識來確定是哪個用戶；在回顯中，我們可以根據修改按鈕的id來查找用戶，類似於上面的刪除操作；而在修改操作中，我們的請求是由提交按鈕發出的，而在update.jsp表單中是不存在用戶的id信息的，那如何定位修改哪位用戶呢？
-
一般我們會在update.jsp中設置一個隱藏域，用來存放用戶的id，該數據不對用戶顯示
-
第一步我們需要在web層建立一個FindUserServlet，在service層添加一個通過id查找用戶的方法，在dao層實現該方法
- web層主要任務：
- 獲取請求標識id
- 調用service中查找用戶方法
- 將查到的用戶信息轉發給update.jsp頁面
- update.jsp頁面將該信息進行顯示
- 對於頁面的回顯，一般的輸入框可以直接進行設置value值即可
- 但是對於單選框，下拉框，則比較麻煩，需要判斷該值，然後選中對應的單選框或者下拉值；需要使用TJSTL標籤來實現
- web層主要任務：
-
第二步我們需要在web層再建立一個UpdateUserServlet，在service層增加一個修改用戶信息方法，在dao層實現該方法
- web層主要任務：
- 獲取update.jsp中的所有數據
- 封裝爲User對象
- 調用service層的更新用戶信息方法
- 重定向用戶信息展示界面，即重定向到UserListServlet即可
- web層主要任務：
-
修改用戶信息的流程如圖所示
![修改用戶信息流程圖]()
-
回顯用戶信息的主要代碼
- web層的FindUserServlet的主要代碼如下所示
-
- 修改功能一般分爲兩步走；一個是回顯用戶數據，第二個是修改用戶信息
//1.獲取請求標識id
String id = request.getParameter("id");
//2.調用service中的查找方法
UserService service = new UserServiceImpl();
User user = service.findUserById(id);
//3.保存數據到request域，並轉發到update.jsp
request.setAttribute("user", user);
request.getRequestDispatcher("/update.jsp").forward(request, response);
- dao層的通過id查找用戶的方法如下所示
public User findUserById(int parseInt) {
String sql = "select * from user where id = ?";
return template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), parseInt);
}
- update.jsp頁面將信息回顯的主要代碼
//主要是單選框和下拉菜單的回顯
//單選框
<label>性別：</label>
<c:if test="${user.gender == '男'}">
<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女
</c:if>
<c:if test="${user.gender == '女'}">
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" checked />女
</c:if>
//下拉菜單
<div>
<c:if test="${user.address == '廣東'}">
<%--@declare id="address"--%><label for="address">籍貫：</label>
<select name="address" class="form-control" >
<option value="廣東" selected >廣東</option>
<option value="廣西">廣西</option>
<option value="湖南">湖南</option>
</select>
</c:if>
</div>
<div>
<c:if test="${user.address == '廣西'}">
<label for="address">籍貫：</label>
<select name="address" class="form-control" >
<option value="廣東" >廣東</option>
<option value="廣西" selected >廣西</option>
<option value="湖南">湖南</option>
</select>
</c:if>
</div>
<div>
<c:if test="${user.address == '湖南'}">
<label for="address">籍貫：</label>
<select name="address" class="form-control" >
<option value="廣東" >廣東</option>
<option value="廣西">廣西</option>
<option value="湖南" selected >湖南</option>
</select>
</c:if>
</div>
- 修改用戶信息的主要代碼
- web層的UpdateUserServlet主要代碼如下所示
//1.設置請求編碼
request.setCharacterEncoding("utf-8");
//2.獲取數據
Map<String, String[]> map = request.getParameterMap();
////獲取標識id
//String id = request.getParameter("id");
//3.封裝爲User對象
User user = new User();
try {
BeanUtils.populate(user, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//System.out.println("隱藏域id="+id+";用戶中獲取的id="+user.getId());
//4.調用更新方法
UserService service = new UserServiceImpl();
service.updateUser(user);
//service.updateUserById(user, id);
//5.重定向到userListServlet
response.sendRedirect(request.getContextPath() + "/userListServlet");
- dao層的修改用戶信息方法如下所示
@Override
public void updateUserById(User user, int parseInt) {
String sql = "update user set name = ?, gender = ?, age = ?, address = ?, qq = ?, email = ? where id = ?";
template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail(), parseInt);
}
@Override
public void updateUser(User user) {
String sql = "update user set name = ?, gender = ?, age = ?, address = ?, qq = ?, email = ? where id = ?";
template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail(), user.getId());
}
- 注意
- 通過BeanUtils工具封裝的User對象中，已經將隱藏域中的id封裝到了User中，所以可以不再單獨獲取隱藏域的id來判斷