神思者 ·上个小节我们用Swagger测试了后端分页方法，返回的内容是正确的，那么本小节我们写前端的JS代码，把查询出来的数据显示到VUE页面上面。
一、加载下拉列表数据
在用户管理页面中有的查询条件做成了下拉列表控件，例如性别和状态两个列表的内容不需要查询数据库，而角色和部门两个列表的选项需要查询数据库来生成。
在后端的DeptController中有searchAllDept()函数返回所有部门记录，在RoleController中有searchAllRole()函数返回所有的角色记录。前端页面中有loadRoleList()和loadDeptList()分别加载角色和部门记录，然后输出到下拉列表。
在Vue的声明周期回调函数created()中调用了loadRoleList()和loadDeptList()函数，所以可以保证用户管理页面显示的时候，部门列表和角色列表的数据都是从数据库中查询得来的。
created: function() {
this.loadRoleList();
this.loadDeptList();
}
二、加载用户记录
用户管理页面的视图层部分包含了表格控件，我们只需要编写Ajax代码从后端项目获取用户记录，显示在表格里面即可。<el-table>标签中的:data="dataList"意味着从模型层的dataList数组提取用户记录，看来我们要写的Ajax代码获取了服务端数据之后，要把用户记录存放在模型层的dataList变量里面。
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
cell-style="padding: 4px 0"
style="width: 100%;"
size="medium"
>
<el-table-column type="selection" header-align="center" align="center" width="50" />
<el-table-column type="index" header-align="center" align="center" width="100" label="序号">
<template #default="scope">
<span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column prop="name" header-align="center" align="center" min-width="100" label="姓名" />
<el-table-column prop="sex" header-align="center" align="center" min-width="60" label="性别" />
<el-table-column prop="tel" header-align="center" align="center" min-width="130" label="电话" />
<el-table-column
prop="email"
header-align="center"
align="center"
min-width="240"
label="邮箱"
:show-overflow-tooltip="true"
/>
<el-table-column prop="hiredate" header-align="center" align="center" min-width="130" label="入职日期" />
<el-table-column
prop="roles"
header-align="center"
align="center"
min-width="150"
label="角色"
:show-overflow-tooltip="true"
/>
<el-table-column prop="dept" header-align="center" align="center" min-width="120" label="部门" />
<el-table-column prop="status" header-align="center" align="center" min-width="100" label="状态" />
<el-table-column header-align="center" align="center" width="150" label="操作">
<template #default="scope">
<el-button
type="text"
size="medium"
v-if="isAuth(['ROOT', 'USER:UPDATE'])"
@click="updateHandle(scope.row.id)"
>
修改
</el-button>
<el-button
type="text"
size="medium"
v-if="isAuth(['ROOT', 'USER:UPDATE'])"
:disabled="scope.row.status == '离职' || scope.row.root"
@click="dimissHandle(scope.row.id)"
>
离职
</el-button>
<el-button
type="text"
size="medium"
:disabled="scope.row.root"
v-if="isAuth(['ROOT', 'USER:DELETE'])"
@click="deleteHandle(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
上个小节后端返回的R对象中绑定了PageUtils对象，我们要弄明白PageUtils类中有什么变量，我们怎么把分页数据提取出来。
@Data
public class PageUtils implements Serializable {
//总记录数
private long totalCount;
//每页记录数
private int pageSize;
//总页数
private int totalPage;
//当前页数
private int pageIndex;
//列表数据
private List list;
public PageUtils(List list, long totalCount, int pageIndex, int pageSize) {
this.list = list;
this.totalCount = totalCount;
this.pageSize = pageSize;
this.pageIndex = pageIndex;
this.totalPage = (int) Math.ceil((double) totalCount / pageSize);
}
}
我们在user.vue页面中声明loadDataList()函数，发出Ajax请求查询用户记录，然后把数据更新到模型层的dataList变量。
loadDataList: function() {
let that = this;
//请求后端数据的时候，让表格出现循环滚动的等待图标
that.dataListLoading = true;
let data = {
page: that.pageIndex,
length: that.pageSize,
name: that.dataForm.name,
sex: that.dataForm.sex,
role: that.dataForm.role,
deptId: that.dataForm.deptId,
status: that.dataForm.status
};
that.$http('user/searchUserByPage', 'POST', data, true, function(resp) {
let page = resp.page;
let list = page.list;
for (let one of list) {
if (one.status == 1) {
one.status = '在职';
} else if (one.status == 2) {
one.status = '离职';
}
}
that.dataList = list;
that.totalCount = page.totalCount;
that.dataListLoading = false;
});
},
在created()函数中调用loadDataList()函数
created: function() {
this.loadDataList();
this.loadRoleList();
this.loadDeptList();
}
三、分页查询
因为用户信息是分页加载的，所以在页面上有分页控件，用户可以修改每页显示的记录数量，也可以前后翻动页面。这些操作都需要有对应的回调函数来调用loadDataList()函数，重新执行用户信息查询。
分页控件的标签如下，size-change事件是用户改变每页记录数量触发的；current-change事件是用户翻页触发的，这两个事件的回调函数都需要我们来实现。
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50]"
:page-size="pageSize"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
sizeChangeHandle(val) {
this.pageSize = val;
//更改每页显示记录数量后，都从第一页开始查询
this.pageIndex = 1;
this.loadDataList();
},
currentChangeHandle(val) {
this.pageIndex = val;
this.loadDataList();
},
四、执行有条件查询
我们进入到用户管理页面，默认执行的是无条件查询所有用户的分页记录。如果想要执行有条件查询，我们要给查询按钮设置点击事件和回调函数。
<el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
searchHandle: function() {
//先执行表单验证
this.$refs['dataForm'].validate(valid => {
if (valid) {
//清理页面上的表单验证结果
this.$refs['dataForm'].clearValidate();
//不允许上传空字符串给后端，但是可以传null值
if (this.dataForm.name == '') {
this.dataForm.name = null;
}
//如果当前页面不是第一页，则跳转到第一页显示查询的结果
if (this.pageIndex != 1) {
this.pageIndex = 1;
}
this.loadDataList();
} else {
return false;
}
});
},
2024 imooc.com All Rights Reserved |