mybatis-plus +vue+element-ui 实现分页功能

前端：
使用elementui分页组件

<el-pagination
  @size-change="handleSizeChange2"
  @current-change="handleCurrentChange2"
  :current-page.sync="historyFrom.pageNum"
  :page-sizes="[1 ,10, 25, 50, 100]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total2">
</el-pagination>

-----------属性参数--------

historyFrom: {
  pageNum: 1,
  pageSize: 10
},
pageSize: 10, // 默认分页条数

----发送请求-----

// 条件查询历史数据
conditionQuery () {
  let dateArr = []
  dateArr = this.dateValue
  let beginTime = dateArr[0]
  let edTime = dateArr[1]
  this.$http({
    url: this.$http.adornUrl('/jkRefundApply/conditionQueryList'),
    method: 'post',
    data: this.$http.adornData({
      beginTime: beginTime,
      endTime: edTime,
      status: this.stateValue,
      pageNum: this.historyFrom.pageNum,  //当前页
      pageSize: this.historyFrom.pageSize  //每页个数
    })
  }).then(({data}) => {
    if (data.code === 200) {
      console.log(data)
      this.total2 = data.body.total   // 总条数
      this.historyData = data.body.records   //返回的数据
      }
    } else {
      this.$message({
        message: data.msg,
        type: 'warning'
      })
    }
  })
},

后端：
1.配置拦截器组件

package edu.uc.auto;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class pageConfig {
    //分页插件
    //配置拦截器组件
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }

}

2.直接使用page对象即可
也就是在进行查询时把page对象放进去

 //分页查询 直接使用Page对象即可！
@ApiOperation("分页条件查询历史记录")
@PostMapping("/conditionQueryList")
public BaseR<?> conditionQueryList(@RequestBody JkRefunconDitiondto jkRefunconDitiondto) {
    String beginTime = jkRefunconDitiondto.getBeginTime();
    String endTime = jkRefunconDitiondto.getEndTime();
    Integer status = jkRefunconDitiondto.getStatus();
    Page<JkRefundApply> page = new Page<>();
    page.setSize(jkRefunconDitiondto.getPageSize());
    page.setCurrent(jkRefunconDitiondto.getPageNum());
    Page<JkRefunconDitionVo> recordList =    jkRefundApplyService.getconditionQueryList(beginTime, endTime, status, page);
    return BaseR.ok(recordList);
}

serviceImpl层

@Service
@Slf4j
public class JkRefundApplyServiceImpl extends ServiceImpl<JkRefundApplyDao, JkRefundApply> implements JkRefundApplyService {
    @Autowired
    private JkRefundOrderDao jkRefundOrderDao;
    @Override
    public Page<JkRefunconDitionVo> getconditionQueryList(String beginTime, String endTime, Integer status, Page page) {
        return jkRefundOrderDao.getconditionQueryList(beginTime, endTime, status, page);
    }

dao层

@Mapper
public interface JkRefundOrderDao extends BaseMapper<JkRefunconDitionVo> {
    /**
     * 按条件获取历史记录
     * @param beginTime
     * @param endTime
     * @param status
     * @param page
     * @return
     */
    Page<JkRefunconDitionVo> getconditionQueryList(String beginTime, String endTime, Integer status, Page page);

xml：
还是和正常写sql语句一样 不用关分页语句 代码会自动映射

<select id="getconditionQueryList" resultType="qnm.lr.modules.operate.refundapply.vo.JkRefunconDitionVo" parameterType="qnm.lr.modules.operate.refundapply.vo.JkRefunconDitionVo">
    select DISTINCT a.user_id_, a.create_time_ , a.id_card_ ,a.score_url_ ,a.phone_ ,a.user_name_ ,a.status_ ,o.trade_no_ ,a.remarks,o.id_ orderId
    FROM jk_refund_apply a
    LEFT JOIN jk_order o
    ON a.user_id_=o.user_id_
    <where>
        <if test="status!=null">
            a.status_ =#{status}
        </if>
        <if test="status==null">
            a.status_ !=1
        </if>
        <if test="beginTime!=null and endTime!=null" >
            AND a.create_time_ BETWEEN #{beginTime} and #{endTime}
        </if>
        <if test="beginTime==null and endTime==null" >
            AND a.create_time_ >'2022-04-13 13:00:00'
        </if>
    </where>
    ORDER BY a.create_time_ desc
</select>

返回给前端时 page对象会进行格式封装
data.body里包含了分页信息和数据
total: 总条数
pages:页数
records：数据