UserList.vue组件中用钩子函数初始化第一页的分页数据

UserList.vue组件中用钩子函数初始化第一页的分页数据

需求

初始状态，会利用钩子函数，查询第一页的分页数据，然后显示在UserList.vue组件的表格中。如下图：

created钩子函数的代码

getUserList方法

getUserList方法，用来为userList和total数据赋值，如下图：

UserList.vue组件中的分页数据

如下图：

SpringBoot后端控制器中接收pageuser请求的方法getUserList

因为后端需要接收前端传递来的Page这个json对象，所以要在后端写一个与之对应的Page实体类，这样方便接收前端传递来的参数，Page实体类如下图：

SpringBoot后端中的getUserList方法，如下图：

动态代理接口UserDao中的getAllUser方法

如下图：

UserDao.xml映射文件中的sql语句

如下图：

把钩子函数初始化的分页数据渲染到UserList.vue组件中显示用户信息的表格中

存储用户信息的表格，如下图：

钩子函数执行之后，当前页面的数据，都会存储到userList集合中，如下图：

使用elment ui中的表格显示userList集合中的用户数据，如下图：

测试

首先进入登录页面，如下图：

然后点击登录，进入首页，看一下第一页的数据能否被显示到，UserList.vue组件的表格处，发现可以，如下图：