Vue分页插件的前后端设备与应用

发布时间: 2019-10-09 16:29:27 来源: 互联网 栏目: JavaScript 点击:

这篇文章重要为大年夜家详细简介了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>

以上就是本文的全部内容,欲望对大年夜家的进修有所赞助,也欲望大年夜家多多支撑我们。

本文标题: Vue分页插件的前后端设备与应用
本文地址: http://yourctp.com/wangluo/javascript/278144.html

假设认为本文对您有所赞助请赞助本站

付出宝扫一扫赞助微信扫一扫赞助

  • 付出宝扫一扫赞助
  • 微信扫一扫赞助
  • 付出宝先领红包再赞助
    声明:凡注明"本站原创"的一切文字图片等材料,版权均属编程客栈一切,迎接转载,但务请注明出处。
    vue3修改link标签默许icon有效成绩详解前往列表
    Top