Vue中分页插件的前后端配置与使用

　　分页插件的配置

　　com.github.pagehelper

　　pagehelper

　　5.1.10

　　com.github.pagehelper

　　pagehelper-spring-boot-autoconfigure

　　1.2.10

　　后端中的核心代码

　　1. 控制层代码

　　BusinessException异常是自定义的异常类型

　　CommonResponseUtils、ConversionUtils是自定义的工具类

　　以上代码在本博客均未列出

　　* @param commonRequest 前端请求

　　* @return 返回给前端的数据

　　*/

　　@PostMapping(value = "/queryByCondition")

　　public CommonResponse> queryByCondition(@RequestBody CommonRequest commonRequest){

　　CommonRequestUtils.checkCommonRequest(commonRequest);

　　try {

　　OrganizationDTO dto = (OrganizationDTO) ConversionUtils.convertSimpleObject(commonRequest.getBody(),OrganizationDTO.class);

　　PageInfo dtoPageInfo = organizationService.queryByCondition(dto);

　　List dtoList = dtoPageInfo.getList();

　　List vos = ConversionUtils.convertSimpleList(dtoList, OrganizationDataListVO.class);

　　PageInfo voPageInfo = (PageInfo) ConversionUtils.convertSimpleObject(dtoPageInfo, PageInfo.class);

　　voPageInfo.setList(vos);

　　return CommonResponseUtils.makeSuccessCommonResponse(voPageInfo, "0", null, null, null);

　　} catch (ServiceException exception) {

　　throw new BusinessException(exception);

　　} catch (IllegalAccessException | InstantiationException e) {

　　throw new BusinessException(SystemExceptionEnum.SYSTEM_ERROR);

　　}

　　}

　　实体类

　　OrganizationDataListVO

　　package com.bosssoft.bes.userpermission.pojo.vo;

　　import com.bosssoft.bes.userpermission.pojo.base.DataListVO;

　　import java.io.Serializable;

　　/**

　　* @author

　　* @date 2019-08-25 18:43

　　*/

　　public class OrganizationDataListVO extends DataListVO implements Serializable {

　　/**

　　* 机构名称

　　*/

　　protected String name;

　　/**

　　* 机构代码

　　*/

　　protected String code;

　　/**

　　* 负责人

　　*/

　　protected String master;

　　/**

　　* 电话

　　*/

　　protected String tel;

　　/**

　　* 地址

　　*/

　　protected String address;

　　public OrganizationDataListVO() {

　　}

　　}

　　OrganizationQueryConditionVO

　　package com.bosssoft.bes.userpermission.pojo.vo;

　　import com.bosssoft.bes.userpermission.pojo.base.QueryConditionVO;

　　import java.io.Serializable;

　　/**

　　* @author

　　* @date 2019-08-15 14:05

　　*/

　　public class OrganizationQueryConditionVO extends QueryConditionVO implements Serializable {

　　/**

　　* 机构名称

　　*/

　　protected String name;

　　public OrganizationQueryConditionVO() {

　　}

　　}

　　2. 业务层代码

　　/**

　　*

　　* @param organizationDTO

　　* @return

　　* @throws ServiceException

　　*/

　　public PageInfo queryByCondition(OrganizationDTO organizationDTO) {

　　Condition condition = new Condition(Organization.class);

　　Example.Criteria criteria = condition.createCriteria();

　　if (!StringUtils.isEmpty(organizationDTO.getName())) {

　　criteria.andLike("name", organizationDTO.getName() + "%");

　　}无锡人流费用 http://www.xasgfk120.com/

　　condition.setOrderByClause("updated_time DESC");

　　PageHelper.startPage(organizationDTO.getPageNum(), organizationDTO.getPageSize());

　　List results = organizationDao.selectByExample(condition);

　　PageInfo organizationPageInfo = new PageInfo(results);

　　List dtos = null;

　　OrganizationDTO dto = null;

　　dtos = new ArrayList(results.size());

　　for (Organization result : results) {

　　dto = new OrganizationDTO();

　　BeanUtils.copyProperties(result, dto);

　　dtos.add(dto);

　　}

　　PageInfo organizationDtoPageInfo = new PageInfo();

　　BeanUtils.copyProperties(organizationPageInfo, organizationDtoPageInfo);

　　organizationDtoPageInfo.setList(dtos);

　　return organizationDtoPageInfo;

　　}

　　实体类

　　OrganizationDTO

　　package com.bosssoft.bes.userpermission.pojo.dto;

　　import com.bosssoft.bes.userpermission.pojo.base.BaseDTO;

　　import java.util.List;

　　/**

　　* @author

　　* @date 2019-08-15 14:09

　　*/

　　public class OrganizationDTO extends BaseDTO {

　　/**

　　* 所含公司列表

　　*/

　　protected List companyDtoList;

　　/**

　　* 机构名称

　　*/

　　protected String name;

　　/**

　　* 机构代码

　　*/

　　protected String code;

　　/**

　　* 负责人

　　*/

　　protected String master;

　　/**

　　* 电话

　　*/

　　protected String tel;

　　/**

　　* 地址

　　*/

　　protected String address;

　　public OrganizationDTO() {

　　}

　　}

　　Organization

　　package com.bosssoft.bes.userpermission.pojo.entity;

　　import com.bosssoft.bes.userpermission.pojo.base.BaseEntity;

　　import org.springframework.stereotype.Repository;

　　import javax.persistence.Table;

　　import java.io.Serializable;

　　/**

　　* @author

　　* @date 2019-08-15 10:49

　　*/

　　@Repository

　　@Table(name = "t_organization")

　　public class Organization extends BaseEntity implements Serializable {

　　//private static final long serialVersionUID = 1L;

　　/**

　　* 机构名称

　　*/

　　protected String name;

　　/**

　　* 机构代码

　　*/

　　protected String code;

　　/**

　　* 负责人

　　*/

　　protected String master;

　　/**

　　* 电话

　　*/

　　protected String tel;

　　/**

　　* 地址

　　*/

　　protected String address;

　　public Organization() {

　　}

　　}

　　3. DAO层

　　引用了通用mapper

　　前端中的代码

　　导入element分页插件

　　handleSizeChange：当改变每页显示的数据量时，触发该函数，页面刷新，并跳转到第一页。

　　handleCurrentChange：跳转到用户所选择的页面

　　查询

　　增加

　　删除

　　修改

　　是

　　否

　　取 消

　　保 存

　　修 改

　　@size-change="handleSizeChange"

　　@current-change="handleCurrentChange"

　　:current-page="currentPage"

　　:page-size="currentPageSize"

　　layout="total, sizes, prev, pager, next, jumper"

　　:total="recordNumber">