sprintboot+layui前后端分页实践

前言

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

假分页

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

image

真分页

前端分页展示数据，后端分页获取数据。前台向后台传递俩分页参数，一个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 = caseservice.selectCaseList(tcase,(curPage-1)*pageSize,pageSize);//依赖前端传参实现后端分页查询
int count = caseservice.selectCaseCount(tcase);//符合条件的记录总数，供前端分页计算使用

service核心代码：

public int selectCaseCount(Case tcase) {
        return caseMapper.selectCaseCount(tcase);
    }

public List<Case> selectCaseList(@Param("tcase")Case tcase, @Param("startIndex")int startIndex, @Param("endIndex")int endIndex) {
        return caseMapper.selectCaseList(tcase, startIndex, endIndex);
    }

mapper核心代码：

public int selectCaseCount(Case tcase);
List<Case> selectCaseList(@Param("tcase")Case tcase, @Param("startIndex")int startIndex, @Param("endIndex")int endIndex);

mapper.xml如下：

<select id="selectCaseList" resultMap="result">
        SELECT * FROM t_case WHERE state=0
        <if test="tcase.url != null">
            AND url like "%"#{tcase.url}"%"
        </if>
        <if test="tcase.caseName != null">
            AND casename like "%"#{tcase.caseName}"%"
        </if>
        <if test="tcase.project != null">
            AND project = #{tcase.project}
        </if>
        <if test="startIndex != null and endIndex != null">
            limit #{startIndex},#{endIndex};
        </if>
    </select>

    <select id="selectCaseCount" resultType="java.lang.Integer" parameterType="com.xxx.xxxx.domain.Case">
        SELECT count(*) FROM t_case WHERE state=0
        <if test="url != null">
            AND url like "%"#{url}"%"
        </if>
        <if test="caseName != null">
            AND casename like "%"#{caseName}"%"
        </if>
        <if test="project != null">
            AND project = #{project}
        </if>
    </select>

效果展示

效果展示

查询第一页10条

查询第一页请求

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

查询第二页请求