springboot+pagehelper+vue分页

### 实现Spring Boot与PageHelper及Vue.js分页功能集成 #### 后端配置 为了使 Spring Boot 应用程序能够支持分页查询，在 `pom.xml` 文件中引入必要的依赖项[^2]： ```xml <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.4.2</version> </dependency> ``` 接着定义数据访问层接口 ArticleMapper 并编写 SQL 映射语句来执行带条件的分页检索操作。这里给出一个简单的例子，用于从数据库表 t_article 中按标题模糊匹配并返回指定页面的数据记录集合[^3]。 ```java public interface ArticleMapper { List<Article> selectByPage(@Param("title") String title, @Param("pageNum") int pageNum, @Param("pageSize") int pageSize); } ``` 对应的 XML 配置如下所示： ```xml <select id="selectByPage" parameterType="map" resultType="Article"> SELECT * FROM t_article WHERE title LIKE CONCAT('%', #{title}, '%') LIMIT #{(pageNum - 1) * pageSize}, #{pageSize} </select> ``` 注意上述代码片段中的 LIMIT 子句实现了 MySQL 数据库特有的分页机制；对于其他类型的 RDBMS 可能需要调整相应的语法形式。 在 Service 层调用此方法之前先设置好 PageHelper 的参数即可完成整个流程的设计工作。 #### 前端实现 前端部分采用 Vue.js 单文件组件的形式构建视图界面[^1]。下面展示了一个基本的例子，它展示了如何通过 HTTP 请求获取服务器响应并将结果显示在一个表格内，同时提供翻页按钮让用户浏览不同页码的内容。 ```html <!-- Pagination.vue --> <template> <div class="articles-list"> <!-- 表格区域 --> <table border="1px solid black"> <thead> <tr> <th>ID</th> <th>Title</th> </tr> </thead> <tbody> <tr v-for="(item,index) in articlesList" :key="index"> <td>{{ item.id }}</td> <td>{{ item.title }}</td> </tr> </tbody> </table> <!-- 分页器 --> <el-pagination background layout="prev, pager, next" :total="totalElements" :current-page.sync="currentPage" @size-change="handleSizeChange" @current-change="fetchData"></el-pagination> </div> </template> <script> import axios from 'axios'; export default { name: "Pagination", data() { return { currentPage: 1, totalElements: null, articlesList: [], loading: false, params: {} }; }, methods: { fetchData(pageNum = this.currentPage) { const url = `/api/articles?page=${pageNum}&size=5`; axios.get(url).then(response => { let res = response.data; this.articlesList = res.content || []; this.totalElements = res.totalElements; console.log('Fetched Data:', res); }).catch(error => { alert(`Error occurred while fetching data ${error}`); }); } }, mounted() { this.fetchData(); } }; </script> <style scoped> /* Add some styles here */ </style> ``` 在这个案例里，每当用户点击不同的页数链接时都会触发 `@current-change` 事件处理器函数 `fetchData()` ，该函数会向后端发送带有新页号的新请求从而更新当前显示的文章列表。