sprintboot+layui前后端分页实践

前言

近期开发的一个web系统中，最初所实现的“分页”功能，实质是假分页，后端接口一次性返回所有符合条件的数据， 前端显示时做了假分页展示。带来的影响是前后端加载数据性能不佳。

假分页

原为直接使用layui框架table模块开启page分页功能，此分页只是前端展示分页，分页切换不会触发分批获取后端数据。

真分页

前端分页展示数据，后端分页获取数据。前台向后台传递俩分页参数，一个curr,一个limit

case.html

<div style="width: 95%;height: auto;min-height: 700px;margin-left: 15px" >

    <table class="layui-hide" id="caseListTable" lay-filter="caseListTable"></table>

<div id="caseListTablePager" align="center"></div></div>

js脚本：

layui.laypage 基础使用方法详见：点击查看

function getCaseList(){

$.ajax({

    type:'post',

    dataType:'json',

    data: {curr:1, limit:10,api_url: $("#apiurl").val(),casename: $("#casename_input").val(),project: $("#project").find("option:selected").val()},

    url:'/getCaseList',

    success:function(data){

    showCaseList(data);

        laypage.render({

                elem:'caseListTablePager'

                ,count: data.count  //总记录数，后端返回的记录总数

                ,limit: data.pageSize//每页记录数，后端返回的pageSize数据，实际为前端切换分页传入

                ,prev:'<'

                ,next:'>'

                ,layout: ['prev','page','next','skip','count','limit']

    ,jump:function(obj, first){

    if(!first){//首页不执行

        //分页切换的回调

         $.ajax({

            type:'post',

            dataType:'json',

            data:{curr:obj.curr,limit:obj.limit,api_url: $("#apiurl").val(),casename: $("#casename_input").val(),project: $("#project").find("option:selected").val()},

    url:'/getCaseList',

    success:function(data){

    showCaseList(data);

}})}}});}})}

//展示获取用例列表

function showCaseList(data) {

    var caseArr ="";

    if(data.code=="0000"){

        caseArr = data.data;

        table.render({

            count: data.count,

            limit: data.pageSize,

            elem: '#caseListTable',

            cols: [[ {field: 'id', title: 'ID', align: 'center', sort: true, width: 80} ,

                    {field: 'caseName', title: '用例名称', align: 'center', sort: true, width: 300} ,

                    {field: 'url', title: '接口URL', align: 'center', minwidth: 420} ,

                    {field: 'serverKey', title: '所属环境', align: 'center', width: 200} ,

                    {field: 'modifier', title: '最后修改者', align: 'center', width: 150} ,

                    {title: '操作', width: 200, align: 'center', toolbar: '#caseEdit',} ]],

             data: caseArr

            //page: true //关闭系统分页，使用自定义分页getCaseList() }); }}

controller核心代码：根据前端传参curr和limit进行后端数据分页处理

caselist = testcase.findCaseUrlandcaseName('%' + url + '%','%' + caseName + '%',(curPage-1)*pageSize,pageSize);//分页获取数据

count = testcase.getCaseCountByUrlAndCasename('%' + url + '%', '%' + caseName + '%');//获取符合条件的记录总数

mapper核心代码：

SELECT * FROM t_case WHERE url LIKE #{url} AND casename LIKE #{caseName} AND project=#{project} AND state=0 limit #{startIndex},#{endIndex};

List<Case> findCaseUrlandcaseName(@Param("url") String url,@Param("caseName") String caseName,@Param("startIndex") int startIndex,@Param("endIndex") int endIndex);

效果展示

查询第一页10条

通过分页功能，查询第二页