SSM博客实战(8)-文章搜索和分页实现

avatar 2017年09月16日18:38:21 8 4681 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
本文将介绍如何实现搜索功能和分页功能。其中分页功能在之前已经介绍了，这里还会贴出代码。

本文中的数据用于测试，包括分类和标签信息是随便填的。

先上效果，这个是以后台为例子


一、先看数据表


注意：下表只是部分截图，不代表全部字段。表中的内容都是随便打的，尤其是 文章的标签和分类

1、article 表





2、category 表





3、tag 表





4、user 表




二、实体类


ArticleSearchVo.java
  1. package com.liuyanzhao.blog.po.custom;
  4. import com.liuyanzhao.blog.util.others.Page;
  6. import java.util.List;
  8. /**
  9.  * 用于封装搜索的文章列表，包括文章信息，作者信息，分类信息，标签信息，搜索信息
  10.  * Created by 言曌 on 2017/8/24.
  11.  */
  12. public class ArticleSearchVo extends ArticleCustom {
  13.     //文章信息
  14.     private ArticleCustom articleCustom;
  16.     //文章对应的分类
  17.     private List<CategoryCustom> categoryCustomList;
  19.     //文章对应的标签
  20.     private List<TagCustom> tagCustomList;
  22.     //作者信息
  23.     private UserCustom userCustom;
  25.     //文章分页信息
  26.     private Page page;
  28.     //搜索关键词
  29.     private String query;
  31.     public String getQuery() {
  32.         return query;
  33.     }
  35.     public UserCustom getUserCustom() {
  36.         return userCustom;
  37.     }
  39.     public void setUserCustom(UserCustom userCustom) {
  40.         this.userCustom = userCustom;
  41.     }
  43.     public void setQuery(String query) {
  44.         this.query = query;
  45.     }
  48.     public ArticleCustom getArticleCustom() {
  49.         return articleCustom;
  50.     }
  52.     public void setArticleCustom(ArticleCustom articleCustom) {
  53.         this.articleCustom = articleCustom;
  54.     }
  56.     public List<CategoryCustom> getCategoryCustomList() {
  57.         return categoryCustomList;
  58.     }
  60.     public void setCategoryCustomList(List<CategoryCustom> categoryCustomList) {
  61.         this.categoryCustomList = categoryCustomList;
  62.     }
  64.     public List<TagCustom> getTagCustomList() {
  65.         return tagCustomList;
  66.     }
  68.     public void setTagCustomList(List<TagCustom> tagCustomList) {
  69.         this.tagCustomList = tagCustomList;
  70.     }
  72.     public Page getPage() {
  73.         return page;
  74.     }
  76.     public void setPage(Page page) {
  77.         this.page = page;
  78.     }
  79. }



因为我们要输出文章列表，文章列表至少要包括 文章信息(标题，id 和发布时间)，分类信息(分类名称和 id )，标签信息(标签名称和 id )，作者信息(作者昵称和 id )。

对于每篇文章而言，其中分类信息标签信息，在 article 里是以逗号分隔的，也就是我们要用一个 List 集合存储；而文章信息，作者信息和分页信息，用对象存储即可；因为我们还要返回查询输入的关键词，所以还要有一个变量。

其中 ArticleCustom,UserCustom,TagCustom,CategoryCustom 分别是 po 的扩展。


三、分页 类


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

具体使用，见下


四、dao 层


ArticleCustomMapper.java
  1. //文章结果查询结果的数量
  2.     public Integer getSearchResultCount(String s) throws Exception;
  4.     //查询文章分页操作
  5.     public List<ArticleCustom> listSearchResultByPage(@Param(value="queryContent") String queryContent,@Param(value="startPos") Integer startPos,@Param(value="pageSize") Integer pageSize) throws Exception;



ArticleCustomMapper.xml
  1. <!--查询结果统计-->
  2. <select id="getSearchResultCount" parameterType="String" resultType="Integer">
  3.     SELECT count(*) FROM `article`
  4.     <where>
  5.         article_status > 0 AND
  6.         article_title LIKE "%${value}%" OR
  7.         article_content LIKE "%${value}%"
  8.     </where>
  10. </select>
  12. <!--文章查询分页显示-->
  13. <select id="listSearchResultByPage"  resultType="com.liuyanzhao.blog.po.custom.ArticleCustom">
  14.     SELECT
  15.     <include refid="article_table_all_columns"/>
  16.     FROM `article`
  17.     <where>
  18.         article_status > 0 AND
  19.         article_title LIKE '%${queryContent}%' OR
  20.         article_content LIKE '%${queryContent}%'
  21.         limit #{startPos},#{pageSize}
  22.     </where>
  23. </select>

注意字段名不要写错了，我这里的 article_status 是文章状态，0表示禁用不显示，1表示正常，2表示置顶


五、Service 层


ArticleServiceImpl.java
  1. //文章查询结果分页
  2.     @Override
  3.     public List<ArticleSearchVo> listSearchResultByPage(HttpServletRequest request, Model model,Integer pageNow,Integer pageSize,String query) throws Exception {
  4.         Page page = null;
  5.         List<ArticleCustom> articleCustomList = new ArrayList<ArticleCustom>();
  6.         int totalCount = articleMapperCustom.getSearchResultCount(query);
  9.         if (pageNow != null) {
  10.             page = new Page(totalCount, pageNow, pageSize);
  11.             articleCustomList = this.articleMapperCustom.listSearchResultByPage(query, page.getStartPos(), page.getPageSize());
  12.         } else {
  13.             page = new Page(totalCount, 1, pageSize);
  14.             articleCustomList = this.articleMapperCustom.listSearchResultByPage(query, page.getStartPos(), page.getPageSize());
  15.         }
  17.         List<ArticleSearchVo> articleSearchVoList = new ArrayList<ArticleSearchVo>();
  19.         //查询结果条数为0，下面的不执行，防止空指针
  20.         if(totalCount!=0) {
  21.             for (int i = 0; i < articleCustomList.size(); i++) {
  22.                 ArticleSearchVo articleSearchVo = new ArticleSearchVo();
  24.                 //1、将文章信息装到 articleListVoList 中
  25.                 ArticleCustom articleCustom = articleCustomList.get(i);
  26.                 articleSearchVo.setArticleCustom(articleCustom);
  28.                 //2、将分类信息装到 articleListVoList 中
  29.                 List<CategoryCustom> categoryCustomList = new ArrayList<CategoryCustom>();
  30.                 String categoryIds = articleCustomList.get(i).getArticleCategoryIds();
  31.                 String[] cateId = categoryIds.split(",");
  32.                 for (int j = 0; j < cateId.length; j++) {
  33.                     Category category = categoryMapper.selectByPrimaryKey(Integer.valueOf(cateId[j]));
  34.                     CategoryCustom categoryCustom = new CategoryCustom();
  35.                     BeanUtils.copyProperties(category, categoryCustom);
  36.                     categoryCustomList.add(categoryCustom);
  37.                 }
  38.                 articleSearchVo.setCategoryCustomList(categoryCustomList);
  40.                 //3、获得标签信息
  41.                 List<TagCustom> tagCustomList = new ArrayList<TagCustom>();
  42.                 String tagIds = articleCustomList.get(i).getArticleTagIds();
  43.                 String[] tagId = tagIds.split(",");
  44.                 for (int j = 0; j < tagId.length; j++) {
  45.                     Tag tag = tagMapper.selectByPrimaryKey(Integer.valueOf(tagId[j]));
  46.                     TagCustom tagCustom = new TagCustom();
  47.                     BeanUtils.copyProperties(tag, tagCustom);
  48.                     tagCustomList.add(tagCustom);
  49.                 }
  50.                 articleSearchVo.setTagCustomList(tagCustomList);
  52.                 //4、获得作者信息
  53.                 User user = userMapper.selectByPrimaryKey(articleCustom.getArticleUserId());
  54.                 UserCustom userCustom = new UserCustom();
  55.                 BeanUtils.copyProperties(user, userCustom);
  56.                 articleSearchVo.setUserCustom(userCustom);
  59.                 articleSearchVoList.add(articleSearchVo);
  60.             }
  61.         } else {
  62.             //不执行的话，也要创建一个元素，存储分页信息和查询关键字
  63.             ArticleSearchVo articleSearchVo = new ArticleSearchVo();
  64.             articleSearchVoList.add(articleSearchVo);
  65.         }
  66.         //5、page信息存储在第一个元素中
  67.         articleSearchVoList.get(0).setPage(page);
  69.         //6、将查询的关键词存储到第一个元素
  70.         articleSearchVoList.get(0).setQuery(query);
  73.         return articleSearchVoList;
  75.     }

这里的 service 调用了 DAO 层的两个方法，分别是获取查询结果的条数和查询结果分页显示。


六、Controller 层


ArticleController.java
  1. //搜索实现
  2.   @RequestMapping("/admin/article/search")
  3.   @ResponseBody
  4.   public ModelAndView SearchPageView(HttpServletRequest request,Model model) throws Exception {
  5.       ModelAndView modelAndView = new ModelAndView();
  6.       //设置每页显示的数量
  7.       int pageSize = 5;
  8.       String query = request.getParameter("query");
  9.       List<ArticleSearchVo> articleSearchVoList = articleService.listSearchResultByPage(request,model,null,pageSize,query);
  10.       modelAndView.addObject("articleSearchVoList", articleSearchVoList);
  11.       modelAndView.setViewName("Admin/Article/search");
  12.       return modelAndView;
  13.   }
  15.   //搜索分页实现
  16.   @RequestMapping("/admin/article/p/{pageNow}/search")
  17.   @ResponseBody
  18.   public  ModelAndView SearchPageByPageView(HttpServletRequest request, Model model,@PathVariable("pageNow") Integer pageNow) throws Exception {
  19.       ModelAndView modelAndView = new ModelAndView();
  20.       //设置每页显示的数量
  21.       int pageSize = 5;
  22.       String query = request.getParameter("query");
  23.       List<ArticleSearchVo> articleSearchVoList = articleService.listSearchResultByPage(request,model,pageNow,pageSize,query);
  24.       modelAndView.addObject("articleSearchVoList", articleSearchVoList);
  25.       modelAndView.setViewName("/Admin/Article/search");
  26.       return modelAndView;
  27.   }



第一个方法是用户输入查询信息，点击查询按钮的时候，会提交表单到 /admin/article/search 这里。

因为我们设置的查询结果是按分页显示的，如果超过 10 条，会分页。点击分页按钮，会执行第二个方法。


七、视图层


index.jsp
  1. <form class="layui-form" action="${pageContext.request.contextPath}/admin/article/search">
  2.         <div class="layui-form-item">
  3.             <div class="layui-input-block">
  4.                 <input type="text" name="query" required  lay-verify="required" placeholder="请输入关键词" autocomplete="off" class="layui-input" >
  5.                 <button class="layui-btn" lay-submit lay-filter="formDemo" type="submit">搜索</button>
  6.             </div>
  7.         </div>
  8.     </form>

这个是后台文章列表 首页，有一个这样的搜索框





search.jsp
  1. <blockquote class="layui-elem-quote">搜索 ${articleSearchVoList[0].query} 找到 ${articleSearchVoList[0].page.totalCount} 条数据</blockquote>
  3.   <form class="layui-form" action="${pageContext.request.contextPath}/admin/article/search">
  4.       <div class="layui-form-item">
  5.           <div class="layui-input-block">
  6.               <input type="text" name="query" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" value="${articleSearchVoList[0].query}" >
  7.               <button class="layui-btn" lay-submit lay-filter="formDemo" type="submit">搜索</button>
  8.               <button class="layui-btn" lay-submit lay-filter="formDemo" style="float: right;">批量删除</button>
  9.           </div>
  10.       </div>
  11.   </form>
  12.   <c:choose>
  13.       <%--查询结果不为0--%>
  14.       <c:when test="${articleSearchVoList[0].page.totalCount!=0}">
  15.           <table class="layui-table">
  16.               <colgroup>
  17.                   <col width="25">
  18.                   <col width="25">
  19.                   <col width="300">
  20.                   <col width="200">
  21.                   <col width="200">
  22.                   <col width="200">
  23.                   <col width="100">
  24.                   <col width="200">
  25.               </colgroup>
  26.               <thead>
  27.               <tr>
  28.                   <th><input type="checkbox" id="allSelect"  onclick="javascript:DoCheck()"></th>
  29.                   <th>id</th>
  30.                   <th>标题</th>
  31.                   <th>所属分类</th>
  32.                   <th>所带标签</th>
  33.                   <th>发布时间</th>
  34.                   <th>作者</th>
  35.                   <th>操作</th>
  36.               </tr>
  37.               </thead>
  38.               <tbody>
  39.               <c:forEach items="${articleSearchVoList}" var="a">
  40.                   <tr>
  41.                       <td><input type="checkbox" name="select_id"></td>
  42.                       <td>${a.articleCustom.articleId}</td>
  43.                       <td><a href="${pageContext.request.contextPath}/article/${a.articleCustom.articleId}" target="_blank">
  44.                               ${fn:substring(a.articleCustom.articleTitle, 0,20 )}
  46.                       </a></td>
  47.                       <td>
  48.                           <c:forEach items="${a.categoryCustomList}" var="c">
  49.                               <a href="${pageContext.request.contextPath}/category/${c.categoryId}" target="_blank">${c.categoryName}</a>
  50.                               &nbsp;
  51.                           </c:forEach>
  52.                       </td>
  54.                       <td>
  55.                           <c:forEach items="${a.tagCustomList}" var="t">
  56.                               <a href="${pageContext.request.contextPath}/tag/${t.tagId}" target="_blank">${t.tagName}</a>
  57.                               &nbsp;
  58.                           </c:forEach>
  59.                       </td>
  61.                       <td>
  62.                           <fmt:formatDate value="${a.articleCustom.articlePostTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
  63.                       </td>
  64.                       <td>
  65.                           <a href="${pageContext.request.contextPath}/admin/user/${a.userCustom.userId}">
  66.                                   ${a.userCustom.userNickname}
  67.                           </a>
  68.                       </td>
  69.                       <td>
  70.                           <a href="editArticle">编辑</a>丨
  71.                           <a href="">删除</a>
  72.                       </td>
  73.                   </tr>
  74.               </c:forEach>
  75.               </tbody>
  76.           </table>
  77.           <%--分页 start--%>
  78.           <nav class="navigation pagination" role="navigation">
  79.               <div class="nav-links">
  80.                   <c:choose>
  81.                       <c:when test="${articleSearchVoList[0].page.totalPageCount <= 3 }">
  82.                           <c:set var="begin" value="1"/>
  83.                           <c:set var="end" value="${articleSearchVoList[0].page.totalPageCount }"/>
  84.                       </c:when>
  85.                       <c:otherwise>
  86.                           <c:set var="begin" value="${articleSearchVoList[0].page.pageNow-1 }"/>
  87.                           <c:set var="end" value="${articleSearchVoList[0].page.pageNow + 2}"/>
  88.                           <c:if test="${begin < 2 }">
  89.                               <c:set var="begin" value="1"/>
  90.                               <c:set var="end" value="3"/>
  91.                           </c:if>
  92.                           <c:if test="${end > articleSearchVoList[0].page.totalPageCount }">
  93.                               <c:set var="begin" value="${articleSearchVoList[0].page.totalPageCount-2 }"/>
  94.                               <c:set var="end" value="${articleSearchVoList[0].page.totalPageCount }"/>
  95.                           </c:if>
  96.                       </c:otherwise>
  97.                   </c:choose>
  98.                       <%--上一页 --%>
  99.                   <c:choose>
  100.                       <c:when test="${articleSearchVoList[0].page.pageNow eq 1 }">
  101.                           <%--当前页为第一页，隐藏上一页按钮--%>
  102.                       </c:when>
  103.                       <c:otherwise>
  104.                           <a class="page-numbers" href="${pageContext.request.contextPath}/admin/article/p/${articleSearchVoList[0].page.pageNow-1}/search?query=${articleSearchVoList[0].query}" >
  105.                               <i class="layui-icon">&#xe603;</i>
  106.                           </a>
  107.                       </c:otherwise>
  108.                   </c:choose>
  109.                       <%--显示第一页的页码--%>
  110.                   <c:if test="${begin >= 2 }">
  111.                       <a class="page-numbers" href="${pageContext.request.contextPath}/admin/article/p/1/search?query=${articleSearchVoList[0].query}">1</a>
  112.                   </c:if>
  113.                       <%--显示点点点--%>
  114.                   <c:if test="${begin  > 2 }">
  115.                       <span class="page-numbers dots">…</span>
  116.                   </c:if>
  117.                       <%--打印 页码--%>
  118.                   <c:forEach begin="${begin }" end="${end }" var="i">
  119.                       <c:choose>
  120.                           <c:when test="${i eq articleSearchVoList[0].page.pageNow }">
  121.                               <a class="page-numbers current" >${i}</a>
  122.                           </c:when>
  123.                           <c:otherwise>
  124.                               <a  class="page-numbers" href="${pageContext.request.contextPath}/admin/article/p/${i}/search?query=${articleSearchVoList[0].query}">${i }</a>
  125.                           </c:otherwise>
  126.                       </c:choose>
  127.                   </c:forEach>
  128.                       <%-- 显示点点点 --%>
  129.                   <c:if test="${end < articleSearchVoList[0].page.totalPageCount-1 }">
  130.                       <span class="page-numbers dots">…</span>
  131.                   </c:if>
  132.                       <%-- 显示最后一页的数字 --%>
  133.                   <c:if test="${end < articleSearchVoList[0].page.totalPageCount }">
  134.                       <a href="${pageContext.request.contextPath}/admin/article/p/${articleSearchVoList[0].page.totalPageCount}/search?query=${articleSearchVoList[0].query}">
  135.                               ${articleSearchVoList[0].page.totalPageCount}
  136.                       </a>
  137.                   </c:if>
  138.                       <%--下一页 --%>
  139.                   <c:choose>
  140.                       <c:when test="${articleSearchVoList[0].page.pageNow eq articleSearchVoList[0].page.totalPageCount }">
  141.                           <%--到了尾页隐藏，下一页按钮--%>
  142.                       </c:when>
  143.                       <c:otherwise>
  144.                           <a class="page-numbers" href="${pageContext.request.contextPath}/admin/article/p/${articleSearchVoList[0].page.pageNow+1}/search?query=${articleSearchVoList[0].query}">
  145.                               <i class="layui-icon">&#xe602;</i>
  146.                           </a>
  147.                       </c:otherwise>
  148.                   </c:choose>
  150.               </div>
  151.           </nav>
  152.           <%--分页 end--%>
  153.       </c:when>
  154.       <%--查询结果为0--%>
  155.       <c:otherwise>
  156.          <center><br>很遗憾，没有查询到带有 <font style="color: red;"> ${articleSearchVoList[0].query} </font> 的内容，换一个关键词再试试吧。</center>
  157.       </c:otherwise>
  158.   </c:choose>





注意：博主后台使用的是 layui 的框架，如果你没有使用，请忽略一些样式代码。分页部分代码也稍微复杂，比较累赘。


八、效果预览


为了方便截图，这里设置一页显示五条数据



本文地址：https://liuyanzhao.com/6241.html
历史上的今天
九月
16日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言昭博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：2   待审核评论数：0
  1. avatar 向天空大声的呼喊
    回复 2018年08月30日 16:30:28

    好东西

    • avatar 言曌
      回复 2018年08月30日 17:33:28

      帮忙点击一下广告啊

  2. avatar 威客系统
    回复 2017年09月19日 15:55:00

    干货干货哈哈哈收入囊中