首页
所有分类
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 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
JavaScript 高级篇之函数 （四）
Apr 07 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
微信小程序云开发详细教程
May 16 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
React组件设计模式之组合组件应用实例分析
Apr 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
V Rising(1) Spring Security(2) AOP(2) 动态权限(1) 记事本(1) Navicat(1) redis(3) maven(2) Kotlin(1) Android Gradle(1)
You might like
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
js 操作css实现代码
2009/06/11 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[01:06]欢迎来到上海，TI9
2018/08/26 DOTA
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python Pillow Image Invert
2019/01/22 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
Hunkemöller瑞士网上商店：欧洲最大的内衣品牌之一
2018/12/03 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
办公室助理岗位职责
2013/12/25 职场文书
境外导游求职信
2014/02/27 职场文书
班级文化建设标语
2014/06/23 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
简短的人生哲理（38句）
2019/08/13 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers