综合练习笔记(用户管理系统)
1. 结合上次用户信息列表展示案例进行简单修改
* 列表查询
* 登录
* 添加
* 删除
* 修改
2. 增加更多复杂的功能
* 删除选中
* 分页查询
* 复杂条件查询
复杂的功能
- 删除选中
- 选中功能指的是复选框,复选框的提交方式是多个请求参数的形式:?id=1&id=2&id=3&id=4等;
- *批量删除功能的实现流程如图所示
- 请求参数提交成功后,需要再web层加一个Servlet进行处理,记为DelSelectedServlet
- DelSelectedServlet的主要步骤:
- 获取请求参数数组
- 调用service层中的删除多个用户方法
- 跳转到页面展示
- service层中的批量删除方法只需要在dao层删除一个用户的基础上多次调用即可
- 先将后台的程序完成如下,在此之前也需要将复选框的name记为uid,value记为用户的id
- DelSelectedServlet的主要步骤:
//DelSelectedServle中的主要方法
//1.获取请求参数数组
String[] uids = request.getParameterValues("uid");
//2.调用service层中的删除多个用户方法
UserService service = new UserServiceImpl();
service.deleteUsers(uids);
//3.重定向到userListServlet
response.sendRedirect(request.getContextPath() + "/userListServlet");
//service层中主要方法
public void deleteUsers(String[] uids) {
if (uids != null && uids.length > 0){
for (int i = 0; i < uids.length; i++) {
userDao.deleteUserById(Integer.parseInt(uids[i]));
}
}
}
- 此删除选中功能的主要操作在于前端,如何才能提交多个复选框的请求参数?
- 复选框本身其实就可以提交多个选中的参数,所以我们可以将这些复选框组合成一个表单中的复选框,即可以在整个table外套一个表单,这样的话,只需要再设置点击删除选中按钮时提交此表单即可;所以我们需要为删除选中按钮添加点击事件;
- 设置全选与全不选复选框
window.onload = function () {
//获取删除选中按钮,并为其添加单击事件
document.getElementById("deleteSelected").onclick = function () {
if(confirm("您确定要删除所选条目吗?")){
//前端处理提交空表单
//获取并遍历下面所有的复选框
var cbs = document.getElementsByName("uid");
var flag = false;
for(var i=0; i<cbs.length; i++){
if(cbs[i].checked){
flag = true;
break;
}
}
if(flag){
//获取表单,并提交表单
document.getElementById("cbform").submit();
}
}
}
//设置全选与全不选
//1.获取最上面的复选框设置其点击事件
document.getElementById("firstCb").onclick = function () {
//2.获取其他所有的复选框
var cbs = document.getElementsByName("uid");
//3.遍历所有的复选框
for(var i=0; i<cbs.length; i++){
//4.设置复选框状态与第一个相同
cbs[i].checked = this.checked;
}
}
}
- 分页查询
- 好处
- 减小服务器开销
- 提高用户体验
- 点击list.jsp页面中的页码来实现翻页,本功能主要存在list.jsp页面与服务器端的交互;
- 数据交互分析
- 服务器端主要需要输出给页面的数据包括:
-
总记录条数 totalCount
-
总页码数 totalPage 总记录条数 % 每页条数 == 0 ? 总记录条数 / 每页条数 : 总记录条数 / 每页条数 + 1
-
展示的用户信息集合 List
-
每页条数 rows
-
当前页码 currentPage
-
需要设置一个文件,将分页对象实体化;设置页面对象为 PageBean
-
- 服务器端主要需要输出给页面的数据包括:
- 好处
package domain;
import java.util.List;
/**
* 分页数据对象
*/
public class PageBean<T> {
private int totalCount; //总记录条数
private int totalPage; //总页数
private int rows; //每页显示条数
private int currentPage; //当前页码
private List<T> list; //显示的记录集合
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
@Override
public String toString() {
return "PageBean{" +
"totalCount=" + totalCount +
", totalPage=" + totalPage +
", rows=" + rows +
", currentPage=" + currentPage +
", list=" + list +
'}';
}
}
* 页面需要提交给服务器端的数据包括:
- 每页条数 rows
- 当前页码 currentPage
* 点击页面的后的流程分析
* web层 :表单提交数据给Servlet,记为FindUserByPageServlet,该Servlet调用service层实现数据的查询与封装,将数据转发给list.jsp
* service层 :调用dao层实现数据库中用户信息的查找,将数据包装为PageBean对象,并返回给Servlet
* dao层 :实现具体数据的查找
- 分页查询功能的流程图如下所示:
- web层中FindUserByPageServlet的主要代码如下所示
//1.接收当前页码,每页记录条数
String currentPage = request.getParameter("currentPage");
String rows = request.getParameter("rows");
//2.调用service层查询用户记录数据
UserService service = new UserServiceImpl();
PageBean<User> pageBean = service.findUserByPage(currentPage, rows);
System.out.println(pageBean);
//3.将数据保存在request域
request.setAttribute("pageBean", pageBean);
//4.转发到list.jsp页面
request.getRequestDispatcher("/list.jsp").forward(request, response);
- service层中UserService主要代码如下所示
public PageBean<User> findUserByPage(String _currentPage, String _rows) {
//1.创建空的PageBean对象
PageBean<User> pageBean = new PageBean<User>();
//2.设置当前页码及每页记录总数
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
pageBean.setCurrentPage(currentPage);
pageBean.setRows(rows);
//3.调用dao层查询用户记录总条数
int totalCount = userDao.findTotalCount();
pageBean.setTotalCount(totalCount);
//4.调用dao层查询要显示的用户到集合中
int start = (currentPage-1) * rows;
List<User> list = userDao.findUserByPage(start, rows);
pageBean.setList(list);
//5.计算总页数
int totalPage = totalCount % rows == 0 ? totalCount / rows : totalCount / rows + 1;
pageBean.setTotalPage(totalPage);
return pageBean;
}
- dao层中UserDao主要代码如下所示
public List<User> findUserByPage(int start, int rows) {
String sql = "select * from user limit ?, ?";
return (List<User>) template.query(sql, new BeanPropertyRowMapper<User>(User.class), start, rows);
}
- 以上主要实现了后端的数据操作,现已将包装好的PageBean对象发送给了list.jsp页面;借下来需要在list.jsp中完成信息的展示
//设置分页条如下
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<c:if test="${pageBean.currentPage == 1}">
<li class="disabled">
</c:if>
<c:if test="${pageBean.currentPage != 1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pageBean.currentPage - 1}&rows=5" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pageBean.totalPage}" var="i">
<c:if test="${pageBean.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
</c:if>
<c:if test="${pageBean.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
</c:if>
</c:forEach>
<li>
<c:if test="${pageBean.currentPage == pageBean.totalPage}">
<li class="disabled">
</c:if>
<c:if test="${pageBean.currentPage != pageBean.totalPage}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pageBean.currentPage + 1}&rows=5" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 25px; margin: 8px">
共${pageBean.totalCount}条记录,共${pageBean.totalPage}页
</span>
</ul>
</nav>
</div>
- 在设置展示界面时也对后端进行了一些小的调整;主要是为了防止空指针异常或者其他异常
//在findUserByPageServlet中添加了以下判断
if(currentPage == null || "".equals(currentPage)){
currentPage = "1";
}
if(rows == null || "".equals(rows)){ //默认每页展示5条记录
rows = "5";
}
//在dao层的UserServiceImpl中对findUserByPage方法也添加了一些判断,修改如下
public PageBean<User> findUserByPage(String _currentPage, String _rows) {
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
//1.创建空的PageBean对象
PageBean<User> pageBean = new PageBean<User>();
//若当前页码小于1,则设为1
if(currentPage < 1){
currentPage =1;
}
//3.调用dao层查询用户记录总条数
int totalCount = userDao.findTotalCount();
pageBean.setTotalCount(totalCount);
//5.计算总页数
int totalPage = (totalCount % rows == 0) ? (totalCount / rows) : (totalCount / rows + 1);
pageBean.setTotalPage(totalPage);
//若当前页面大于总页数,则设为总页数
if(currentPage > totalPage){
currentPage = totalPage;
}
//2.设置当前页码及每页记录总数
pageBean.setCurrentPage(currentPage);
pageBean.setRows(rows);
//4.调用dao层查询要显示的用户到集合中
int start = (currentPage-1) * rows;
List<User> list = userDao.findUserByPage(start, rows);
pageBean.setList(list);
return pageBean;
}
- 复杂条件查询
-
此功能主要是完成多条件删选查询
-
首先我们进行数据的交互分析
- 表单输入给服务器的数据非常简单,当然就是这些框中的条件了
- 当然,我们需要设置提交按钮点击后,表单的提交地址uri,以及为各个框设置name
- 服务器端可以将提交的数据通过map集合获取,然后我们便在查询数据时,需要加上所获取的条件
- 我们涉及到的数据库的查询有连个方法,一个是查询数据的个数,一个是查询数据的信息,并将其封装为list集合
- 在这两个方法中都涉及到一个sql的拼接问题;因为查询的条件个数并不确定
- sql拼接的一个小的方法
- 先定义一个基本sql = "selsec count(*) form user where 1 = 1 ";
- 然后根据查询的方法用StringBuffer将其进行拼接sb.append(" and " + key + " like ?");
- 关于模糊查询,需要用"%value%"这种方式,一定记得要加%
- 表单输入给服务器的数据非常简单,当然就是这些框中的条件了
-
由于此次功能与分页查询有相通之处,所以不需要再重新编写servlet;只需要在上述分页查询的代码中进行一些代码的增加即可
-
首先是查询按钮的修改
-
<%--
修改查询表单的提交路径
为各提交内容命名
并加入查询信息的回显
--%>
<form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post">
<div class="form-group">
<label for="exampleInputName2">姓名</label>
<input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2">
</div>
<div class="form-group">
<label for="exampleInputName3">籍贯</label>
<input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3">
</div>
<div class="form-group">
<label for="exampleInputEmail2">邮箱</label>
<input type="email" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2">
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
- 然后修改FindUserByPageServlet
//设置请求编码格式
request.setCharacterEncoding("utf-8");
//1.接收当前页码,每页记录条数
String currentPage = request.getParameter("currentPage");
String rows = request.getParameter("rows");
//防止空指针异常,添加初始值
if(currentPage == null || "".equals(currentPage)){
currentPage = "1";
}
if(rows == null || "".equals(rows)){ //默认每页展示5条记录
rows = "5";
}
System.out.println(currentPage + "--------" + rows);
//接收请求参数map集合
Map<String, String[]> condition = request.getParameterMap();
//2.调用service层查询用户记录数据,加入条件进行查询
UserService service = new UserServiceImpl();
PageBean<User> pageBean = service.findUserByPage(currentPage, rows, condition);
System.out.println(pageBean);
//3.将数据保存在request域
request.setAttribute("pageBean", pageBean);
//也保存请求参数到request域,用以回显
request.setAttribute("condition", condition);
//4.转发到list.jsp页面
request.getRequestDispatcher("/list.jsp").forward(request, response);
- 在FindUserByPageServlet中,我们修改了一个方法的参数,加入了条件查询,我们可以直接重构此方法,也可以重载此方法,我这里就再重新编写一下这个方法
public PageBean<User> findUserByPage(String _currentPage, String _rows, Map<String, String[]> condition) {
// 创建新的PageBean对象
PageBean<User> pageBean = new PageBean<>();
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
//调用dao层查询用户记录总条数
int totalCount = userDao.findTotalCount(condition);
//计算总页数
int totalPage = (totalCount % rows == 0) ? (totalCount / rows) : (totalCount / rows + 1);
//解决没有符合条件数据的情况
if(totalPage == 0){
pageBean.setTotalCount(0);
pageBean.setTotalPage(0);
return pageBean;
}
//若当前页码小于1,则设为1
if(currentPage < 1){
currentPage =1;
}
//若当前页面大于总页数,则设为总页数
if(currentPage > totalPage){
currentPage = totalPage;
}
//调用dao层查询要显示的用户到集合中
int start = (currentPage-1) * rows;
List<User> list = userDao.findUserByPage(start, rows, condition);
//封装PageBean对象
pageBean.setTotalCount(totalCount);
pageBean.setTotalPage(totalPage);
pageBean.setRows(rows);
pageBean.setCurrentPage(currentPage);
pageBean.setList(list);
return pageBean;
}
- 此方法中有两处修改:一个是调用dao层查询用户记录总条数方法,另一个是调用dao层查询要显示的用户数据方法;在两个方法中均加入了查询的条件
- 首先先来看看查询用户数据总条数方法
public int findTotalCount(Map<String, String[]> condition) {
//定义初始sql
String sql = "select count(*) from user where 1 = 1 ";
StringBuffer sb = new StringBuffer(sql);
//遍历map
Set<String> keyset = condition.keySet();
//定义用户参数集合
List<Object> params = new ArrayList<Object>();
for (String key : keyset){
//排除分页的条件参数
if(key.equals("currentPage") || key.equals("rows")){
continue;
}
//获取value
String value = condition.get(key)[0];
//判断是否有值
if(value != null && !"".equals(value)){
sb.append(" and " + key + " like ?");
params.add("%"+value+"%");
}
}
sql = sb.toString();
System.out.println(sql);
System.out.println(params);
return template.queryForObject(sql, Integer.class, params.toArray());
}
- 接下来再看看查询用户数据方法
public List<User> findUserByPage(int start, int rows, Map<String, String[]> condition) {
//定义初始sql
String sql = "select * from user where 1 = 1 ";
StringBuffer sb = new StringBuffer(sql);
//遍历map
Set<String> keyset = condition.keySet();
//定义用户参数集合
List<Object> params = new ArrayList<Object>();
for (String key : keyset){
//排除分页的条件参数
if(key.equals("currentPage") || key.equals("rows")){
continue;
}
// 获取value
String value = condition.get(key)[0];
//判断是否有值
if(value != null && !"".equals(value)){
sb.append(" and " + key + " like ?");
params.add("%"+value+"%");
}
}
//添加分页限制
sb.append(" limit ?, ?");
// 添加分页查询参数
params.add(start);
params.add(rows);
sql = sb.toString();
System.out.println(sql);
System.out.println(params);
return template.query(sql, new BeanPropertyRowMapper<User>(User.class), params.toArray());
}
- 最后细节的调整:在查询状态下,点击分页则不能回显查询数据,只需要在分页按钮处的href后添加查询的请求参数即可,查询的请求参数已经保存在request域中了;最后分页处的代码修改为
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<c:if test="${pageBean.currentPage == 1}">
<li class="disabled">
</c:if>
<c:if test="${pageBean.currentPage != 1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pageBean.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pageBean.totalPage}" var="i">
<c:if test="${pageBean.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
<c:if test="${pageBean.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
</c:forEach>
<li>
<c:if test="${pageBean.currentPage == pageBean.totalPage}">
<li class="disabled">
</c:if>
<c:if test="${pageBean.currentPage != pageBean.totalPage}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pageBean.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 25px; margin: 8px">
共${pageBean.totalCount}条记录,共${pageBean.totalPage}页
</span>
</ul>
</nav>
</div>