tmerclub-doc/基本开发文档/表格分页.md

表格分页

本商城前端采用Element数据分页组件Pagination分页，后端采用Mybatis的PageHelper分页插件。

前端分页

前端采用Pagination分页，具体文档参考[Element UI][https://element.eleme.cn/#/zh-CN/component/pagination]

本商城中，组件定义位置为：src/components/Pagination/index.vue

<el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
/>

该组件中定义了两个事件，其中@size-change为组件页数改变时会触发，而 @current-change事件中，当前页数改变时即会触发该事件。

其他页面需要用到分页时，通过import导入该组件，并通过设置相关参数来使用，以下代码参考src/views/order/order/index.vue

<pagination
  v-show="pageVO.total > 0"
  :total="pageVO.total"
  :page.sync="pageQuery.pageNum"
  :limit.sync="pageQuery.pageSize"
  @pagination="getDataList()"
/>

组件在被引用时，页面可以调用他的同名参数 @pagination

getPage() {
    this.pageLoading = true
    api.page({ ...this.pageQuery, ...this.searchParam }).then(pageVO => {
        this.pageVO = pageVO
        this.pageLoading = false
    })
}

后台分页

后端采用Mybatis的PageHelper分页插件，由PageHelper-Spring-Boot-Starter集成分页插件到Spring Boot来完成表格分页。

使用pagehelper进行分页，该分页只能一对一。

导入依赖

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.1.4</version>
</dependency>
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.3.0</version>
</dependency>

建立分页工具类

public class PageUtil {

    /**
     * 使用pagehelper进行分页，该分页只能一对一
     */
    public static <T> PageVO<T> doPage(PageDTO pageDTO, ISelect select) {

        PageSerializable<T> simplePageInfo = PageHelper.startPage(pageDTO).doSelectPageSerializable(select);

        PageVO<T> pageVO = new PageVO<>();
        pageVO.setList(simplePageInfo.getList());
        pageVO.setTotal(simplePageInfo.getTotal());
        pageVO.setPages(getPages(simplePageInfo.getTotal(), pageDTO.getPageSize()));
        return pageVO;
    }

    public static Integer getPages(long total, Integer pageSize) {

        if (total == -1) {
            return 1;
        }
        if (pageSize > 0) {
            return  (int) (total / pageSize + ((total % pageSize == 0) ? 0 : 1));
        }
        return  0;
    }
}

搜索

服务端ShopUserController

@RequestMapping(value = "/m/shop_user")
@RestController("multishopShopUserController")
@Api(tags = "店铺用户信息")
public class ShopUserController {

	@Autowired
	private ShopUserService shopUserService;

	@GetMapping("/page")
	@ApiOperation(value = "店铺用户列表", notes = "获取店铺用户列表")
	public ServerResponseEntity<PageVO<ShopUserVO>> page(@Valid PageDTO pageDTO, String nickName) {
		UserInfoInTokenBO userInfoInTokenBO = AuthUserContext.get();
		PageVO<ShopUserVO> shopUserPage = shopUserService.pageByShopId(pageDTO, userInfoInTokenBO.getTenantId(), nickName);
		return ServerResponseEntity.success(shopUserPage);
	}
}

@Service
public class ShopUserServiceImpl implements ShopUserService {

	@Resource
	private ShopUserMapper shopUserMapper;

	@Override
	public PageVO<ShopUserVO> pageByShopId(PageDTO pageDTO, Long shopId, String nickName) {
		return PageUtil.doPage(pageDTO, () -> shopUserMapper.listByShopId(shopId, nickName));
	}
}

可见，传入的参数为pageDTO，该对象是根据POJO，即“Plain Old Java Object”->“简单java对象”而得。

POJO的意义就在于它的简单而灵活性，因为它的简单和灵活，使得POJO能够任意扩展，从而胜任多个场合，也就让一个模型贯穿多个层成为现实。

名称	含义	说明
PO(Persistant Object)	代表持久层对象的意思，对应数据库中表的字段	一个PO就是数据库中的一条记录
BO(Business Object)	把业务逻辑封装成一个对象	教育经历是一个PO，技术能力是一个PO，工作经历是一个PO，建立一个HR对象，也即BO去处理简历，每个BO均包含这些PO
VO(View Object)	表现层对象	后台返回给前端的对象
DTO(Data Transfer Object)	数据传输对象	前端传给后台的对象

pageDTO如下

public class PageDTO implements IPage {
   /** ...省略*/
       
    /**
     * 最大分页大小，如果分页大小大于500，则用500作为分页的大小。防止有人直接传入一个较大的数，导致服务器内存溢出宕机
     */
    public static final Integer MAX_PAGE_SIZE = 500;

    /**
     * 当前页
     */
    @NotNull(message = "pageNum 不能为空")
    @ApiModelProperty(value = "当前页", required = true)
    private Integer pageNum;

    @NotNull(message = "pageSize 不能为空")
    @ApiModelProperty(value = "每页大小", required = true)
    private Integer pageSize;

    @ApiModelProperty(value = "排序字段数组，用逗号分割")
    private String[] columns;

    @ApiModelProperty(value = "排序字段方式，用逗号分割，ASC正序，DESC倒序")
    private String[] orders;

   /** ...省略*/
}

返回给前端的参数PageVO如下：

public class PageVO<T> {

    @ApiModelProperty("总页数")
    private Integer pages;

    @ApiModelProperty("总条目数")
    private Long total;

    @ApiModelProperty("结果集")
    private List<T> list;

   /** ...省略*/
}

调用PageUtil.doPage(pageDTO, () -> shopUserMapper.listByShopId(shopId, nickName))方法，对返回的列表进行分页。