Vue实战篇二十四：分页显示

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件
Vue实战篇十四：前端excel组件实现数据导入
Vue实战篇十五：表格数据多选在实际项目中的技巧
Vue实战篇十六：导航菜单
Vue实战篇十七：用树型组件实现一个知识目录
Vue实战篇十八：搭建一个知识库框架
Vue实战篇十九：使用printjs打印表单
Vue实战篇二十：自定义表格合计
Vue实战篇二十一：实战Prop的双向绑定
Vue实战篇二十二：生成二维码
Vue实战篇二十三：卡片风格与列表风格的切换

---

# 一、背景

• 时候前端通过某个API接口发起的查询，后端会返回大量的数据。为了保证前后端的响应效率及前端的显示效果，我们需要实现分页显示。
  

二、后端实现

• 在后端Spring Boot项目中，应用了Mybatis-plus 3.4.0框架，我们将通过Mybatis-plus的分页插件来实现。
• 以下代码我们以用户查询做为例子。

2.1 配置分页插件

• 首先我们定义一个分页插件的配置类，并让Spirng进行管理。

/**
 * MybatisPlus分页插件配置类
 *
 * @author zhuhuix
 * @date 2022-04-07
 */

@Configuration
@ConditionalOnClass(value = {
   MybatisPlusInterceptor.class})
@Mapper
public class MybatisPlusConfig {
   
    // 3.4.0 版本以上使用MybatisPlusInterceptor
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
   
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

2.2 定义与前端交互的查询条件传输对象

• 定义一个与前端交互的传输对象类，在这个传输对象类中除了必要的查询条件外，还要增加当前查询第几页及每页查询条数。

/**
 * 用户查询条件
 *
 * @author zhuhuix
 * @date 2021-09-28
 *
 * @date 2022-04-04
 * 增加分页传入参数
 */
@ApiModel(value = "用户查询条件")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class SysUserQueryDto {
   

    @ApiModelProperty(value = "用户名")
    private String userName;

    @ApiModelProperty(value = "注册起始时间")
    private Long createTimeStart;

    @ApiModelProperty(value = "注册结束时间")
    private Long createTimeEnd;

    @ApiModelProperty(value = "当前页数")
    private Integer currentPage;

    @ApiModelProperty(value = "每页条数")
    private Integer pageSize;
}

2.3 定义返回给前端的数据传输对象

• 除了以上查询条件外，我们再定义一个返回的数据传输对象类，在这个对象类中，需要增加分页的一些信息。

/**
 * 用户分页返回数据
 *
 * @author zhuhuix
 * @date 2022-04-07
 */

@ApiModel(value = "用户分页数据")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class SysUserDto {
   

    // 当前查询第几页
    private Integer currentPage;

	// 每页显示数量 
    private Integer pageSize;

	// 总页数=总数据量/每页显示数量
    private Long totalPage;

    private List<SysUser> sysUserList;

}

2.4 用户分页查询的接口及实现

• 接下来我们来写分页查询的实现类

/**
 * 用户信息接口
 *
 * @author zhuhuix
 * @date 2020-04-03
 * 
 * @date 2022-04-07
 * 增加分页查询接口
 */
public interface SysUserService {
   

	...

    /**
     * 根据条件查询用户信息,并返回分页用户列表
     * @param sysUserQueryDto 查询条件
     * @return 分页用户数据
     */
    SysUserDto page(SysUserQueryDto sysUserQueryDto);


}

/**
 * 用户接口实现类
 *
 * @author zhuhuix
 * @date 2020-04-03
 * 
 * @date 2022-04-07
 * 实现分页查询
 */
@Slf4j
@Service
@RequiredArgsConstructor
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class SysUserServiceImpl implements SysUserService {
   

    private final SysUserMapper sysUserMapper;
   
   	...
	
    @Override
    public SysUserDto page(SysUserQueryDto sysUserQueryDto) {
   
        QueryWrapper<SysUser> queryWrapper = new QueryWrapper<>();
        if (!StringUtils.isEmpty(sysUserQueryDto.getUserName())) {
   
            queryWrapper.lambda().like(SysUser::getUserName, sysUserQueryDto.getUserName())
                    .or().like(SysUser::getNickName, sysUserQueryDto.getUserName());
        }
        if (!StringUtils.isEmpty(sysUserQueryDto.getCreateTimeStart())
                && !StringUtils.isEmpty(sysUserQueryDto.getCreateTimeEnd())) {
   
            queryWrapper.and(wrapper -> wrapper.lambda().between(SysUser::getCreateTime,
                    new Timestamp(sysUserQueryDto.getCreateTimeStart()),
                    new Timestamp(sysUserQueryDto.getCreateTimeEnd())));
        }

		// 根据前端的分页查询参数进行分页查询
        Page<SysUser> page = new Page<>(sysUserQueryDto.getCurrentPage(), sysUserQueryDto.getPageSize());
        sysUserMapper.selectPage(page, queryWrapper);

        SysUserDto sysUserDto = new SysUserDto();
        sysUserDto.setCurrentPage(sysUserQueryDto.getCurrentPage());
        sysUserDto.setPageSize(sysUserQueryDto.getPageSize());
        sysUserDto.setTotalPage(page.getTotal());
        sysUserDto.setSysUserList(page.getRecords());

        return sysUserDto;

    }

}

• 在Controller层定义分页查询的API接口

/**
 * api用户信息
 *
 * @author zhuhuix
 * @date 2021-08-16
 * 
 * @date 2022-04-07
 * 增加分页查询接口
 */
@Slf4j
@RestController