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

本文实例为大家分享了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;


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;


public class OrganizationQueryConditionVO extends QueryConditionVO implements Serializable {

 
 protected String name;

 public OrganizationQueryConditionVO() {
 }

 
}

2. 业务层代码

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() + "%");
 }
 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;


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;


@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：跳转到用户所选择的页面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。