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

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

分页插件的配置

<dependency>
 <groupId>com.github.pagehelper</groupId>
 <artifactId>pagehelper</artifactId>
 <version>5.1.10</version>
</dependency>
<dependency>
 <groupId>com.github.pagehelper</groupId>
 <artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
 <version>1.2.10</version>
</dependency>

后端中的核心代码

1. 控制层代码

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

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

* @param commonRequest 前端请求
 * @return 返回给前端的数据
 */
@PostMapping(value = "/queryByCondition")
public CommonResponse<PageInfo<OrganizationDataListVO>> queryByCondition(@RequestBody CommonRequest<OrganizationQueryConditionVO> commonRequest){
 CommonRequestUtils.checkCommonRequest(commonRequest);
 try {
  OrganizationDTO dto = (OrganizationDTO) ConversionUtils.convertSimpleObject(commonRequest.getBody(),OrganizationDTO.class);
  PageInfo<OrganizationDTO> dtoPageInfo = organizationService.queryByCondition(dto);
  List<OrganizationDTO> dtoList = dtoPageInfo.getList();
  List<OrganizationDataListVO> vos = ConversionUtils.convertSimpleList(dtoList, OrganizationDataListVO.class);
  PageInfo<OrganizationDataListVO> voPageInfo = (PageInfo<OrganizationDataListVO>) 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<OrganizationDTO> 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<Organization> results = organizationDao.selectByExample(condition);
 PageInfo<Organization> organizationPageInfo = new PageInfo<Organization>(results);
 List<OrganizationDTO> dtos = null;
 OrganizationDTO dto = null;
 dtos = new ArrayList<OrganizationDTO>(results.size());
 for (Organization result : results) {
  dto = new OrganizationDTO();
  BeanUtils.copyProperties(result, dto);
  dtos.add(dto);
 }
 PageInfo<OrganizationDTO> organizationDtoPageInfo = new PageInfo<OrganizationDTO>();
 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<CompanyDTO> 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：跳转到用户所选择的页面

<!-- 组织机构管理 -->
<!-- 新页面 -->

<template>
 <div>
 <!--查询部分 -->
 <el-form :inline="true" :model="searchKeywords" class="demo-form-inline" style="float:left">
  <el-form-item label="组织名称">
  <el-input type="text" v-model="searchKeywords.name" placeholder="组织名称"></el-input>
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="searchItem(1)">查询</el-button>
  </el-form-item>
 </el-form>
 <br /><br /><br />
 <!-- 操作区 -->
 <div style="float:left">
  <el-button type="text" class="el-icon-plus" style="font-size: 15px" @click="showAddDialog">增加</el-button><label>    </label>
  <el-button type="text" class="el-icon-delete" style="font-size: 15px" @click="deleteMultipleItems()">删除</el-button><label>    </label>
  <el-button type="text" class="el-icon-edit" style="font-size: 15px" @click="multipleUpdateAttemptProcess()">修改</el-button>
 </div>

 <!-- 显示数据字典的表单 -->
 <div>
  <el-table ref="multipleTable" :data="items" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" @row-dblclick="editRow">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="机构名称" sortable width="120"></el-table-column>
  <el-table-column prop="code" label="机构代码" sortable width="100"></el-table-column>
  <el-table-column prop="master" label="负责人" width="100"></el-table-column>
  <el-table-column prop="tel" label="电话" width="120"></el-table-column>
  <el-table-column prop="address" label="地址" width="180"></el-table-column>
  <el-table-column prop="status" label="是否启用" sortable width="95" :formatter="statusFormat"></el-table-column>
  <el-table-column prop="operate" label="操作" width="100">
   <template slot-scope="scope">
   <el-button type="text" class="el-icon-plus" @click="showAddDialog"></el-button>
   <el-button type="text" class="el-icon-delete" @click="deleteSingleItem(scope.row)"></el-button>
   <el-button type="text" class="el-icon-edit" @click="showEditDialog(scope.row)"></el-button>
   </template>
  </el-table-column>
  </el-table>
 </div>

 <!--添加与修改字典弹窗-->
 <div>
  <el-form :model="dialogDataValues" :label-position="labelPosition" :rules="rules" ref="itemModify" style="margin: 0px; padding: 0px;">
  <el-dialog :title="dialogTitle" style="padding: 0px;" :close-on-click-modal="false" :visible.sync="isDialogShowed" width="60%">
   <el-form-item label="组织机构名" :label-width="formLabelWidth" prop="name">
   <el-input v-model="dialogDataValues.name" placeholder="组织机构名"></el-input>
   </el-form-item>
   <el-form-item label="机构代码" :label-width="formLabelWidth" prop="code">
   <el-input v-model="dialogDataValues.code" placeholder="机构代码"></el-input>
   </el-form-item>
   <el-form-item label="负责人" :label-width="formLabelWidth" prop="master">
   <el-input v-model="dialogDataValues.master" placeholder="负责人"></el-input>
   </el-form-item>
   <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
   <el-input v-model="dialogDataValues.tel" placeholder="电话"></el-input>
   </el-form-item>
   <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
   <el-input v-model="dialogDataValues.address" placeholder="地址"></el-input>
   </el-form-item>
   <el-form-item label="是否启用" :label-width="formLabelWidth" prop="status">
   <el-radio v-model="dialogDataValues.status" :label="1">是</el-radio>
   <el-radio v-model="dialogDataValues.status" :label="0">否</el-radio>
   </el-form-item>
   <span slot="footer" class="dialog-footer">
   <el-button size="mini" @click="cancelEdit">取 消</el-button>
   <el-button size="mini" type="primary" :style="{display: visibleSave}" @click="submitAddForm('itemModify')">保 存</el-button>
   <el-button size="mini" type="primary" :style="{display: visibleEdit}" @click="submitUpdateForm('itemModify')">修 改</el-button>
   </span>
  </el-dialog>
  </el-form>
 </div>

  <div class="block">
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="currentPageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="recordNumber">
  </el-pagination>
  </div>
 </div>
</template>
<script>
import {
 queryOrganization,
 addOrganization,
 updateOrganization,
 deleteOrganization
} from "../../api/systemcenter";
export default {
 data() {
 return {
  // ===========================
  // 前端属性
  // ===========================
  //默认隐藏编辑按钮
  visibleEdit: "none",
  //默认显示新增按钮
  visibleSave: "",
  // 添加弹窗显示与否
  isDialogShowed: false,
  // 标签宽度
  formLabelWidth: "120px",
  // 在表格中显示的数据
  items: [],
  // 添加弹窗中的数值
  dialogDataValues: {
  id: "",
  name: "",
  code: "",
  master: "",
  tel: "",
  address: "",
  status: ""
  },
  // 修改弹窗数值
  form: {},

  // 前端校验 @blur 当元素失去焦点时触发blur事件
  rules: {
  name: [{ required: true, message: "组织机构名称必填", trigger: "blur" }],
  code: [{ required: true, message: "组织机构代码必填", trigger: "blur" }],
  // tel: [{ required: true, message: "组织机构电话号码必填", trigger: "blur" }],
  // master: [{ required: true, message: "组织机构负责人必填", trigger: "blur" }],
  // address: [{ required: true, message: "组织机构地址必填", trigger: "blur" }],
  status: [{ required: true, message: "状态必选", trigger: "blur" }]
  },
  // 弹窗数据右对齐
  labelPosition: "right",
  // 导入
  fileUploadBtnText: "导入",
  // 通过checkbox进行多选的数据
  selectedItems: {},
  // 搜索框数据
  searchKeywords: {},
  //数据总量
  recordNumber: 0,
  //当前页数
  currentPage: 1,
  //当前每页数量：
  currentPageSize: 10,
  loading: true
 };
 },
 // 页面加载完成后加载数据
 mounted: function() {
 this.loadDataList();
 },
 methods: {
 // ==========================
 // 页面处理
 // ==========================

 editRow(row){
  this.showEditDialog(row)
 },

 //参数校验
 submitAddForm(formName) {
  this.$refs[formName].validate((valid) => {
  if (valid) {
   this.addItem();
  } else {
   return false;
  }
  });
 },

 submitUpdateForm(formName) {
  this.$refs[formName].validate((valid) => {
  if (valid) {
   this.updateItem();
  } else {
   return false;
  }
  });
 },

 //状态值的转化
 statusFormat(row, column) {
  if (row.status === 0) {
  return "否";
  } else if (row.status === 1) {
  return "是";
  }
 },

 // 每一行多选选中时触发该方法
 handleSelectionChange(selectedItems) {
  this.selectedItems = selectedItems;
 },

 // 显示添加数据弹窗
 showAddDialog() {
  this.visibleSave = "";
  this.visibleEdit = "none";
  this.dialogTitle = "添加组织机构";
  this.isDialogShowed = true;
  this.dialogDataValues.name = "";
  this.dialogDataValues.code = "";
  this.dialogDataValues.master = "";
  this.dialogDataValues.tel = "";
  this.dialogDataValues.address = "";
  this.dialogDataValues.status = 1;
  this.dialogDataValues.id = "";
  this.dialogDataValues.version = "";
 },

 // 显示修改数据弹窗
 showEditDialog(obj) {
  this.visibleSave = "none";
  this.visibleEdit = "";
  this.dialogTitle = "修改组织机构";
  this.isDialogShowed = true;
  this.dialogDataValues.name = obj.name;
  this.dialogDataValues.code = obj.code;
  this.dialogDataValues.master = obj.master;
  this.dialogDataValues.tel = obj.tel;
  this.dialogDataValues.address = obj.address;
  this.dialogDataValues.status = obj.status;
  this.dialogDataValues.id = obj.id;
  this.dialogDataValues.version = obj.version;
 },

 // 取消弹窗
 cancelEdit() {
  this.isDialogShowed = false;
  this.dialogDataValues.name = "";
  this.dialogDataValues.code = "";
  this.dialogDataValues.master = "";
  this.dialogDataValues.tel = "";
  this.dialogDataValues.address = "";
  this.dialogDataValues.status = "";
  this.dialogDataValues.id = "";
  this.dialogDataValues.version = "";
 },

 // 多选修改处理
 multipleUpdateAttemptProcess() {
  if (this.selectedItems.length == 1) {
  this.showEditDialog(this.selectedItems[0]);
  } else if (this.selectedItems.length == null || this.selectedItems.length == 0) {
  this.$message({type: "info", message: "未选中数据", duration: 1000});
  } else {
  this.$message({type: "error", message: "无法一次修改多个数据", duration: 1000});
  }
 },

 // ==========================
 // 数据处理
 // ==========================

 queryData(queryCondition) {
  var _this = this;
  _this.loading = true;
  queryOrganization(queryCondition).then(resp => {
  if (resp && resp.responseHead.code === "0") {
   _this.recordNumber = resp.body.total;
   _this.items = resp.body.list;
   _this.loading = false;
  }
  }).catch(() => {
  _this.$message({showClose: true, message: "网络异常", type: 'error'})
  _this.loading = false;
  });
 },

 // 加载数据方法
 loadDataList() {
  this.queryData({
  pageNum: this.currentPage,
  pageSize: this.currentPageSize
  });
 },

 // 搜索功能
 searchItem(currentPage) {
  this.queryData({
  pageNum: currentPage,
  pageSize: this.currentPageSize,
  name: this.searchKeywords.name
  });
 },

 handleSizeChange: function(currentPageSize) {
  this.currentPageSize = currentPageSize;
  this.currentPage = 1;
  this.searchItem(1);
 },

 handleCurrentChange: function(currentPage) {
  this.currentPage = currentPage;
  this.searchItem(currentPage);
 },

 // 增加数据
 addItem() {
  addOrganization({
  name: this.dialogDataValues.name,
  code: this.dialogDataValues.code,
  master: this.dialogDataValues.master,
  tel: this.dialogDataValues.tel,
  address: this.dialogDataValues.address,
  status: this.dialogDataValues.status
  }).then(resp => {
   if (resp && resp.responseHead.code == "0") {
   this.$notify({title: "成功",message: "数据已成功插入",type: "success",duration: 1500});
   this.loadDataList();
   this.isDialogShowed = false;
   } else {
   this.$message({
    type: "error",
    message: "数据插入失败 错误码："+resp.responseHead.code+" 错误信息：" +resp.responseHead.message,
    duration: 1000
   });
   }
  }).catch(() => {});
 },
 // 编辑数据

 updateItem() {
  updateOrganization({
  name: this.dialogDataValues.name,
  code: this.dialogDataValues.code,
  master: this.dialogDataValues.master,
  tel: this.dialogDataValues.tel,
  address: this.dialogDataValues.address,
  status: this.dialogDataValues.status,
  id: this.dialogDataValues.id,
  version: this.dialogDataValues.version
  }).then(resp => {
   if (resp && resp.responseHead.code == "0") {
   this.$notify({title: "成功", message: "数据已成功修改", type: "success", duration: 1000});
   this.loadDataList();
   this.isDialogShowed = false;
   } else {
   this.$message({
   type: "error",
   message: "数据修改失败 错误码："+resp.responseHead.code+" 错误信息：" +resp.responseHead.message,
   duration: 1000
   });
   }
  }).catch(() => {});
 },

 //删除数据
 deleteData(datalist) {
  deleteOrganization(datalist).then(resp => {
  if (resp && resp.responseHead.code === "0") {
   this.$notify({title: "成功", message: "数据已成功删除", type: "success", duration: 1000});
   // 若删除成功则重新刷新页面
   this.loadDataList();
  } else {
   this.$notify({
   title: "失败",
   message: "数据删除失败 错误码："+resp.responseHead.code+" 错误信息：" +resp.responseHead.message,
   type: "error",
   duration: 1000
   });
  }
  });
 },

 deleteSingleItem(obj) {
  this.$confirm("确认要删除该数据吗?", "信息", {
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  type: "warning"
  }).then(() => {
   this.deleteData([{id: obj.id, version: obj.version}]);
  }).catch(() => {
   this.$message({type: "info",message: "已取消删除", duration: 1000});
  });
 },

 // 批量删除数据
 deleteMultipleItems() {
  if (this.selectedItems.length == null || this.selectedItems.length == 0) {
  this.$message({
   type: "error",
   message: "未选择任何数据",
   duration: 1000
  });
  } else {
  this.$confirm("确认要删除该数据吗?", "信息", {
   confirmButtonText: "确定",
   cancelButtonText: "取消",
   type: "warning"
  }).then(() => {
   this.deleteData(this.selectedItems);
   }).catch(() => {
   this.$message({type: "info",message: "已取消删除", duration: 1000});
  });
  }
 }
 }
};
</script>

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