datapip使用之（6）——典型应用：为vue项目提供数据接口实现分页

关键字：datapip，vue，elementUI，分页

前 言：本文在“datapip使用之（5）”一文实现CRUD的基础上，介绍数据分页的实现，包括前端分页、后端分页、前后端混合分页。

一、准备工作

为了方便地调整某些参数，也为了举例方便，在vue项目端新建文件

E:\vuepro\vueproject-master\static\common.js，以常量的方式定义一些全局性的参数，如下图：

然后，在E:\vuepro\vueproject-master\index.html文件中引入common.js，如下图：

这样就可以在Goodes.vue等文件中使用common对象了。 

也可以将某些参数挂载到Vue原型中，便于使用。如下是main.js部分代码截图，红框内挂载了一些参数到Vue原型中：

二、前端分页

前端分页就是一次请求返回所有数据，再由前端控制翻页逻辑。

原理上，前端分页可以说是三种分页方式中相对最不合理的，如果查询结果的数据量过多，会占用过多的客户端内存，导致客户端的运行性能下降，甚至宕机崩溃。另外，在前端翻页的过程中，如果后端数据有更新，而前端没有数据同步机制，则会导致前后端数据的不一致，出现所谓脏数据。

不过在数据量较少、数据更新不频繁的应用中可以减少请求次数，减轻服务器的响应负担，所以采用哪种手段取决于实际情况。

实现前端分页不涉及datapip项目端的设置，仅在vue项目端修改代码即可。详见Goods.vue文件内的getdataPagefront函数。关键注意变量tempListData，它存储了后端返回的所有记录，前端翻页时根据页码和每页条数从其中截取数据，再赋值给table组件对应的数据变量。

三、后端分页

后端分页就是将前端的当前页码，作为获取数据库实际记录的当前页码，将前端的每页记录数，作为获取数据库实际记录的条数。

后端分页可能对服务器的访问较频繁，服务器压力较大，但数据一致性好。

使用datapip实现后端分页，不用编写后端代码，只要稍做配置，前端直接传递当前页码和每页记录条数即可。

1. datapip端的配置

后端分页需要datapip的设置来配合异步查询。打开文件D:\xampp\tomcat\webapps\datapip\SqlCommand\goods_sel_all.json，添加配置项，如下图：

2.vue项目端代码

 详见Goods.vue文件内的getdataPageback函数。关键注意在异步请求参数中给定当前页码和每页记录条数，如下图：

四、前后端混合分页

混合分页就是在前后端同时进行分页逻辑的处理。

举例来说，假如服务器端每次返回100条数据并存储到客户端，客户端每页显示10条数据，那么客户端在翻页到11页之前均使用客户端数据，不请求服务器，翻页到11页后，请求服务器再返回后续100条数据存储到客户端，客户端在翻页到第21页之前使用客户端数据，不会请求服务器。以此类推。

原理上混合分页是最合理的，根据业务特点，如果设置合理，既能保证前端的性能、用户体验以及数据的一致性，也能减轻对服务器的访问压力。

注意：实际当中几乎很少通过使用混合分页来提高业务性能或用户体验，而是通过诸如缓存机制、库优化、查询优化等手段来提供保障。

1.datapip端的配置

与后端分页相同，不再赘述。

2.vue项目端代码

详见Goods.vue文件内的getdataPagemix函数。（注：代码未精简）

完整项目下载：

vue+datapip(CRUD).rar-Web开发文档类资源-CSDN下载“datapip使用之（4）（5）（6）”的完整代码。包括datapip端和vue端两个独立的项目。更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/way_hj/76477294