SSM博客实战(2)--实现分页效果

分页是JAVA WEB项目常用的功能,今天在Spring MVC中实现了简单的分页操作和搜索分页,在此记录一下。使用的框架为SSM(MyBatis+SpringMVC+Spring)。 先上效果图

一、Java 工具类

Page.java
  1. package com.liuyanzhao.blog.util.others;
  2. /**
  3.  * 分页
  4.  * Created by 言曌 on 2017/8/26.
  5.  */
  6. import java.io.Serializable;
  7. public class Page implements Serializable {
  8.     private static final long serialVersionUID = -3198048449643774660L;
  9.     private int pageNow = 1// 当前页数
  10.     private int pageSize = 10// 每页显示记录的条数
  11.     private int totalCount; // 总的记录条数
  12.     private int totalPageCount; // 总的页数
  13.     @SuppressWarnings("unused")
  14.     private int startPos; // 开始位置,从0开始
  15.     @SuppressWarnings("unused")
  16.     private boolean hasFirst;// 是否有首页
  17.     @SuppressWarnings("unused")
  18.     private boolean hasPre;// 是否有前一页
  19.     @SuppressWarnings("unused")
  20.     private boolean hasNext;// 是否有下一页
  21.     @SuppressWarnings("unused")
  22.     private boolean hasLast;// 是否有最后一页
  23.     /**
  24.      * 通过构造函数 传入  总记录数  和  当前页
  25.      * @param totalCount
  26.      * @param pageNow
  27.      */
  28.     public Page(int totalCount, int pageNow) {
  29.         this.totalCount = totalCount;
  30.         this.pageNow = pageNow;
  31.     }
  32.     /**
  33.      * 取得总页数,总页数=总记录数/总页数
  34.      * @return
  35.      */
  36.     public int getTotalPageCount() {
  37.         totalPageCount = getTotalCount() / getPageSize();
  38.         return (totalCount % pageSize == 0) ? totalPageCount
  39.             : totalPageCount + 1;
  40.     }
  41.     public void setTotalPageCount(int totalPageCount) {
  42.         this.totalPageCount = totalPageCount;
  43.     }
  44.     public int getPageNow() {
  45.         return pageNow;
  46.     }
  47.     public void setPageNow(int pageNow) {
  48.         this.pageNow = pageNow;
  49.     }
  50.     public int getPageSize() {
  51.         return pageSize;
  52.     }
  53.     public void setPageSize(int pageSize) {
  54.         this.pageSize = pageSize;
  55.     }
  56.     public int getTotalCount() {
  57.         return totalCount;
  58.     }
  59.     public void setTotalCount(int totalCount) {
  60.         this.totalCount = totalCount;
  61.     }
  62.     /**
  63.      * 取得选择记录的初始位置
  64.      * @return
  65.      */
  66.     public int getStartPos() {
  67.         return (pageNow - 1) * pageSize;
  68.     }
  69.     public void setStartPos(int startPos) {
  70.         this.startPos = startPos;
  71.     }
  72.     /**
  73.      * 是否是第一页
  74.      * @return
  75.      */
  76.     public boolean isHasFirst() {
  77.         return (pageNow == 1) ? false : true;
  78.     }
  79.     public void setHasFirst(boolean hasFirst) {
  80.         this.hasFirst = hasFirst;
  81.     }
  82.     /**
  83.      * 是否有首页
  84.      * @return
  85.      */
  86.     public boolean isHasPre() {
  87.         // 如果有首页就有前一页,因为有首页就不是第一页
  88.         return isHasFirst() ? true : false;
  89.     }
  90.     public void setHasPre(boolean hasPre) {
  91.         this.hasPre = hasPre;
  92.     }
  93.     /**
  94.      * 是否有下一页
  95.      * @return
  96.      */
  97.     public boolean isHasNext() {
  98.         // 如果有尾页就有下一页,因为有尾页表明不是最后一页
  99.         return isHasLast() ? true : false;
  100.     }
  101.     public void setHasNext(boolean hasNext) {
  102.         this.hasNext = hasNext;
  103.     }
  104.     /**
  105.      * 是否有尾页
  106.      * @return
  107.      */
  108.     public boolean isHasLast() {
  109.         // 如果不是最后一页就有尾页
  110.         return (pageNow == getTotalCount()) ? false : true;
  111.     }
  112.     public void setHasLast(boolean hasLast) {
  113.         this.hasLast = hasLast;
  114.     }
  115. }
 

二、编辑数据访问层 Mapper.xml 和 Mapper 类

博主使用是 Mapper 代理方式操作数据库,Mapper 代理需要类和xml文件在一起 当然大家也可以用 DAO 的方式
  • ArticleMapperCustom.xml
  1. <!-- 查询文章记录总数 -->
  2. <select id="getArticleCount" resultType="int">
  3.     select count(*) from article
  4. </select>
  5. <!--通过分页查询文章-->
  6. <select id="selectArticleByPage" resultType="com.liuyanzhao.blog.po.custom.ArticleCustom">
  7.     select * from article limit #{startPos},#{pageSize}
  8. </select>
 
  • ArticleMapperCustom.java
  1. //分页操作
  2. public List<ArticleCustom> selectArticleByPage(@Param(value="startPos") Integer startPos,@Param(value="pageSize") Integer pageSize) throws Exception;
 

三、编辑业务层  Service类 和 Service的实现类

  • ArticleService.java  (接口)
  1. //分页显示
  2. public void showArticleByPage(HttpServletRequest request, Model model) throws Exception;
  • ArticleServiceImpl.java  (实现类)
  1. @Override
  2.     public void showArticleByPage(HttpServletRequest request, Model model) throws Exception {
  3.         String pageNow = request.getParameter("pageNow");
  4.         Page page = null;
  5.         List<ArticleCustom> articleList = new ArrayList<ArticleCustom>();
  6.         int totalCount = articleMapperCustom.getArticleCount();
  7.         if (pageNow != null) {
  8.             page = new Page(totalCount, Integer.parseInt(pageNow));
  9.             articleList = this.articleMapperCustom.selectArticleByPage(page.getStartPos(), page.getPageSize());
  10.         } else {
  11.             page = new Page(totalCount, 1);
  12.             articleList = this.articleMapperCustom.selectArticleByPage(page.getStartPos(), page.getPageSize());
  13.         }
  14.         model.addAttribute("articleList", articleList);
  15.         model.addAttribute("page", page);
  16.     }
 

四、编辑控制层  Controller 类

IndexController.java
  1. @Autowired
  2. private ArticleService articleService;
  3. //首页文章分页显示
  4. @RequestMapping("/")
  5. public String IndexView(HttpServletRequest request, Model model) throws Exception {
  6.     //此处的articleService是注入的articleService接口的对象
  7.     articleService.showArticleByPage(request, model);
  8.     return "/WEB-INF/Home/Index/index.jsp";
  9. }
注意: 这里的 articleService 需要注入,在 spring 配置文件中添加
  1. <!-- 用户管理的service -->
  2. bean id="userService" class="com.liuyanzhao.blog.service.impl.UserServiceImpl"/>
 

五、编辑视图层  JSP 文件

这里只将分页部分的代码贴出
  1. <!-- 分页功能 start -->
  2.            <div align="center">
  3.                <span>共 ${page.totalPageCount} 页</span> <span >
  4.                ${page.pageNow} 页</span> <a href="?pageNow=1">首页</a>
  5.                <c:choose>
  6.                    <c:when test="${page.pageNow - 1 > 0}">
  7.                        <a href="?pageNow=${page.pageNow - 1}">上一页</a>
  8.                    </c:when>
  9.                    <c:when test="${page.pageNow - 1 <= 0}">
  10.                        <a href="?pageNow=1">上一页</a>
  11.                    </c:when>
  12.                </c:choose>
  13.                <c:choose>
  14.                    <c:when test="${page.totalPageCount==0}">
  15.                        <a href="?pageNow=${page.pageNow}">下一页</a>
  16.                    </c:when>
  17.                    <c:when test="${page.pageNow + 1 < page.totalPageCount}">
  18.                        <a href="?pageNow=${page.pageNow + 1}">下一页</a>
  19.                    </c:when>
  20.                    <c:when test="${page.pageNow + 1 >= page.totalPageCount}">
  21.                        <a href="?pageNow=${page.totalPageCount}">下一页</a>
  22.                    </c:when>
  23.                </c:choose>
  24.                <c:choose>
  25.                    <c:when test="${page.totalPageCount==0}">
  26.                        <a href="?pageNow=${page.pageNow}">尾页</a>
  27.                    </c:when>
  28.                    <c:otherwise>
  29.                        <a href="?pageNow=${page.totalPageCount}">尾页</a>
  30.                    </c:otherwise>
  31.                </c:choose>
  32.            </div>
  33.            <!-- 分页功能 End -->
注意: 我的测试地址是:http://localhost:8090/ForestBlog 其中 localhost:8090/ForestBlog 可以当做域名,因为我的 控制器里的 @RequestMapping("/") 里是 / , 如果你是 @RequestMapping("/xxx")  之类的,需要在 上面的四个链接的?之前加 xxx   这个效果图如下    

六、美化分页

为了达到这样的效果,我们这里修改上面的 jsp 代码 我用的是 Bootstrap 和 Font Awesome 的图标
  1. <div class="divBody">
  2.            <div class="divContent">
  3.                <c:choose>
  4.                    <c:when test="${page.totalPageCount <= 10 }">
  5.                        <c:set var="begin" value="1"/>
  6.                        <c:set var="end" value="${page.totalPageCount }"/>
  7.                    </c:when>
  8.                    <c:otherwise>
  9.                        <c:set var="begin" value="${page.pageNow-4 }"/>
  10.                        <c:set var="end" value="${page.pageNow + 4}"/>
  11.                        <c:if test="${begin < 1 }">
  12.                            <c:set var="begin" value="1"/>
  13.                            <c:set var="end" value="10"/>
  14.                        </c:if>
  15.                        <c:if test="${end > page.totalPageCount }">
  16.                            <c:set var="begin" value="${page.totalPageCount-5 }"/>
  17.                            <c:set var="end" value="${page.totalPageCount }"/>
  18.                        </c:if>
  19.                    </c:otherwise>
  20.                </c:choose>
  21.                <%--上一页 --%>
  22.                <c:choose>
  23.                    <c:when test="${page.pageNow eq 1 }">
  24.                        <%--当前页为第一页,隐藏上一页按钮--%>
  25.                    </c:when>
  26.                    <c:otherwise>
  27.                        <a href="?pageNow=${page.pageNow-1}" class="btn btn-default"><span class="fa fa-angle-left"></span></a>
  28.                    </c:otherwise>
  29.                </c:choose>
  30.                <%--显示第一页的页码--%>
  31.                <c:if test="${begin >= 2 }">
  32.                    <a href="?pageNow=1" class="btn btn-default">1</a>
  33.                </c:if>
  34.                <%--显示点点点--%>
  35.                <c:if test="${begin  > 2 }">
  36.                    <button type="button" class="btn btn-default disabled" style="border: 0;">...</button>
  37.                </c:if>
  38.                <%--打印 页码--%>
  39.                <c:forEach begin="${begin }" end="${end }" var="i">
  40.                    <c:choose>
  41.                        <c:when test="${i eq page.pageNow }">
  42.                            <button type="button" class="btn btn-primary active" >${i}</button>
  43.                        </c:when>
  44.                        <c:otherwise>
  45.                            <a href="?pageNow=${i}" class="btn btn-default ">${i }</a>
  46.                        </c:otherwise>
  47.                   </c:choose>
  48.                </c:forEach>
  49.                <%-- 显示点点点 --%>
  50.                <c:if test="${end < page.totalPageCount-1 }">
  51.                    <button type="button" class="btn btn-default disabled" style="border: 0;">...</button>
  52.                </c:if>
  53.                <%-- 显示最后一页的数字 --%>
  54.                <c:if test="${end < page.totalPageCount }">
  55.                    <a href="?pageNow=${page.totalPageCount}" class="btn btn-default">${page.totalPageCount}</a>
  56.                </c:if>
  57.                <%--下一页 --%>
  58.                <c:choose>
  59.                    <c:when test="${page.pageNow eq page.totalPageCount }">
  60.                    <%--到了尾页隐藏,下一页按钮--%>
  61.                    </c:when>
  62.                    <c:otherwise>
  63.                        <a href="?pageNow=${page.pageNow+1}" class="btn btn-default"><span class="fa fa-angle-right"></span></a>
  64.                    </c:otherwise>
  65.                </c:choose>
  66.            </div>
  67.        </div>
css 代码(写得很累赘)
  1. /*分页*/
  2. .container .btn {
  3.     border1px solid #ddd!important;
  4.     border-radius: 2px!important;
  5.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04)!important;
  6. }
  7. .container .btn-primary {
  8.     background-color#398898!important;
  9.     border-color:#398898!important;
  10. }
  11. .container .btn-default:hover {
  12.     background-color#398898!important;
  13.     border-color#398898!important;
  14.     color#ffffff !important;
  15. }
  16. .container .disabled:hover {
  17.     cursor:text !important;
  18.     background-color#ffffff!important;
  19.     border1px solid #ddd!important;
  20.     color#333333!important;
  21. }
  本文链接:https://liuyanzhao.com/6073.html  

发表评论

目前评论:1