后端接口实现
修改DeptController类中的查询接口为带分页接口,代码如下:
重启后端项目,在Postman中进行测试,结果如图
前端实现
创建静态数据模板
首先使用Element组件Table表格构建静态表格数据模板,如图18-12所示,复制模板代码并覆盖PageOne页面,精简代码与数据库字段相对应。同时,引入分页模板代码如图18-13所示,当然大家可根据自己的喜好选择组件。
PageOne.vue组件代码如下
动态获取后台数据
在PageOne页面使用Axios请求后台数据接口,代码如下:
测试
经过上面两步后,页面显示效果如图