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不一样的那个问题，浪费了我一下午时间(??へ??╬)