美文网首页layui入门
sprintboot+layui前后端分页实践

sprintboot+layui前后端分页实践

作者: 9f2574578be9 | 来源:发表于2019-01-08 13:46 被阅读0次

前言

近期开发的一个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条

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

相关文章

  • sprintboot+layui前后端分页实践

    前言 近期开发的一个web系统中,最初所实现的“分页”功能,实质是假分页,后端接口一次性返回所有符合条件的数据, ...

  • sprintboot+layui前后端分页实践

    前言 近期开发的一个web系统中,最初所实现的“分页”功能,实质是假分页,后端接口一次性返回所有符合条件的数据, ...

  • 前后端开发之分页操作

    分页操作的做法有很多种,可以通过前端分页,也可以通过后端分页。在此本人在后端分页(基于spring boot+vu...

  • 前后端开发之分页操作

    分页操作的做法有很多种,可以通过前端分页,也可以通过后端分页。在此本人在后端分页(基于spring boot+vu...

  • elementUI实现分页

    分页的两种方式。前端分页,后端分页。两种方式各有个的优缺点吧。 前端分页:后台只需将数据返回,不需要做过多处理,前...

  • 下拉刷新,上拉加载插件dropload.js使用总结

    前端展示php代码; 后端分页接口

  • ng-alain中的st表格

    后端控制分页的st表格使用 数据列初始化 ts 后端接口获取data ts 表格分页设置 ts change回调 ...

  • Spring Boot + JPA + Freemarker 实

    Spring Boot + JPA + Freemarker 实现后端分页 完整示例 界面效果 前端代码 后端代码...

  • 模板接口

    目录 后端模板匹配实现过程 1. 后端模板匹配实现过程属性 接口功能 返回用户照片分页信息,并按照模板内容和分页照...

  • Mybatis分页插件PageHelper

    在实际的项目开发中,常常需要使用到分页,分页方式分为两种:前端分页和后端分页。前端分页:一次ajax请求数据的所有...

网友评论

    本文标题:sprintboot+layui前后端分页实践

    本文链接:https://www.haomeiwen.com/subject/lbsvrqtx.html