springboot 整合mybatis-plus 分页查询附加前端的代码

以下是一个示例代码，其中包括了Spring Boot整合MyBatis-Plus进行分页查询的实现以及前端页面的展示。 后端代码： ```java @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; /** * 分页查询用户列表 */ @GetMapping("/list") public ResultVo list(Page<User> page) { // 查询条件封装在 QueryWrapper 对象中 QueryWrapper<User> wrapper = new QueryWrapper<>(); wrapper.eq("status", 1); // 查询状态为1的用户 // 执行分页查询 userService.page(page, wrapper); // 将查询结果封装为 ResultVo 对象返回给前端 return ResultVo.success(page); } } ``` 前端代码： ```html <table> <thead> <tr> <th>用户名</th> <th>年龄</th> <th>手机号</th> </tr> </thead> <tbody id="user_list"></tbody> </table> <div id="pagination"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script> <script> $(function() { // 初始化分页组件 $('#pagination').twbsPagination({ totalPages: 1, visiblePages: 5, onPageClick: function(event, page) { // 发起分页查询请求 $.get('/user/list', { page: page }, function(res) { if (res.code === 200) { // 渲染查询结果到页面 var html = ''; res.data.records.forEach(function(user) { html += '<tr>'; html += '<td>' + user.username + '</td>'; html += '<td>' + user.age + '</td>'; html += '<td>' + user.mobile + '</td>'; html += '</tr>'; }); $('#user_list').html(html); // 更新分页组件 $('#pagination').twbsPagination('destroy'); $('#pagination').twbsPagination({ totalPages: res.data.pages, visiblePages: 5, startPage: res.data.current, first: '首页', prev: '上一页', next: '下一页', last: '末页', onPageClick: function(event, page) { // 发起分页查询请求 $.get('/user/list', { page: page }, function(res) { if (res.code === 200) { // 渲染查询结果到页面 var html = ''; res.data.records.forEach(function(user) { html += '<tr>'; html += '<td>' + user.username + '</td>'; html += '<td>' + user.age + '</td>'; html += '<td>' + user.mobile + '</td>'; html += '</tr>'; }); $('#user_list').html(html); } }); } }); } }); } }); }); </script> ``` 在上面的代码中，我们使用了 MyBatis-Plus 提供的 `Page` 类来进行分页查询，具体的查询条件通过 `QueryWrapper` 对象进行封装。在前端页面中，我们使用了 `jquery.twbsPagination` 插件来实现分页组件，并通过 AJAX 发起分页查询请求，并将查询结果渲染到页面上。