一、分页查询(引用了element框架)

思路:

  Sql语句:select * from <表名> limit <从第几条开始查询>,<查询多少条数据>

     例子:select * from user limit 2,10;

 

前端:传递两个数据给后端:begin,size 

但是我们分页查询的页面肯定不会让用户从第几条开始查询的这种选项,我们页面中应该是有第几页和显示多少条数据

如图:

 

 

所以我们传递的数据要进行运算才能变成后端需要接收的数据(这个运算可以放在后端运算也可以,我这里是前端进行数据处理)

 

 页数=从第几条开始查询=》(当前页数-1)*查询多少条数据

 例:(2-1)*5=5   :第二页就是从数据库表中的第五条数据开始查询,查询五条数据

 ?/条=查询多少条数据

 

后端:接收前端穿过来的两个数据进行数据库的查询

这里我用的是SpringBoot+Mybatis

步骤一:首页创建实体类:

根据数据库对应的表创建相对应的实体类

 

步骤二:创建接口并且封装该方法

 

 

 步骤三:在控制调用该方法并且创建接口

 

 到此,分页的后端就完成了。

 

前端:消费后端的服务

步骤一:在vue中定义两个数组

 

 

 

步骤二:写分页查询的方法

 

 

 

步骤三:查询多少当前页数((页数-1)*显示的数据)

 

步骤四:查询多少条数据的方法

 

内容来源于网络如有侵权请私信删除