VUE 数据分页

只要涉及到数据查询，通常我们都会进行分页查询。

假设你的表中有上百万条记录，不分页的话，我们不可能一次性将所有数据全部都载入到前端吧，那前后端都早就崩溃了。

结合 Spring

Spring 和 Vue 都提供了开箱即用的分页功能。

Spring 主要用来处理后端的分页查询，VUE 主要在前端展示页面和进行下一个页面的查询。

有关后端 Spring 如何进行分页查询的方法，请参考：Spring Data @Repository 的分页查询中的文章。

如果你配置得当，Spring 会将整个查询的页面信息发送给前端。

比如我们说的这一部分，在这部分中，我们会知道总共查询的记录有多少，每一页的大小，一共有多少页，当前是第几页等分页最重要的信息。

VUE

VUE 的前端可以用 Pagination 这个组件 Pagination | Components | BootstrapVue

我们直接在前端调用模板，将参数设置进来就完成了。

代码可以精简到只有下面几句话：

            <b-pagination
                v-model="pagedData.number"
                :total-rows="pagedData.totalElements"
                :per-page="pagedData.size"
                @click="pageSearch(pagedData.number -1)"
                class="pagination pagination-rounded justify-content-end mb-2"
            ></b-pagination>