Vue分页插件的前后端配置与使用
编程学习 2021-07-04 15:01www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。