SSM之crud实现分页查询

实现分页查询

  1. index.jsp页面请求EmployeeController**

    <jsp:forward page="/emps"></jsp:forward>
    
  2. 编写EmployeeController

    在org.westos.controller 包下编写EmployeeController
      @Controller
    public class EmployeeController {
        @RequestMapping(path = "/emps")
        public String getEmps(){
            return "list";
        }
    }
    

    在 WEB-INF/views 下 建一个list.jsp

  3. 编写 EmployeeService

@Service  //注解不要忘了 交个容器管理
public class EmployeeService {
    //注入mapper
    @Autowired
    private EmployeeMapper employeeMapper;
    public List<Employee> getAll(){
        //因为查询所有,所以条件就传null
        List<Employee> employees = employeeMapper.selectByExampleWithDept(null);
        return employees;
    }
}

  1. 在 EmployeeController 方法中调用业务层的查询所有,但是要进行分页查询

    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>5.0.0</version>
    </dependency>
    

    myBatis.xml中全局配置文件中配置

    <!--注册分页插件-->
        <plugins>
            <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
        </plugins>
    
     @RequestMapping(path = "/emps")
          //注意 index.jsp 发过来没有页码所以默认值是 defaultValue = "1"
        public String getEmps(@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum, Model model){
            //使用pagehelper设置分页信息
            //1.在查询所有之前使用PageHelper来设置页码和每页展示的条数
            PageHelper.startPage(pageNum,5);
            //2.那么这个查询就是一个分页查询了
            List<Employee> list = employeeService.getAll();
            //3.把查询出的结果list包装到PageInfo里面,5是可选参数表示连续显示5页的页码
            PageInfo pageInfo = new PageInfo(list,5);
            //4.把pageInfo放到域中转发到页面,就可以从pageInfo中取出分页的信息
            model.addAttribute("pageInfo", pageInfo);
            
            return "list";
        }
    }
    
  2. 测试分页查询

    @RunWith(SpringJUnit4ClassRunner.class)
    /*注意这里要加载spring和springmvc的两个配置文件*/
    @ContextConfiguration(value = {"classpath:applicationContext.xml", "classpath:springmvc.xml"})
    @WebAppConfiguration  //这个注解是为了把WebApplicationContext这个容器的对象放到容器中
    public class MVCTest {
        @Autowired
        WebApplicationContext context;
        private MockMvc mockMvc;
        @Before
        public void init() {
            //构建MockMvc
            // 把 WebApplicationContext 对象传入
            mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
        }
        @Test
        public void testRequest() throws Exception {
            //构建get请求
            MockHttpServletRequestBuilder mb = MockMvcRequestBuilders.get("/emps").param("pageNum", "1");
            //执行get请求,并获取返回的结果
            MvcResult mvcResult = mockMvc.perform(mb).andReturn();
    //那么返回的结果在request请求域中存着呢,我们把请求对象获取到,再从请求对象中取出数据展示
            MockHttpServletRequest request = mvcResult.getRequest();//获取请求对象
            PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");//获取请求域中的数据
            //获取当前页码
            int pageNum = pageInfo.getPageNum();
            //获取总页码
            int pages = pageInfo.getPages();
            //获取总条数
            long total = pageInfo.getTotal();
            //获取连续显示的页页码
            int[] navigatepageNums = pageInfo.getNavigatepageNums();
            //获取员工数据
            List<Employee> list = pageInfo.getList();
            System.out.println(pageNum);
            System.out.println(pages);
            System.out.println(total);
            System.out.println(Arrays.toString(navigatepageNums));
            System.out.println(list);
            for (Employee employee : list) {
                System.out.println(employee);
            }
    
        }
    }
    在pom.xml中把servlet的api换一个高点的版本
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        <scope>provided</scope>
    </dependency>
    
    
  3. 完成 list.jsp页面的布局

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>SSM_CRUD</title>
        <%--引入Jquery--%>
        <script src="${pageContext.request.contextPath}/static/js/jquery-1.12.4.min.js"></script>
        <%--引入bootstrap的样式--%>
        <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <%--引入bootstrap的js样式--%>
        <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <%--标题行--%>
        <div class="row">
            <%--  col-md-12 的意思是让他把12列占完--%>
            <div class="col-md-12">
                <h1>SSM_CRUD</h1>
            </div>
        </div>
        <%--按钮行--%>
        <div class="row">
            <%--按钮列占4列,偏移8列,那就位于最右边了--%>
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">添加</button>
                <button class="btn bg-danger">删除</button>
            </div>
        </div>
        <%--显示表格数据的行--%>
        <div class="row">
            <%--表格数据就占12列把一整行占完--%>
            <div class="col-md-12">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>部门</th>
                        <th>操作</th>
                    </tr>
                    <%--取出员工信息--%>
                    <c:forEach items="${pageInfo.list}" var="emp">
                        <tr>
                            <td>${emp.empId}</td>
                            <td>${emp.empName}</td>
                            <td>${emp.gender=="M"?"男":"女"}</td>
                            <td>${emp.email}</td>
                            <td>${emp.department.deptName}</td>
                            <td>
                                    <%-- btn-sm 表示按钮的尺寸是小一点的按钮--%>
                                <button class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-pencil"></span>
                                    编辑
                                </button>
                                <button class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-trash"></span>
                                    删除
                                </button>
                            </td>
                        </tr>
                    </c:forEach>
    
                </table>
            </div>
        </div>
        <%--显示分页按钮--%>
        <div class="row">
            <%--分页文字信息占6列--%>
            <div class="col-md-6">
                当前第 ${pageInfo.pageNum} 页/总页数 ${pageInfo.pages} 页 总记录数 ${pageInfo.total} 条
            </div>
            <%--分页按钮占6列--%>
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li><a href="${pageContext.request.contextPath}/emp?pageNum=1">首页</a></li>
                        <%--判断如果还有上一页按钮,再显示上一页的按钮--%>
                        <c:if test="${pageInfo.hasPreviousPage}">
                            <li>
                                <a href="${pageContext.request.contextPath}/emps?pageNum=${pageInfo.pageNum-1}"
                                   aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                        </c:if>
                        <%--取连续的页码--%>
    
                        <c:forEach items="${pageInfo.navigatepageNums}" var="page">
                            <%--判断如果页码是当前页就高亮显示 class="active" 这个样式 bootstrap 可以高亮显示--%>
                            <c:if test="${pageInfo.pageNum==page}">
                                <li class="active">
                                    <a href="${pageContext.request.contextPath}/emps?pageNum=${page}">${page}</a>
                                </li>
                            </c:if>
                            <c:if test="${pageInfo.pageNum!=page}">
                                <li>
                                    <a href="${pageContext.request.contextPath}/emps?pageNum=${page}">${page}</a>
                                </li>
                            </c:if>
                        </c:forEach>
                        <%--判断如果还有下一页,再显示下一页的按钮--%>
                        <c:if test="${pageInfo.hasNextPage}">
                            <li>
                                <a href="${pageContext.request.contextPath}/emps?pageNum=${pageInfo.pageNum+1}"
                                   aria-label="Next">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>
                        </c:if>
                        <li>
                            <a href="${pageContext.request.contextPath}/emps?pageNum=${pageInfo.pages}">末页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    </body>
    </html>
    
    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值