springBoot超級簡便的分頁

···無痕···發表於2020-10-24
Spring Boot

前言
以前覺得分頁很難，在書上也看到關於分頁的，但是很麻煩，要寫幾個類什麼的，技術也有限，於是選擇性的忽略掉，但是困難總是要面對的，解決了問題，記錄一下。最近發現寫部落格很好玩，得到認可也很開心，希望和你們一起學習進步！
技術上因為不用寫的太複雜，所以沒有用MVC思想。後端用的springBoot+mybits+mysql，前端用的thymeleaf框架的html。

配置環境 >>>>

匯入依賴：pom.xml

<dependencies>
	 <!-- mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--thymeleaf-->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
            <version>3.0.11.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>
<!--        thymeleaf依賴包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
<!--        -->
<!--        連線資料庫-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
</dependencies>

資料庫配置，埠配置：application.yml

spring:
  datasource:
    password: 123456
    url: jdbc:mysql://localhost:3306/clear?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    type: com.alibaba.druid.pool.DruidDataSource


server:
  port: 8080

idea連線資料庫

在這裡插入圖片描述

將url，賬戶密碼都填正確之後，點選Test Connection ,如果連線成功那麼就會顯示Successful字樣。

有時候連線失敗的原因是需要url加上時區：

serverTimezone=UTC

資源配置：application.properties

#關閉預設圖示
spring.mvc.favicon.enabled=false
#清除模板引擎快取
spring.thymeleaf.cache=false
//
server.servlet.content-type=/wx1

spring.mvc.date-format=yyyy-MM-dd

spring.mvc.static-path-pattern=/static/**


#預設路徑
spring.thymeleaf.prefix=classpath:/templates/
# 字尾
spring.thymeleaf.suffix=.html
# 模板格式
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.servlet.content-type=text/html

spring.resources.static-locations=classpath:/static/,classpath:/templates/,classpath:/public,classpath:/resources,

#整合mybatis :
mybatis.type-aliases-package=com.example.wx1.pojo
mybatis.mapper-locations=classpath:mapper/*.xml

環境都設定完畢接下來，開始切入主題：
前端介面
在這裡插入圖片描述
在這裡插入圖片描述

前端程式碼

   <header> 
     <h1 class="h3 display">機構列表</h1>
   </header>
   <div class="row">
     <div class="col-lg-12">
       <div class="card">
         <div class="card-header">
           <form id="search" method="post" th:action="@{findOrgen1}">
             <input type="text" name="searchkey" placeholder="機構id或機構名" style="width: 300px">
             <a href="#" onclick="document.getElementById('search').submit();return false;" style="height: 30px;width: 75px;margin-left: 30px;background-color: #2d9f50;color: white;display: inline-block;text-align: center;margin-top: -30px;line-height: 30px;text-decoration:none;">搜尋</a>
           </form>
         </div>
         <div class="card-body">
           <div class="table-responsive">
             <table class="table table-striped table-hover">
               <tbody>
               <thead>
               <tr>
                 <th>ID</th>
                 <th>機構id</th>
                 <th>機構名</th>
                 <th>電話</th>
                 <th>機構地址</th>
                 <th>操作</th>
               </tr>
               </thead>
                 <tr th:each="orgenList:${orgenList}">
                   <td th:text="${orgenList.id}">1</td>
                   <td th:text="${orgenList.orgenid}">123</td>
                   <td th:text="${orgenList.orgenname}">張三</td>
                   <td th:text="${orgenList.phone}">123456</td>
                   <td th:text="${orgenList.address}">貴州省凱裡市</td>
                   <td>
                     <a href="#">修改</a>|
                     <a href="#">刪除</a>
                   </td>
                 </tr>
               </tbody>
             </table>
               <a th:href="@{orgenList1(pageNo=1)}">首頁</a>&nbsp;&nbsp;
               <a th:href="@{orgenList1(pageNo=${pageNo1-1})}">上一頁</a>&nbsp;&nbsp;
               <span style="color: #17a2b8">當前頁數:&nbsp;<span th:text="${pageNo1}"></span></span>&nbsp;&nbsp;
               <a th:href="@{orgenList1(pageNo=${pageNo1+1})}">下一頁</a>&nbsp;&nbsp;
               <a th:href="@{orgenList1(pageNo=${pangCount})}">尾頁</a>&nbsp;&nbsp;
               <span style="color: #17a2b8">總頁數：<span th:text="${pangCount}"></span></span>&nbsp;&nbsp;
               <form th:action="@{orgenList1}" method="get" id="pageTo" style="display: inline">
                   <input type="text" style="width: 60px;height: 25px" name="pageNo">&nbsp;&nbsp;
                   <a href="#" onclick="document.getElementById('pageTo').submit();return false;">跳轉</a>
               </form>
           </div>
         </div>
       </div>
     </div>
   </div>

記得在html標籤裡寫框架依賴：

xmlns:th="http://www.thymeleaf.org"

分頁程式碼在Controller裡面，先上程式碼再談思路：

 @RequestMapping("orgenList1")
    public String orgenList1(String pageNo,Model model){
        System.out.println(pageNo);
        int count=adminMapper.calOrgenCount();
        int pageSize=10;//一頁中條數為10條
        if (pageNo.equals(null)){
            pageNo="1";
        }
        int pageNo1=Integer.parseInt(pageNo);//將String轉化為int
        int pangCount=count%pageSize==0?count/10:count/pageSize+1;//頁面總數
        if (pageNo1>pangCount ||pageNo1<1){//當頁數大於資料庫頁數時，頁數變為1
            pageNo1=1;
        }
        pageNo1=(pageNo1-1)*10;//當前頁數
        List<Orgen> orgenList=adminMapper.findOrgenList(pageNo1);

        model.addAttribute("pangCount",pangCount);//返回頁面總數
        model.addAttribute("pageNo1",pageNo1/10+1);//返回當前頁數
        model.addAttribute("orgenList",orgenList);
        return "orgenList";
    }

這裡只是弄一個的所以沒有用類封裝起來，如果你的專案需要大量的分頁，那麼建議封裝成類，這樣更節約時間。

思路：

1、你想讓每一頁展示多少個資料：

 int pageSize=10;//一頁中條數為10條

2、通過資料庫查詢，查出表中的資料量：

 int count=adminMapper.calOrgenCount();

3、通過總數，與每一頁展示的資料量算出總頁數

 int pangCount=count%pageSize==0?count/10:count/pageSize+1;//頁面總數

4、因為方法中我們要從前端獲取pageNo，那麼前端連線最起碼要傳一個頁數，否則會報錯，當然你可以設定兩個方法，一個是剛點選頁面用到的方法，另一個是點選上一頁，下一頁，首頁，尾頁以及跳轉頁面的方法。我這裡只弄了一個方法，所以剛點選的連結為：

<li><a th:href="@{orgenList1(pageNo=1)}">機構列表</a></li>

5、為了點選的頁數大於總頁數以及小於1頁，所以將大於和小於的頁數都為第一頁。例如當總頁數為3頁當我跳轉第四頁時，跳轉的是第一頁。

 if (pageNo1>pangCount ||pageNo1<1){//當頁數大於資料庫頁數時，頁數變為1
        pageNo1=1;
    }

mybatis程式碼

mapper介面：

計算總數的方法：

 int calOrgenCount();//計算機構數量

跳轉第幾頁的方法：

  List<Orgen> findOrgenList(int pageNo);//查詢機構列表

兩個方法的實現：mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.wx1.mapper.AdminMapper">
	<select id="calOrgenCount" resultType="int">
        select count(*) from orgen
    </select>
    <select id="findOrgenList" resultType="Orgen" parameterType="int">
        select * from orgen where id order by id limit #{pageNo},10;
    </select>
</mapper>

資料庫分頁查詢語句：

 select * from 表 where 欄位 order by 欄位 limit m,n;

m代表資料庫開始從第幾條資料開始查，n代表查詢多少條資料

實體類

package com.example.wx1.pojo;

import lombok.Data;
import lombok.NoArgsConstructor;

@Data
//@AllArgsConstructor  //有參
@NoArgsConstructor   //無參
public class Orgen {
    private int id;
    private String orgenid;
    private String orgenname;
    private String phone;
    private String address;
    private String pwd;
    private String creatdate;

    public Orgen(String orgenid1, String phone, String pwd, String address, String creatdate) {
        this.orgenid=orgenid1;
        this.phone=phone;
        this.pwd=pwd;
        this.address=address;
        this.creatdate=creatdate;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getOrgenid() {
        return orgenid;
    }

    public void setOrgenid(String orgenid) {
        this.orgenid = orgenid;
    }

    public String getOrgenname() {
        return orgenname;
    }

    public void setOrgenname(String orgenname) {
        this.orgenname = orgenname;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

    public String getCreatdate() {
        return creatdate;
    }

    public void setCreatdate(String creatdate) {
        this.creatdate = creatdate;
    }
}

注意事項：
1、在資源配置環節的時候一定要配置對，如果不對會報錯，報錯資訊為找不到資源。

2、在mapper.xml中的：

namespace="com.example.wx1.mapper.AdminMapper"

mapper介面的名字一定要寫對，不對的話，controller就會找不到方法。

3、mapper.xml中的方法名一定要和mapper介面的方法一致，否則也會導致執行的時候controller找不到方法。最好 方法名，類名都是複製過去，手敲的話，一個不留神，報錯會讓人抓狂。

結語
和你們一起學習進步，有什麼問題，以及興趣，評論一下吧~ ~ ~

相關文章