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

2023-08-12 22:23:04 68

本文实例为大家分享了Vue分页插件的前后端配置与使用，供大家参考，具体内容如下

分页插件的配置


com.github.pagehelper
pagehelper
5.1.10


com.github.pagehelper
pagehelper-spring-boot-autoconfigure
1.2.10

后端中的核心代码

1.控制层代码

BusinessException异常是自定义的异常类型
CommonResponseUtils、ConversionUtils是自定义的工具类

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

*@paramcommonRequest前端请求
*@return返回给前端的数据
*/
@PostMapping(value="/queryByCondition")
publicCommonResponse>queryByCondition(@RequestBodyCommonRequestcommonRequest){
CommonRequestUtils.checkCommonRequest(commonRequest);
try{
OrganizationDTOdto=(OrganizationDTO)ConversionUtils.convertSimpleObject(commonRequest.getBody(),OrganizationDTO.class);
PageInfodtoPageInfo=organizationService.queryByCondition(dto);
ListdtoList=dtoPageInfo.getList();
Listvos=ConversionUtils.convertSimpleList(dtoList,OrganizationDataListVO.class);
PageInfovoPageInfo=(PageInfo)ConversionUtils.convertSimpleObject(dtoPageInfo,PageInfo.class);
voPageInfo.setList(vos);
returnCommonResponseUtils.makeSuccessCommonResponse(voPageInfo,"0",null,null,null);
}catch(ServiceExceptionexception){
thrownewBusinessException(exception);
}catch(IllegalAccessException|InstantiationExceptione){
thrownewBusinessException(SystemExceptionEnum.SYSTEM_ERROR);
}
}

实体类

OrganizationDataListVO

packagecom.bosssoft.bes.userpermission.pojo.vo;

importcom.bosssoft.bes.userpermission.pojo.base.DataListVO;

importjava.io.Serializable;

/**
*@author
*@date2019-08-2518:43
*/
publicclassOrganizationDataListVOextendsDataListVOimplementsSerializable{

/**
*机构名称
*/
protectedStringname;

/**
*机构代码
*/
protectedStringcode;

/**
*负责人
*/
protectedStringmaster;

/**
*电话
*/
protectedStringtel;

/**
*地址
*/
protectedStringaddress;

publicOrganizationDataListVO(){
}

}

OrganizationQueryConditionVO

packagecom.bosssoft.bes.userpermission.pojo.vo;

importcom.bosssoft.bes.userpermission.pojo.base.QueryConditionVO;

importjava.io.Serializable;

/**
*@author
*@date2019-08-1514:05

*/
publicclassOrganizationQueryConditionVOextendsQueryConditionVOimplementsSerializable{

/**
*机构名称
*/
protectedStringname;

publicOrganizationQueryConditionVO(){
}


}

2.业务层代码

/**
*
*@paramorganizationDTO
*@return
*@throwsServiceException
*/
publicPageInfoqueryByCondition(OrganizationDTOorganizationDTO){
Conditioncondition=newCondition(Organization.class);
Example.Criteriacriteria=condition.createCriteria();
if(!StringUtils.isEmpty(organizationDTO.getName())){
criteria.andLike("name",organizationDTO.getName()+"%");
}
condition.setOrderByClause("updated_timeDESC");
PageHelper.startPage(organizationDTO.getPageNum(),organizationDTO.getPageSize());
Listresults=organizationDao.selectByExample(condition);
PageInfoorganizationPageInfo=newPageInfo(results);
Listdtos=null;
OrganizationDTOdto=null;
dtos=newArrayList(results.size());
for(Organizationresult:results){
dto=newOrganizationDTO();
BeanUtils.copyProperties(result,dto);
dtos.add(dto);
}
PageInfoorganizationDtoPageInfo=newPageInfo();
BeanUtils.copyProperties(organizationPageInfo,organizationDtoPageInfo);
organizationDtoPageInfo.setList(dtos);
returnorganizationDtoPageInfo;
}

实体类

OrganizationDTO

packagecom.bosssoft.bes.userpermission.pojo.dto;

importcom.bosssoft.bes.userpermission.pojo.base.BaseDTO;

importjava.util.List;

/**
*@author
*@date2019-08-1514:09

*/
publicclassOrganizationDTOextendsBaseDTO{

/**
*所含公司列表
*/
protectedListcompanyDtoList;

/**
*机构名称
*/
protectedStringname;

/**
*机构代码
*/
protectedStringcode;

/**
*负责人
*/
protectedStringmaster;

/**
*电话
*/
protectedStringtel;

/**
*地址
*/
protectedStringaddress;

publicOrganizationDTO(){
}

}

Organization

packagecom.bosssoft.bes.userpermission.pojo.entity;

importcom.bosssoft.bes.userpermission.pojo.base.BaseEntity;
importorg.springframework.stereotype.Repository;

importjavax.persistence.Table;
importjava.io.Serializable;

/**
*@author
*@date2019-08-1510:49

*/
@Repository
@Table(name="t_organization")
publicclassOrganizationextendsBaseEntityimplementsSerializable{
//privatestaticfinallongserialVersionUID=1L;

/**
*机构名称
*/
protectedStringname;

/**
*机构代码
*/
protectedStringcode;

/**
*负责人
*/
protectedStringmaster;

/**
*电话
*/
protectedStringtel;

/**
*地址
*/
protectedStringaddress;

publicOrganization(){
}



}

3.DAO层

引用了通用mapper

前端中的代码

导入element分页插件

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

是否

取消保存修改

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐