Vue分頁插件的前后端配置與使用
更新時間：2019年10月09日 14:15:31 作者：junhang7
這篇文章主要為大家詳細介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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 前端請求
* @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);
}
}
實體類
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 {
/**
* 機構(gòu)名稱
*/
protected String name;
/**
* 機構(gòu)代碼
*/
protected String code;
/**
* 負責(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 {
/**
* 機構(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;
}
實體類
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;
/**
* 機構(gòu)名稱
*/
protected String name;
/**
* 機構(gòu)代碼
*/
protected String code;
/**
* 負責(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;
/**
* 機構(gòu)名稱
*/
protected String name;
/**
* 機構(gòu)代碼
*/
protected String code;
/**
* 負責(zé)人
*/
protected String master;
/**
* 電話
*/
protected String tel;
/**
* 地址
*/
protected String address;
public Organization() {
}
}
3. DAO層
引用了通用mapper
前端中的代碼
導(dǎo)入element分頁插件
handleSizeChange：當(dāng)改變每頁顯示的數(shù)據(jù)量時，觸發(fā)該函數(shù)，頁面刷新，并跳轉(zhuǎn)到第一頁。
handleCurrentChange：跳轉(zhuǎn)到用戶所選擇的頁面
<!-- 組織機構(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="機構(gòu)名稱" sortable width="120"></el-table-column>
<el-table-column prop="code" label="機構(gòu)代碼" sortable width="100"></el-table-column>
<el-table-column prop="master" label="負責(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="組織機構(gòu)名" :label-width="formLabelWidth" prop="name">
<el-input v-model="dialogDataValues.name" placeholder="組織機構(gòu)名"></el-input>
</el-form-item>
<el-form-item label="機構(gòu)代碼" :label-width="formLabelWidth" prop="code">
<el-input v-model="dialogDataValues.code" placeholder="機構(gòu)代碼"></el-input>
</el-form-item>
<el-form-item label="負責(zé)人" :label-width="formLabelWidth" prop="master">
<el-input v-model="dialogDataValues.master" placeholder="負責(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 {
// ===========================
// 前端屬性
// ===========================
//默認隱藏編輯按鈕
visibleEdit: "none",
//默認顯示新增按鈕
visibleSave: "",
// 添加彈窗顯示與否
isDialogShowed: false,
// 標(biāo)簽寬度
formLabelWidth: "120px",
// 在表格中顯示的數(shù)據(jù)
items: [],
// 添加彈窗中的數(shù)值
dialogDataValues: {
id: "",
name: "",
code: "",
master: "",
tel: "",
address: "",
status: ""
},
// 修改彈窗數(shù)值
form: {},
// 前端校驗 @blur 當(dāng)元素失去焦點時觸發(fā)blur事件
rules: {
name: [{ required: true, message: "組織機構(gòu)名稱必填", trigger: "blur" }],
code: [{ required: true, message: "組織機構(gòu)代碼必填", trigger: "blur" }],
// tel: [{ required: true, message: "組織機構(gòu)電話號碼必填", trigger: "blur" }],
// master: [{ required: true, message: "組織機構(gòu)負責(zé)人必填", trigger: "blur" }],
// address: [{ required: true, message: "組織機構(gòu)地址必填", trigger: "blur" }],
status: [{ required: true, message: "狀態(tài)必選", trigger: "blur" }]
},
// 彈窗數(shù)據(jù)右對齊
labelPosition: "right",
// 導(dǎo)入
fileUploadBtnText: "導(dǎo)入",
// 通過checkbox進行多選的數(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ù)校驗
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 "是";
}
},
// 每一行多選選中時觸發(fā)該方法
handleSelectionChange(selectedItems) {
this.selectedItems = selectedItems;
},
// 顯示添加數(shù)據(jù)彈窗
showAddDialog() {
this.visibleSave = "";
this.visibleEdit = "none";
this.dialogTitle = "添加組織機構(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 = "修改組織機構(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: "無法一次修改多個數(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ù)插入失敗 錯誤碼："+resp.responseHead.code+" 錯誤信息：" +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ù)修改失敗 錯誤碼："+resp.responseHead.code+" 錯誤信息：" +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ù)刪除失敗 錯誤碼："+resp.responseHead.code+" 錯誤信息：" +resp.responseHead.message,
type: "error",
duration: 1000
});
}
});
},
deleteSingleItem(obj) {
this.$confirm("確認要刪除該數(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("確認要刪除該數(shù)據(jù)嗎?", "信息", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.deleteData(this.selectedItems);
}).catch(() => {
this.$message({type: "info",message: "已取消刪除", duration: 1000});
});
}
}
}
};
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuex + keep-alive實現(xiàn)tab標(biāo)簽頁面緩存功能
這篇文章主要介紹了vuex + keep-alive實現(xiàn)tab標(biāo)簽頁面緩存功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
vue打包相關(guān)細節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細節(jié)整理(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue如何提升首屏加載速度實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的示例詳解
這篇文章主要給大家介紹了vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的相關(guān)知識,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vuejs實現(xiàn)下拉框菜單選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
vue使用echarts實現(xiàn)中國地圖和點擊省份進行查看功能
這篇文章主要介紹了vue使用echarts實現(xiàn)中國地圖和點擊省份進行查看功能,本文通過實例代碼給大家詳細講解，對vue echarts 中國地圖相關(guān)知識感興趣的朋友一起看看吧2022-12-12
vue-router默認hash模式——使用URL的hash來模擬一個完整的URL，于是當(dāng)URL改變時，頁面不會重新加載。這篇文章主要介紹了Vue Router去掉url中默認的錨點#,需要的朋友可以參考下2018-08-08
Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細代碼
本文分別使用?SFC（模板方式）和?tsx?方式對?Element?Plus?*el-menu*?組件進行二次封裝，實現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動態(tài)渲染菜單，對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)循環(huán)切換動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10