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

以下是一个示例代码，其中包括了Spring Boot整合MyBatis-Plus进行分页查询的实现以及前端页面的展示。

后端代码：

@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);
    }

}

前端代码：

<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 发起分页查询请求，并将查询结果渲染到页面上。