后台PageHelper与前台el-pagination分页实现

后台PageHelper使用

实现思路

首先在项目的依赖管理文件pom.xml中导入相关插件依赖。接着，在应用程序的配置文件application.yml中配置PageHelper的相关参数。最后，在业务逻辑层调用PageHelper的startPage()方法进行分页处理。PageHelper是一种物理分页插件，它的分页操作是在对数据库表进行查询之前执行的，属于“先分页再查询”的模式。

依赖管理

在项目的依赖管理文件中添加PageHelper的Spring Boot版本依赖：


     
    
    
     com.github.pagehelper
      
    
    
     pagehelper-spring-boot-starter
      
    
    
     1.2.5

应用程序配置

在应用程序的配置文件中配置PageHelper的数据库类型和分页策略：

pagehelper:  
    helperDialect: mysql  
    reasonable: true  
    supportMethodsArguments: true  
    params: count=countSql

业务逻辑实现

在服务层实现分页功能的具体操作：

public class DiscussServiceImpl implements IDiscussService {  
    private DiscussMapper discussMapper;  
    private CustomDiscussMapper customDiscussMapper;  
    @Override  
    public List
    
     > listByCourseId(Integer courseId, Integer page, Integer limit, String sort, String order) {  
        PageHelper.startPage(page, limit);  
        return customDiscussMapper.queryByCourseId(courseId, sort, order);  
    }  
    @Override  
    public long count(Integer courseId) {  
        DiscussExample example = new DiscussExample();  
        example.or().andCourseIdEqualTo(courseId).andLogicalDeleted(false);  
        return discussMapper.countByExample(example);  
    }  
}

前台el-pagination标签使用

实现思路

前台分页需要根据后台返回的总条数设置el-pagination标签的属性。通过动态获取当前页数和每页显示条数，将这些参数传递到后台处理接口，实现数据的动态加载。

页面实现

页面分页控件设置：

数据初始化

页面数据初始化：

data() {  
    return {  
        countAllQuestion: 0, // 某一课程下所有问题的数量  
        pageSize: 3, // 每页显示数  
        currentPage: 1 // 当前页  
    };  
}

方法实现

页面分页方法：

methods: {  
    handleSizeChange: function(pagesizes) {  
        this.pageSize = pagesizes;  
        this.listByCourseId();  
    },  
    handleCurrentChange: function(currentPages) {  
        this.currentPage = currentPages;  
        this.listByCourseId();  
    },  
    listByCourseId: function() {  
        const params = {  
            courseId: this.courseId,  
            page: this.currentPage,  
            pageSize: this.pageSize  
        };  
        api.listByCourseId(params).then(response => {  
            if (response.status === 200) {  
                this.questionList = response.data.data;  
            }  
        });  
    },  
    countAllQuestion: function() {  
        const params = {  
            courseId: this.courseId  
        };  
        api.countAllQuestion(params).then(response => {  
            if (response.status === 200) {  
                this.countAllQuestion = response.data.data;  
            }  
        });  
    }  
},  
created() {  
    this.countAllQuestion();  
    this.listByCourseId();  
    this.handleSizeChange();  
    this.handleCurrentChange();  
}

页面显示效果

通过以上配置，页面将实现动态分页加载的效果。每次用户切换分页或更改每页显示数时，都会自动触发数据的重新加载。整个实现过程通过PageHelper实现后台分页，结合Element UI的el-pagination标签实现前台分页的无缝衔接。

转载地址：http://fchfk.baihongyu.com/

你可能感兴趣的文章

Objective-C实现按位运算符乘以无符号数multiplyUnsigned算法（附完整源码）