首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 09, 2019

本文实例为大家分享了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>

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

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

- Author -

junhang7

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
兼容IE和FF的js脚本代码小结（比较常用）
Dec 06 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jQuery实用技巧必备（中）
Nov 03 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 #Javascript
将RGB值转换为灰度值的简单算法
Oct 09 #Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 #Javascript
解决Vue动态加载本地图片问题
Oct 09 #Javascript
Vue3 中的数据侦测的实现
Oct 09 #Javascript
vue3实现v-model原理详解
Oct 09 #Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 #Javascript
ICF-SW100(1) YH-R296(1) SRF-M100(1) SRF-22W(1) SRF-40W(1) 华普R-96(1) 德劲1107(1) 上海永华(1) 安健(1) A254(1)
You might like
PHP 已经成熟
2006/12/04 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP面向对象程序设计（OOP）之方法重写（override）操作示例
2018/12/21 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
js Math 对象的方法
2013/09/01 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
原生js轮播（仿慕课网）
2017/02/15 Javascript
ES6新特性三： Generator(生成器)函数详解
2017/04/21 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Python实现求数列和的方法示例
2018/01/12 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
python游戏开发的五个案例分享
2020/03/09 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
员工培训邀请函
2014/01/11 职场文书
中英文求职信范文
2014/01/27 职场文书
投资合作协议书范本
2014/04/17 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
2014年公司工作总结
2014/11/22 职场文书
技术股东合作协议书
2014/12/02 职场文书
稽核岗位职责范本
2015/04/13 职场文书
学会掌握自己命运的十条黄金法则：
2019/08/08 职场文书