分页查问是一个很常见的性能,对于分页也有很多封装好的轮子供咱们应用。
本文通过应用SpringBoot+Mybatis-plus 实现前端后端的分页性能,并没有应用插件来实现,前端次要是应用Thymeleaf来渲染分页的页码信息。
前段页面分页代码
<nav class="mt-5" th:if="${pageInfo.totalPage>0}" th:fragment="pagination"> <!-- align-items-center --> <ul class="pagination justify-content-center"> <li th:class="|page-item ${pageInfo.pageNum==1?'disabled':''}|"> <a class="page-link" th:href="@{${pageInfo.path}(pageNum=${pageInfo.pageNum}-1)}">« Previous</a> </li> <li th:class="|page-item ${i==pageInfo.pageNum?'active':''}|" th:each="i:${#numbers.sequence(pageInfo.getFrom(),pageInfo.getTo())}"> <a class="page-link" th:href="@{${pageInfo.path}(pageNum=${i})}" th:text="${i}">1</a></li> <li th:class="|page-item ${pageInfo.pageNum>=pageInfo.totalPage?'disabled':''}|"> <a class="page-link" th:href="@{${pageInfo.path}(pageNum=${pageInfo.pageNum+1})}">Next »</a> </li> </ul></nav>- pageInfo.pageNum 依据本人的逻辑定义
- pageInfo.path 不便将整个分页片段援用到其余页面,如果不须要被援用,间接写死门路也能够
管制层Controller
@RequestMapping("discuss/{userId}") public ModelAndView getIndexPage( PageInfo pageInfo, @RequestParam(name = "orderMode", defaultValue = "0") int orderMode) { ... ModelAndView mav = new ModelAndView(); pageInfo = new PageInfo(); page.setPath("user/discuss/" + userId); pageInfo.setPageNum(pageNum); // 这里把文章分类带到页面header实现动静加载分类 IPage<Post> postIPage = postService.postPage(orderMode, pageNum); pageInfo.setTotal(postIPage.getTotal()); pageInfo.setTotalPage(ObjUtils.toInteger(postIPage.getPages())); List<Post> records = postIPage.getRecords(); pageInfo.setRows(records); List<Map<String, Object>> discussPosts = new ArrayList<>(); ... mav.addObject("pageInfo", pageInfo); mav.addObject("orderMode", orderMode); mav.addObject("discussPosts", discussPosts); mav.setViewName("site/my-post"); return mav; }page.setPath("user/discuss/" + userId); 门路最前边必须退出‘/’ ,如果仅是 user/discuss/,点击分页的时候会多出一层
https://localhost/user/discuss/user/discuss/2?pageNum=2服务层service
public IPage<Post> postPage(Integer orderMode, Integer currentPage) { QueryWrapper<Post> wrapper = new QueryWrapper<>(); if (orderMode != 0) { wrapper.eq("a", orderMode); } wrapper.orderByDesc("score", "created"); // 第1页，每页2条 Page<Post> page = new Page<>(currentPage, POSTSIZE); IPage<Post> postIPage = postMapper.selectPage(page, wrapper); // 获取以后数据 return postIPage; }数据拜访层mapper
@Repositorypublic interface PostMapper extends BaseMapper<Post> {}获取pageInfo工具类