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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)