3-8 查询用户分页数据（前端）_企业级在线办公系统-慕课网

上个小节我们用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;
        }
    });
},