SpringBoot集成Pagehelper分頁插件，Vue分頁el-pagination

SpringBoot集成Pagehelper分頁插件，Vue分頁el-pagination

先說一個我分頁遇到的bug;
之前第一次使用pageHelper來完成分頁的時候使用的是ssm框架，
然后這次老師說了springboot也是可以使用pagehelper來完成分頁的，
然后我就照搬過來用，后面就一直分頁不了，原因就是: ssm分頁不用寫組態檔(或者匯入另外兩個jar包)，但是springboot需要寫個組態檔(或者匯入另外兩個jar包)，

• SpringBoot集成Pagehelper

SpringBoot集成Pagehelper

1，匯入別人寫的分頁插件

 <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>

2，springboot的分頁，必須寫組態檔或者匯入倆個包
①，

<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
            <version>1.2.5</version>
        </dependency>

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

②組態檔(我沒用這個方法因為導jar包看上去更簡單^_，copy別人的)

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
 
<configuration>
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!--指明資料庫 4.0.0以后不需要設定此屬性-->
            <!--<property name="dialect" value="oracle"/>-->
            <!-- 該引數默認為false -->
            <!-- 設定為true時，會將RowBounds第一個引數offset當成pageNum頁碼使用 -->
            <!-- 和startPage中的pageNum效果一樣-->
            <property name="offsetAsPageNum" value="true"/>
            <!-- 該引數默認為false -->
            <!-- 設定為true時，使用RowBounds分頁會進行count查詢 -->
            <property name="rowBoundsWithCount" value="true"/>
            <!-- 設定為true時，如果pageSize=0或者RowBounds.limit = 0就會查詢出全部的結果 -->
            <!-- （相當于沒有執行分頁查詢，但是回傳結果仍然是Page型別）-->
            <property name="pageSizeZero" value="true"/>
            <!-- 3.3.0版本可用 - 分頁引數合理化，默認false禁用 -->
            <!-- 啟用合理化時，如果pageNum<1會查詢第一頁，如果pageNum>pages會查詢最后一頁 -->
            <!-- 禁用合理化時，如果pageNum<1或pageNum>pages會回傳空資料 -->
            <property name="reasonable" value="true"/>
            <!-- 3.5.0版本可用 - 為了支持startPage(Object params)方法 -->
            <!-- 增加了一個`params`引數來配置引數映射，用于從Map或ServletRequest中取值 -->
            <!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射的用默認值 -->
            <!-- 不理解該含義的前提下，不要隨便復制該配置 -->
            <property name="params" value="pageNum=start;pageSize=limit;"/>
            <!-- 支持通過Mapper介面引數來傳遞分頁引數 -->
            <property name="supportMethodsArguments" value="true"/>
            <!-- always總是回傳PageInfo型別,check檢查回傳型別是否為PageInfo,none回傳Page -->
            <property name="returnPageInfo" value="check"/>
        </plugin>
    </plugins>
</configuration>

3，mapper層寫個查詢全部或者模糊查詢的方法，這么簡單我就不寫了，

4，service層(有些人喜歡把分頁的幾個重要步驟放到controller層，最好還是把業務邏輯代碼放在service好一些)

  //執行分頁查詢
    @Override
    public PageInfo<GoodsDTO> getAllGoods(Integer pageNum, Integer pageSize,GoodsDTO goodsDTO) {
        //最重要的一步
        //pageNum代表導航頁，我在controller設定了默認第一頁
        //pageSize代表每頁展示多少行，你可以在這里寫死
        Page<Object> p = PageHelper.startPage(pageNum, pageSize);//最重要的一步
        List<GoodsDTO> allGoods = goodsMapper.getAllGoods(goodsDTO);//呼叫查詢方法一定要放在startPage后面，不然分頁不了
        PageInfo<GoodsDTO> pageInfo = new PageInfo<GoodsDTO>(allGoods,pageSize);//在將集合封裝進pageInfo里面
        return pageInfo;
    }

注意看我上面代碼的注釋，不然你會報錯，

5，然后就是我們的controller層啦

    @RequestMapping("/list")
    public Object getGoods(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum, @RequestParam(value = "pageSize", defaultValue = "3") int pageSize,@RequestBody GoodsDTO goodsDTO){

        PageInfo<GoodsDTO> page = goodsService.getAllGoods(pageNum, pageSize, goodsDTO);
        DataProtocol data = new DataProtocol();
        data.put("page",page);
        return data;
    }

----------------------------------------分割線---------------------------------------------

• Vue分頁el-pagination

1，el-pagination

 <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>

        total: 總資料量
        pageNum: 當前頁碼(導航頁碼)
        pageSize: 當前頁的資料量
        handleSizeChange 和 handleCurrentChange是倆個點擊導航頁碼的方法

el-pagination里面的方法:

//當每頁顯示的記錄數發生變化時，設定當前頁碼為1，執行查詢，
handleSizeChange: function(rows) {
				this.pageSize = pageSize;
				this.pageNum = 1;
				this.search();
			},

//當前頁碼發生變化時，執行查詢
handleCurrentChange: function(pageNum) {
				this.pageNum = pageNum;
				this.search();
			},

2，在data中定義

tableData: [],
total: 1,
pageSize:5, //每頁的資料
pageNum:1, //初始頁

3，methods里的方法
因為我這里是模糊查詢所以還要傳searchForm表單回去

search: function() {
				let url = this.axios.urls.GOODS_LIST
				this.axios.post(url,{
					goodsDTO:this.searchForm,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((resp) => {
					console.log(resp.data.page);
					console.log(resp.data.list);
					this.tableData = resp.data.page.list;
					this.total = resp.data.page.total;
				}).catch((error) => {
					console.log(error);
				})
			},

寫這篇博客主要是為了紀念我下午逝去的青春，就是因為那個ssm和springboot不一樣的那個問題，浪費了我一下午時間(??へ??╬)