分页插件配置

前文 MyBatis Plus 配置一文中提到了，在自动装配的时候引入了分页插件，官方提供的默认有如下参数：

@Bean  
public MybatisPlusInterceptor mybatisPlusInterceptor() {  
    MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();  
    // 分页插件  
    interceptor.addInnerInterceptor(paginationInnerInterceptor());  
    return interceptor;  
}

/**
 * 分页插件，自动识别数据库类型
 */
public PaginationInnerInterceptor paginationInnerInterceptor() {
    PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor();
    // 设置最大单页限制数量，默认 500 条，-1 不受限制
    paginationInnerInterceptor.setMaxLimit(-1L);
    // 分页合理化
    paginationInnerInterceptor.setOverflow(true);
    return paginationInnerInterceptor;
}

分页功能

创建一个分页实体类 PageQuery

public class PageQuery implements Serializable {

    @Serial
    private static final long serialVersionUID = 1L;

    /**
     * 分页大小
     */
    private Integer pageSize;

    /**
     * 当前页数
     */
    private Integer pageNum;

    /**
     * 排序列
     */
    private String orderByColumn;

    /**
     * 排序的方向desc或者asc
     */
    private String isAsc;

    /**
     * 当前记录起始索引 默认值
     */
    public static final int DEFAULT_PAGE_NUM = 1;

    /**
     * 每页显示记录数 默认值 默认查全部
     */
    public static final int DEFAULT_PAGE_SIZE = Integer.MAX_VALUE;

    public <T> Page<T> build() {
        Integer pageNum = ObjectUtil.defaultIfNull(getPageNum(), DEFAULT_PAGE_NUM);
        Integer pageSize = ObjectUtil.defaultIfNull(getPageSize(), DEFAULT_PAGE_SIZE);
        if (pageNum <= 0) {
            pageNum = DEFAULT_PAGE_NUM;
        }
        Page<T> page = new Page<>(pageNum, pageSize);
        List<OrderItem> orderItems = buildOrderItem();
        if (CollUtil.isNotEmpty(orderItems)) {
            page.addOrder(orderItems);
        }
        return page;
    }

    /**
     * 构建排序
     *
     * 支持的用法如下:
     * {isAsc:"asc",orderByColumn:"id"} order by id asc
     * {isAsc:"asc",orderByColumn:"id,createTime"} order by id asc,create_time asc
     * {isAsc:"desc",orderByColumn:"id,createTime"} order by id desc,create_time desc
     * {isAsc:"asc,desc",orderByColumn:"id,createTime"} order by id asc,create_time desc
     */
    private List<OrderItem> buildOrderItem() {
        if (StringUtils.isBlank(orderByColumn) || StringUtils.isBlank(isAsc)) {
            return null;
        }
        String orderBy = SqlUtil.escapeOrderBySql(orderByColumn);
        orderBy = StringUtils.toUnderScoreCase(orderBy);

        // 兼容前端排序类型
        isAsc = StringUtils.replaceEach(isAsc, new String[]{"ascending", "descending"}, new String[]{"asc", "desc"});

        String[] orderByArr = orderBy.split(StringUtils.SEPARATOR);
        String[] isAscArr = isAsc.split(StringUtils.SEPARATOR);
        if (isAscArr.length != 1 && isAscArr.length != orderByArr.length) {
            throw new ServiceException("排序参数有误");
        }

        List<OrderItem> list = new ArrayList<>();
        // 每个字段各自排序
        for (int i = 0; i < orderByArr.length; i++) {
            String orderByStr = orderByArr[i];
            String isAscStr = isAscArr.length == 1 ? isAscArr[0] : isAscArr[i];
            if ("asc".equals(isAscStr)) {
                list.add(OrderItem.asc(orderByStr));
            } else if ("desc".equals(isAscStr)) {
                list.add(OrderItem.desc(orderByStr));
            } else {
                throw new ServiceException("排序参数有误");
            }
        }
        return list;
    }

}

以字典查询为例：

前端 API

// 查询字典数据列表
export function listData(query: DictDataQuery): AxiosPromise<DictDataVO[]> {
  return request({
    url: '/system/dict/data/list',
    method: 'get',
    params: query
  });
}

types.ts

export interface DictDataQuery extends PageQuery {
  dictName: string;
  dictType: string;
  dictLabel: string;
}

global.d.ts

declare global {
  /**
   * 分页查询参数
   */
  declare interface PageQuery {
    pageNum: number;
    pageSize: number;
  }
}

listData 这里接收的是一个 DictDataQuery 类型，由于继承了 PageQuery 类型，前端参数传递的时候会传递 pageNum 和 pageSize

<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

const data = reactive<PageData<DictDataForm, DictDataQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    dictName: '',
    dictType: '',
    dictLabel: ''
  },
  rules: {
    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询字典数据列表 */
const getList = async () => {
  loading.value = true;
  const res = await listData(queryParams.value);
  dataList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

这里的分页组件 pagination 绑定了 getList 方法，该方法查询 api 方法

@RequestMapping("/system/dict/data")  
public class SysDictDataController extends BaseController {
    /**  
     * 查询字典数据列表  
     */  
    @SaCheckPermission("system:dict:list")  
    @GetMapping("/list")  
    public TableDataInfo<SysDictDataVo> list(SysDictDataBo dictData, PageQuery pageQuery) {  
        return dictDataService.selectPageDictDataList(dictData, pageQuery);  
    }
}

@RequiredArgsConstructor  
@Service
public class SysDictDataServiceImpl implements ISysDictDataService {  

    private final SysDictDataMapper baseMapper;  

    @Override  
    public TableDataInfo<SysDictDataVo> selectPageDictDataList(SysDictDataBo dictData, PageQuery pageQuery) {  
        LambdaQueryWrapper<SysDictData> lqw = buildQueryWrapper(dictData);  
        Page<SysDictDataVo> page = baseMapper.selectVoPage(pageQuery.build(), lqw);  
        return TableDataInfo.build(page);  
    }
}

public class TableDataInfo<T> implements Serializable {  

    @Serial  
    private static final long serialVersionUID = 1L;  

    /**  
     * 总记录数  
     */  
    private long total;  

    /**  
     * 列表数据  
     */  
    private List<T> rows;  

    /**  
     * 消息状态码  
     */  
    private int code;  

    /**  
     * 消息内容  
     */  
    private String msg;
}

查询结果会返回 TableDataInfo 对象给前端页面，前端从 res 中拿到 rows 的数据放到 dataList 中

<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
...
</el-table>

至此整个分页查询的过程就结束了