1. 程式人生 > 其它 >SSM動態展示分頁

SSM動態展示分頁

這個作業屬於哪個課程 2021春軟體工程實踐|S班(福州大學)
這個作業要求在哪裡 作業具體要求
這個作業的目標 個人技術
參考文獻 ...
目錄

技術概述

SSM的分頁技術主要在我負責的產品的中在資訊展示時會使用到,分別在討論和簽到的多頁展示中,由於資料庫的內容可能會比較多,為了減少查詢的壓力和前端的美化,在摒棄無線下拉的情況下,所以需要使用該技術,難點主要存在於和前後端對接的具體資料介面可能會出現無法對接問題

技術詳述

  • 1.首先在pom中配置需要的pageHelper的依賴
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.2.0</version>
    </dependency>
  • 2.在Controller列表展示頁面加入一個有當前頁面引數的Integer currentPage
    @RequestMapping("/detail")
    @ResponseBody
    public Topic getCommentList(Integer id,@RequestParam(value = "currentPage",required=false,defaultValue="1")Integer currentPage){
        Topic topic=topicService.findTopicComment(id,currentPage);
        return topic;
    }
  • 3.在實現了Service介面的ServiceImpl函式中呼叫pageHelper,並傳入具體引數
public class TopicController {
    @Autowired
    private TopicService topicService;
    @RequestMapping("/category")
    /**
     *
     * 搜尋
     */
    @ResponseBody
    public List<Topic> getCategory(String content,String type,Model model,@RequestParam(value = "currentPage",required=false,defaultValue="1")Integer currentPage){
        List<Topic> topics=null;
        if(type.equals("title")) {
            topics=topicService.findTopicByTitle(content,currentPage);
        }
        else{
            topics=topicService.findTopicByAccount(content,currentPage);
        }
        model.addAttribute(topics);
        return topics;
    }
    @RequestMapping("/all")
    @ResponseBody
    public List<Topic> getAll(@RequestParam(value = "currentPage",required=false,defaultValue="1")Integer currentPage){
        List<Topic> topics=topicService.findAllTopic(currentPage);
        return topics;
    }
    @RequestMapping("/detail")
    @ResponseBody
    public Topic getCommentList(Integer id,@RequestParam(value = "currentPage",required=false,defaultValue="1")Integer currentPage){
        Topic topic=topicService.findTopicComment(id,currentPage);
        return topic;
    }
    @RequestMapping("/newTopic")
    @ResponseBody
    public int insertTopic(Topic topic){
        int rows=topicService.insertTopic(topic);
        return rows;
    }
    @RequestMapping("/deleteTopic")
    @ResponseBody
    public int deleteTopic(Integer id){
        int rows=topicService.deleteTopic(id);
        return rows;
    }
}
  • 4.當然,在具體的Mapper中還要編寫相應的和資料庫的查詢操作,這和未加分頁的方法是一樣的,這裡就舉幾個例子
<mapper namespace="team.ljm.secw.mapper.TopicMapper">

    <select id="findTopicById" parameterType="Integer" resultType="Topic">
        select * from t_topic where id = #{id}
    </select>
    <select id="findTopicByTitle" parameterType="String" resultType="Topic">
        select * from t_topic where title=#{title}
    </select>
    <select id="findTopicByAccount" parameterType="String" resultType="Topic">
        select * from t_topic where account=#{account}
    </select>
  • 5.流程圖

問題和解決過程

  • 分頁的問題其實是在具體底層mybatis的查詢功能都做完之後才開始編寫考慮的,主要的原因是在摒棄無限下拉的展示功能後,考慮到內容展示需要在每個頁面有一定的限制,bing所以選擇了比較好用的pageHelper來快速實現分頁功能,在後端測試時,使用了一點點的jsp程式碼來進行測試
<div class="page text-left clearfix" style="margin-top: 40px">
    <a <c:if test="${pageInfo.pageNum != 1}">href="${pageContext.request.contextPath}/product/list?currentPage=${pageInfo.pageNum - 1 }"</c:if>
            <c:if test="${pageInfo.pageNum == 1}"> href="javascript:void(0)" class="disabled"</c:if>
    >上一頁</a>
    <c:forEach begin="1" end="${pageInfo.pages }" varStatus="status">
        <a href="${pageContext.request.contextPath}/product/list?currentPage=${status.count }"
           <c:if test="${status.count == pageInfo.pageNum}">class="select"</c:if>>${status.count }</a>
    </c:forEach>

    <a <c:if test="${pageInfo.pageNum == 20}">class="disabled" href="javascript:void(0)"</c:if>
       <c:if test="${pageInfo.pageNum != 20}">href="${pageContext.request.contextPath}/product/list?currentPage=${pageInfo.pageNum + 1 }"</c:if>
    >下一頁</a>
</div>

最終結果也是比較喜人的,算是順利解決

總結

pageHelper屬於對於前端介面的一個補充和對資料庫查詢的壓力降低,網上對這方面的使用教程應該也挺多的,但和自己實際操作起來還是很不一樣,總體來說前後的pageHelper的使用算是比較順利,測試也很快,我相信SSM還有很多很好用的外掛等著自己去探索

參考文獻

PageHelper的概述和基本使用--冰塊兒+奶茶