首页
所有分类
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 相关文章推荐
js FLASH幻灯片字符串中有连接符＆的处理方法
Mar 01 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
微信小程序（三）：网络请求
Jan 13 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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
AM(1) 频偏(1) 电路(15) 鉴频器(1) 春雷3P7(1) 发烧友(1) 单管机(1) 原理(1) 探测器(1) 实习报告(1)
You might like
php中in_array函数用法分析
2014/11/15 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
基于Django用户认证系统详解
2018/02/21 Python
python 实现生成均匀分布的点
2019/12/05 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
详解pandas映射与数据转换
2021/01/22 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
大都会艺术博物馆商店：The Met Store
2018/06/22 全球购物
交通文明倡议书
2014/05/16 职场文书
书法大赛策划方案
2014/06/04 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL
微信小程序调用python模型
2022/04/21 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python