Vue分頁插件的前后端配置與使用
更新時(shí)間：2019年10月09日 14:15:31 作者：junhang7
這篇文章主要為大家詳細(xì)介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue分頁插件的前后端配置與使用，供大家參考，具體內(nèi)容如下
分頁插件的配置
<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 前端請(qǐng)求
* @return 返回給前端的數(shù)據(jù)
*/
@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);
}
}
實(shí)體類
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 {
/**
* 機(jī)構(gòu)名稱
*/
protected String name;
/**
* 機(jī)構(gòu)代碼
*/
protected String code;
/**
* 負(fù)責(zé)人
*/
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 {
/**
* 機(jī)構(gòu)名稱
*/
protected String name;
public OrganizationQueryConditionVO() {
}
}
2. 業(yè)務(wù)層代碼
/**
*
* @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;
}
實(shí)體類
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;
/**
* 機(jī)構(gòu)名稱
*/
protected String name;
/**
* 機(jī)構(gòu)代碼
*/
protected String code;
/**
* 負(fù)責(zé)人
*/
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;
/**
* 機(jī)構(gòu)名稱
*/
protected String name;
/**
* 機(jī)構(gòu)代碼
*/
protected String code;
/**
* 負(fù)責(zé)人
*/
protected String master;
/**
* 電話
*/
protected String tel;
/**
* 地址
*/
protected String address;
public Organization() {
}
}
3. DAO層
引用了通用mapper
前端中的代碼
導(dǎo)入element分頁插件
handleSizeChange：當(dāng)改變每頁顯示的數(shù)據(jù)量時(shí)，觸發(fā)該函數(shù)，頁面刷新，并跳轉(zhuǎn)到第一頁。
handleCurrentChange：跳轉(zhuǎn)到用戶所選擇的頁面
<!-- 組織機(jī)構(gòu)管理 -->
<!-- 新頁面 -->
<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 />
<!-- 操作區(qū) -->
<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>
<!-- 顯示數(shù)據(jù)字典的表單 -->
<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="機(jī)構(gòu)名稱" sortable width="120"></el-table-column>
<el-table-column prop="code" label="機(jī)構(gòu)代碼" sortable width="100"></el-table-column>
<el-table-column prop="master" label="負(fù)責(zé)人" 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="組織機(jī)構(gòu)名" :label-width="formLabelWidth" prop="name">
<el-input v-model="dialogDataValues.name" placeholder="組織機(jī)構(gòu)名"></el-input>
</el-form-item>
<el-form-item label="機(jī)構(gòu)代碼" :label-width="formLabelWidth" prop="code">
<el-input v-model="dialogDataValues.code" placeholder="機(jī)構(gòu)代碼"></el-input>
</el-form-item>
<el-form-item label="負(fù)責(zé)人" :label-width="formLabelWidth" prop="master">
<el-input v-model="dialogDataValues.master" placeholder="負(fù)責(zé)人"></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 {
// ===========================
// 前端屬性
// ===========================
//默認(rèn)隱藏編輯按鈕
visibleEdit: "none",
//默認(rèn)顯示新增按鈕
visibleSave: "",
// 添加彈窗顯示與否
isDialogShowed: false,
// 標(biāo)簽寬度
formLabelWidth: "120px",
// 在表格中顯示的數(shù)據(jù)
items: [],
// 添加彈窗中的數(shù)值
dialogDataValues: {
id: "",
name: "",
code: "",
master: "",
tel: "",
address: "",
status: ""
},
// 修改彈窗數(shù)值
form: {},
// 前端校驗(yàn) @blur 當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)blur事件
rules: {
name: [{ required: true, message: "組織機(jī)構(gòu)名稱必填", trigger: "blur" }],
code: [{ required: true, message: "組織機(jī)構(gòu)代碼必填", trigger: "blur" }],
// tel: [{ required: true, message: "組織機(jī)構(gòu)電話號(hào)碼必填", trigger: "blur" }],
// master: [{ required: true, message: "組織機(jī)構(gòu)負(fù)責(zé)人必填", trigger: "blur" }],
// address: [{ required: true, message: "組織機(jī)構(gòu)地址必填", trigger: "blur" }],
status: [{ required: true, message: "狀態(tài)必選", trigger: "blur" }]
},
// 彈窗數(shù)據(jù)右對(duì)齊
labelPosition: "right",
// 導(dǎo)入
fileUploadBtnText: "導(dǎo)入",
// 通過checkbox進(jìn)行多選的數(shù)據(jù)
selectedItems: {},
// 搜索框數(shù)據(jù)
searchKeywords: {},
//數(shù)據(jù)總量
recordNumber: 0,
//當(dāng)前頁數(shù)
currentPage: 1,
//當(dāng)前每頁數(shù)量：
currentPageSize: 10,
loading: true
};
},
// 頁面加載完成后加載數(shù)據(jù)
mounted: function() {
this.loadDataList();
},
methods: {
// ==========================
// 頁面處理
// ==========================
editRow(row){
this.showEditDialog(row)
},
//參數(shù)校驗(yàn)
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;
}
});
},
//狀態(tài)值的轉(zhuǎn)化
statusFormat(row, column) {
if (row.status === 0) {
return "否";
} else if (row.status === 1) {
return "是";
}
},
// 每一行多選選中時(shí)觸發(fā)該方法
handleSelectionChange(selectedItems) {
this.selectedItems = selectedItems;
},
// 顯示添加數(shù)據(jù)彈窗
showAddDialog() {
this.visibleSave = "";
this.visibleEdit = "none";
this.dialogTitle = "添加組織機(jī)構(gòu)";
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 = "";
},
// 顯示修改數(shù)據(jù)彈窗
showEditDialog(obj) {
this.visibleSave = "none";
this.visibleEdit = "";
this.dialogTitle = "修改組織機(jī)構(gòu)";
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: "未選中數(shù)據(jù)", duration: 1000});
} else {
this.$message({type: "error", message: "無法一次修改多個(gè)數(shù)據(jù)", duration: 1000});
}
},
// ==========================
// 數(shù)據(jù)處理
// ==========================
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: "網(wǎng)絡(luò)異常", type: 'error'})
_this.loading = false;
});
},
// 加載數(shù)據(jù)方法
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);
},
// 增加數(shù)據(jù)
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: "數(shù)據(jù)已成功插入",type: "success",duration: 1500});
this.loadDataList();
this.isDialogShowed = false;
} else {
this.$message({
type: "error",
message: "數(shù)據(jù)插入失敗 錯(cuò)誤碼："+resp.responseHead.code+" 錯(cuò)誤信息：" +resp.responseHead.message,
duration: 1000
});
}
}).catch(() => {});
},
// 編輯數(shù)據(jù)
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: "數(shù)據(jù)已成功修改", type: "success", duration: 1000});
this.loadDataList();
this.isDialogShowed = false;
} else {
this.$message({
type: "error",
message: "數(shù)據(jù)修改失敗 錯(cuò)誤碼："+resp.responseHead.code+" 錯(cuò)誤信息：" +resp.responseHead.message,
duration: 1000
});
}
}).catch(() => {});
},
//刪除數(shù)據(jù)
deleteData(datalist) {
deleteOrganization(datalist).then(resp => {
if (resp && resp.responseHead.code === "0") {
this.$notify({title: "成功", message: "數(shù)據(jù)已成功刪除", type: "success", duration: 1000});
// 若刪除成功則重新刷新頁面
this.loadDataList();
} else {
this.$notify({
title: "失敗",
message: "數(shù)據(jù)刪除失敗 錯(cuò)誤碼："+resp.responseHead.code+" 錯(cuò)誤信息：" +resp.responseHead.message,
type: "error",
duration: 1000
});
}
});
},
deleteSingleItem(obj) {
this.$confirm("確認(rèn)要?jiǎng)h除該數(shù)據(jù)嗎?", "信息", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.deleteData([{id: obj.id, version: obj.version}]);
}).catch(() => {
this.$message({type: "info",message: "已取消刪除", duration: 1000});
});
},
// 批量刪除數(shù)據(jù)
deleteMultipleItems() {
if (this.selectedItems.length == null || this.selectedItems.length == 0) {
this.$message({
type: "error",
message: "未選擇任何數(shù)據(jù)",
duration: 1000
});
} else {
this.$confirm("確認(rèn)要?jiǎng)h除該數(shù)據(jù)嗎?", "信息", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.deleteData(this.selectedItems);
}).catch(() => {
this.$message({type: "info",message: "已取消刪除", duration: 1000});
});
}
}
}
};
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3如何將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖
這篇文章主要介紹了vue3實(shí)現(xiàn)將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue CLI 2.x搭建vue(目錄最全分析),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法
這篇文章主要介紹了vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
ElementPlus表單rules校驗(yàn)的方法步驟
相信大家經(jīng)常都會(huì)遇到要處理表單驗(yàn)證的環(huán)節(jié),而我在最近的項(xiàng)目中也遇到需要做表單驗(yàn)證的業(yè)務(wù),下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗(yàn)的方法步驟,需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue.nextTick使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue前端傳空值、空字符串的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue實(shí)現(xiàn)聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聯(lián)動(dòng)選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
今天小編就為大家分享一篇基于Vue 服務(wù)端Cookies刪除的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue響應(yīng)式原理的的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
這篇文章主要介紹了vue filter 完美時(shí)間日期格式的方法，文中給大家提到了vue filter方法-時(shí)間格式化 的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-08