后端

Mybatis-PageHelper/wikis/zh/HowToUse.md at master · pagehelper/Mybatis-PageHelper · GitHub

加入分页插件

 <dependency>
     <groupId>com.github.pagehelper</groupId>
     <artifactId>pagehelper</artifactId>
     <version>5.2.1</version>
 </dependency>

修改mybatis-config.xml, 配置分页拦截器

<!--
 plugins 标签要放在typeAliases 标签后面-->
 <plugins>
     <plugin interceptor="com.github.pagehelper.PageInterceptor">
         <!-- 分页合理化，如果pageNum>pages，就让他查询最后一页。
        如果pageNum<0，就查询第一页-->
         <property name="reasonable" value="true"/>
     </plugin>
 </plugins>

修改FurnController.java 增加分页查询处理

    @ResponseBody
    @RequestMapping("/furnsByPage")
    public Msg listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "5") Integer pageSize) {
        // 查询前，需要调用 PageHelper.startPage ()
        // 看下源码 startPage (int pageNum, int pageSize)
        PageHelper.startPage(pageNum, pageSize);
        // 在 PageHelper.startPage () 后调用 findAll, 就是分页查询 (物理分页有 limit)  
        List<Furn> furnList = furnService.findAll();
        // 分页查询完之后，可以使用 pageInfo 来包装查询后的结果，
        // 1. 只需要将 pageInfo 交给页面就行
        // 2. pageInfo 封装了详细的分页信息，包括查询出来的数据
        // 比如总共有多少页，当前是第几页等
        // 3. 看源码 PageInfo (List<T> list, int navigatePages)
        PageInfo pageInfo = new PageInfo(furnList, pageSize);
        return Msg.success().add("pageInfo", pageInfo);
    }

前端

https://element-plus.org/zh-CN/component/pagination

//分页数据
const pageData = ref({
    currentPage:1,
    pageSize:10,
    total:0,
    pageCount:0,
    pageSizes:[10, 20, 50, 100]
})

<el-pagination 
        background layout=" sizes, prev, pager, next, jumper,->,total" 
        :total="pageData.total" 
        size="default" 
        class="pagination"
        :page-sizes="pageData.pageSizes"
        :page-count="pageData.pageCount"
        v-model:current-page="pageData.currentPage"
        v-model:page-size="pageData.pageSize"
        @size-change="render" 
        @current-change="render"
        />

render函数

const render = async function(){
    const res = await getFurnsRequest(pageData.value.currentPage,pageData.value.pageSize);
    console.log(res);
    const pageInfo = res.data.pageInfo;
    pageData.value.total = pageInfo.total;
    pageData.value.pageCount = pageInfo.pages;
    pageData.value.currentPage = pageInfo.pageNum;
    pageData.value.pageSize = pageInfo.pageSize;
    tableData.value = pageInfo.list;
}