Vue分页插件的前后端配置与使用-web开发-互联网-天达云

Vue分页插件的前后端配置与使用
更新：HHH 时间：2023-1-7

本文实例为大家分享了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" >
 <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 >
 <el-button type="text" class="el-icon-plus"  @click="showAddDialog">增加</el-button><label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
 <el-button type="text" class="el-icon-delete"  @click="deleteMultipleItems()">删除</el-button><label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
 <el-button type="text" class="el-icon-edit"  @click="multipleUpdateAttemptProcess()">修改</el-button>
 </div>

 <!-- 显示数据字典的表单 -->
 <div>
 <el-table ref="multipleTable" :data="items" tooltip-effect="dark"  @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" >
 <el-dialog :title="dialogTitle"  :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" : @click="submitAddForm('itemModify')">保 存</el-button>
  <el-button size="mini" type="primary" : @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>

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


返回web开发教程...

新手上路

产品管理

支付方式

关于我们