综合练习笔记2（用户管理系统）

综合练习笔记（用户管理系统）

1. 结合上次用户信息列表展示案例进行简单修改
    * 列表查询
    * 登录
    * 添加
    * 删除
    * 修改


2. 增加更多复杂的功能
    * 删除选中
    * 分页查询
    * 复杂条件查询

用户管理系统简单的增删改查功能的实现见此处。

复杂的功能

删除选中
- 选中功能指的是复选框，复选框的提交方式是多个请求参数的形式：?id=1&id=2&id=3&id=4等；
- *批量删除功能的实现流程如图所示
- 请求参数提交成功后，需要再web层加一个Servlet进行处理，记为DelSelectedServlet
  - DelSelectedServlet的主要步骤：
    - 获取请求参数数组
    - 调用service层中的删除多个用户方法
    - 跳转到页面展示
  - service层中的批量删除方法只需要在dao层删除一个用户的基础上多次调用即可
  - 先将后台的程序完成如下，在此之前也需要将复选框的name记为uid，value记为用户的id

    //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">&laquo;</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">&raquo;</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">&laquo;</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">&raquo;</span>
                    </a>
                </li>
                <span style="font-size: 25px; margin: 8px">
                    共${pageBean.totalCount}条记录，共${pageBean.totalPage}页
                </span>
            </ul>
        </nav>
    </div>

综合练习笔记2（用户管理系统）

综合练习笔记（用户管理系统）

复杂的功能

登錄驗證案例（Filter過濾器）

敏感詞過濾案例（Filter過濾器）

驗證碼案例之Session補充

綜合練習筆記2（用戶管理系統）

Cookie（客戶端會話技術）筆記

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結