前后端结合第一个实验

本次的学习是前后端结合，来写一个查询用户信息的实验，尽管有许多的逻辑不通点，但是这对我来说是一次成长。因为以前的页面展示是在idea上。

这里先讲一个流程：首先是有一个登录人员的信息存入数据库，然后就是一个登录的流程。再其次对于人员的信息有添加、修改的功能（包括全选）。最后还有一个分页的展示和条件查询。

大体的页面效果如下：

那么在这里我就分析一下如何完成对分页的操作，首先我们要知道需要有些什么：

1. 每页的数据
2. 总的记录数
3. 总的页数
4. 每页的条数
5. 当前的页码

在这里我们可以通过总的条数和分页时每页的条数来计算总的页数：
总的条数%每页的条数 取模时为0，那么这个商就是总的页数，如果不为0那么就在商的基础上加1就是总的页数。

在获取参数的时候获取当前的页码和每页的条数时，如果为null或者空字符串那么就对它们进行赋值的操作，当前页码设置为1，每页的条数设置为5。

然后在通过三层架构的方式，将数据传入逻辑层，通过SQL语句：

String sql = "select * from user limit ?,? ";

返回的就是一个对数据库表数据的封装的对象的集合，然后通过这个对象进行遍历，将数据一一拿出、展示即可。

servlet代码展示：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        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)){
            rows = "5";
        }

        //获取条件查询参数
        Map<String, String[]> condition = request.getParameterMap();


        //2.调用service查询
        UserService service = new UserServiceImpl();
        PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);

        System.out.println(pb);

        //3.将PageBean存入request
        request.setAttribute("pb",pb);
        request.setAttribute("condition",condition);//将查询条件存入request
        //4.转发到list.jsp
        request.getRequestDispatcher("/list.jsp").forward(request,response);
    }

jsp代码展示

<table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th><input type="checkbox" id="firstCb"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>QQ</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>

            <c:forEach items="${pb.list}" var="user" varStatus="s">
                <tr>
                    <td><input type="checkbox" name="uid" value="${user.id}"></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="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>&nbsp;
                        <a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
                </tr>

            </c:forEach>