项目-带分页数据查询

简介: 项目-带分页数据查询

后端接口实现

修改DeptController类中的查询接口为带分页接口,代码如下:

重启后端项目,在Postman中进行测试,结果如图

前端实现

创建静态数据模板

首先使用Element组件Table表格构建静态表格数据模板,如图18-12所示,复制模板代码并覆盖PageOne页面,精简代码与数据库字段相对应。同时,引入分页模板代码如图18-13所示,当然大家可根据自己的喜好选择组件。

PageOne.vue组件代码如下

动态获取后台数据

在PageOne页面使用Axios请求后台数据接口,代码如下:

测试

经过上面两步后,页面显示效果如图


相关文章
|
SQL 前端开发 JavaScript
eggjs 怎么实现获取账单列表接口并且实现列表数据分页查询功能?
eggjs 怎么实现获取账单列表接口并且实现列表数据分页查询功能?
199 0
eggjs 怎么实现获取账单列表接口并且实现列表数据分页查询功能?
|
4月前
|
存储 关系型数据库 MySQL
mysql数据库查询时用到的分页方法有哪些
【8月更文挑战第16天】在MySQL中,实现分页的主要方法包括:1)使用`LIMIT`子句,简单直接但随页数增加性能下降;2)通过子查询优化`LIMIT`分页,提高大页码时的查询效率;3)利用存储过程封装分页逻辑,便于复用但需额外维护;4)借助MySQL变量实现,可能提供更好的性能但实现较复杂。这些方法各有优缺点,可根据实际需求选择适用方案。
457 2
|
4月前
|
NoSQL 关系型数据库 MySQL
当查询的数据来自多个数据源,有哪些好的分页策略?
当查询的数据来自多个数据源,有哪些好的分页策略?
88 9
|
Java
jpa实现增删改查,分页,自定义查询,jpql查询
jpa实现增删改查,分页,自定义查询,jpql查询
97 0
|
SQL Oracle 关系型数据库
什么是分页?如何使用分页?(一)
什么是分页?如何使用分页?
193 0
|
前端开发 Java UED
通用分页集模糊,全部查询,分页查询为一体(2)演示,优化上篇通用查询分页
通用分页集模糊,全部查询,分页查询为一体(2)演示,优化上篇通用查询分页
|
SQL 前端开发
JavaWeb12(实现基础分页&模糊查询的分页)
JavaWeb12(实现基础分页&模糊查询的分页)
|
SQL 存储 关系型数据库
什么是分页?如何使用分页?(二)
什么是分页?如何使用分页?
86 0
|
SQL 关系型数据库 MySQL
基础DQL(数据查询)——排序查询和分页查询
基础DQL(数据查询)——排序查询和分页查询
164 0
基础DQL(数据查询)——排序查询和分页查询
基础DQL(数据查询)——基础查询
基础DQL(数据查询)——基础查询
126 0
基础DQL(数据查询)——基础查询

热门文章

最新文章