跟着JHipster学做项目 (17) Spring Boot处理分页和排序

java_augur

墨衍会员 · AI 创作全网分发码龄22年

关注

原创最新推荐文章于 2026-08-22 13:51:36 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

Vue前端字段排序，Spring Boot 集成Mybatis-plus 使用Oracle/MySQL，驼峰映射（下划线）问题实现Vue前端页面表格内，各字段都能自定义降序或升序排列展示。阅读详情

JHipster利用了Spring Boot的Pageable分页机制，前端排序是针对数据库数据，而非当前页面数据，充分满足了实际需求。下面分前端和后端两部分分别介绍一下它的实现方式。

前端利用两个辅助函数，向后端传递了分页参数：当前页page，每页条目size，排序属性prop,direction。本文以mongoDB为例。

sort函数中接收了排序属性和排序方向，同序情况下以id降序。

  public sort(): any {
    const result = [this.propOrder + ',' + (this.reverse ? 'desc' : 'asc')];
    if (this.propOrder !== 'id') {
      result.push('id');
    }
    return result;
  }

buildPaginationQueryOpts函数是组装了后端Pageable所需要的属性。

function buildPaginationQueryOpts(paginationQuery) {
  if (paginationQuery) {
    let sorts = '';
    for (const idx of Object.keys(paginationQuery.sort)) {
      if (sorts.length > 0) {
        sorts += '&';
      }
      sorts += 'sort=' + paginationQuery.sort[idx];
    }
    return `${sorts}&page=${paginationQuery.page}&size=${paginationQuery.size}`;
  }
  return '';
}

最后在retrieve中向后端发出请求：

  public retrieve(req?: any): Promise<any> {
    return axios.get(`api/admin/users?${buildPaginationQueryOpts(req)}`);
  }

例如：每页显示3行，显示第一页，以login升序排列，请求URL为：

http://localhost:9000/api/admin/users?sort=login,asc&sort=id&page=1&size=3

至此开始介绍后端接收请求后的分页和排序实现方法。

UserResource接收如上参数，利用Spring Boot自带机制，自动组合为Pageable对象，代码如下：

    @GetMapping("/users")
    @PreAuthorize("hasAuthority(\"" + AuthoritiesConstants.ADMIN + "\")")
    public ResponseEntity<List<AdminUserDTO>> getAllUsers(Pageable pageable) {
        log.debug("REST request to get all User for an admin");
        if (!onlyContainsAllowedProperties(pageable)) {
            return ResponseEntity.badRequest().build();
        }

        final Page<AdminUserDTO> page = userService.getAllManagedUsers(pageable);
        HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(ServletUriComponentsBuilder.fromCurrentRequest(), page);
        return new ResponseEntity<>(page.getContent(), headers, HttpStatus.OK);
    }

UserService就是简单利用userRepository来进行数据库查询，代码如下：

    public Page<AdminUserDTO> getAllManagedUsers(Pageable pageable) {
        return userRepository.findAll(pageable).map(AdminUserDTO::new);
    }

UserRepository继承了MongoRepository

@Repository
public interface UserRepository extends MongoRepository<User, String> {
    Optional<User> findOneByActivationKey(String activationKey);

    List<User> findAllByActivatedIsFalseAndActivationKeyIsNotNullAndCreatedDateBefore(Instant dateTime);

    Page<User> findAll(Pageable pageable);
}

Good Luck,

Cheers!

收录于