【VUE项目实战】22、获取用户列表数据并渲染

#【VUE项目实战】22、获取用户列表数据并渲染| 来源: 网络整理| 查看: 265

接上篇《21、用户列表开发-基本UI布局》上一篇我们实现了用户列表的基本UI结构，本篇我们来绘制用户列表样式，并获取用户列表数据进行展示。

一、获取用户列表数据

首先我们看一下后台的API接口，我们这次用到的是“用户数据列表”接口，查询参数有三个，分别是“查询参数”，“当前页码”和“每页显示条数”：然后我们回到Users.vue组件，在script区域完善一下逻辑结构，新增data数据区、生命周期函数created以及methods方法区：

export default { data(){ return {} }, created(){ }, methods: { } }

然后我们的数据肯定是在页面加载时就要进行获取的，所以我们的用户列表数据请求需要在生命周期函数created中执行：

created(){ this.getUsersList(); }

我们在methods区定义“getUsersList”函数，然后将请求的对象先在data区域封装好，使用之前我们用axios封装好的$http进行服务请求，使用解构函数将返回的对象封装在res对象中：

export default { data() { return { //获取用户列表的参数对象 queryInfo: { query: "", pagenum: 1, pagesize: 2, }, }; }, created() { this.getUsersList(); }, methods: { async getUsersList() { const { data: res } = await this.$http.get("users", { params: this.queryInfo, }); console.log(res); }, }, };

刷新首页，点击用户列表，我们按F12在控制台查看打印出来的res对象：可以看到获取管理员列表成功的反馈信息，然后我们打开data对象，可以看到一共反馈了2个用户数据（length是当前页的用户数，Total是所有的用户数）： res的结构知道了，我们创建userList对象接收users数组，total接收用户总数

export default { data() { return { //获取用户列表的参数对象 queryInfo: { query: "", pagenum: 1, pagesize: 2, }, userList : [], total: 0 }; }, created() { this.getUsersList(); }, methods: { async getUsersList() { const { data: res } = await this.$http.get("users", { params: this.queryInfo, }); if(res.meta.status!=200){ return this.$message.error("获取用户列表失败！"); } console.log(res); this.userList = res.data.users; this.total = res.data.total; }, }, };

对于users里的每个user，我们下一步进行渲染，展示在表格上。

二、渲染用户列表数据

我们将获取到的users数据解析，并渲染到页面上。我们这里使用的是element框架的Table表格组件，官网上有样例：我们拷贝样例的代码：