vue+springboot分页交互-白红宇

vue+springboot分页交互

阅读量：4302 次

发布时间：2019-05-27

本文共 4690 字，大约阅读时间需要 15 分钟。

本篇讲解下vue和springboot结合的项目中，分页前后台如何实现。(前后台交互格式JSON)

本篇需要spring和springboot的基础，就不多讲。

1.springboot

spring中分页相关的几个类和注解

Pageable

@PageableDefault

Page

后台跟数据库交互的使用JPA方式，还用到了JPA多条件查询，不明白了可以查看

1-1.实体类

先介绍介个实体类和用到的工具类

entity实体类

@Entity@Table(name = "tools_sys", schema = "iworkh_tool")public class ToolsSysEntity {
       @Id    @Column(length = 32, name = "id")    private String id;    @Column(length = 20, name = "sys_name")    private String sysName;    @Column(length = 2, name = "order_num")    private int orderNum = 1;    @Column(name = "visible_flag")    private boolean visibleFlag = true;    @Column(length = 500, name = "description")    private String description;    ...省略setter、getter方法...

搜索参数类

public class ToolsSysSearchVo {
       private String sysName;    private boolean visibleFlag = true;    private int orderNum = 1;    ..省略setter、getter方法...}

结果返回类

public class ResponseData
   
     {
       private boolean success;    private int code = 20000;    private String message;    private T data;    ...省略setter、getter方法...}

Response工具类：

public class ResponseUtils {
       public static 
   
     void setSuccessData(ResponseData
    
      responseData, T data){
           responseData.setSuccess(true);        // 成功状态码返回20000        responseData.setCode(20000);        responseData.setData(data);    }    public static  
     
       void setIllegalArgsError(ResponseData
      
        responseData, String errMsg){
           // 非法入参错误状态码返回30000        responseData.setCode(30000);        responseData.setMessage(errMsg);    }    public static  
       
         void setServerError(ResponseData
        
          responseData, String errMsg){ // 服务端错误状态码返回40000 responseData.setCode(40000); responseData.setMessage(errMsg); }}

1-2.dao

@Repositorypublic interface ToolsSysDao extends PagingAndSortingRepository
   
    ,        JpaSpecificationExecutor
    
      {
   }

1-3.service

@Servicepublic class ToolsSysService extends BaseService {
       @Autowired    private ToolsSysDao toolsSysDao;    public Page
   
     findByPage(ToolsSysSearchVo searchVo, Pageable pageable){
           Specification specificationQuery = new Specification
    
     (){
               @Override            public Predicate toPredicate(Root
     
       root, CriteriaQuery
       criteriaQuery, CriteriaBuilder criteriaBuilder) {
                   List
      
        list = new ArrayList<>();                if (StringUtils.isNoneBlank(searchVo.getSysName())) {
                       Path
       
         sysNamePath = root.get("sysName");                    Predicate sysNameLike = criteriaBuilder.like(sysNamePath, "%"+searchVo.getSysName()+"%");                    list.add(criteriaBuilder.and(sysNameLike));                }                Predicate[] p = new Predicate[list.size()];                return criteriaBuilder.and(list.toArray(p));            }        };        Page
        
          pageRows = toolsSysDao.findAll(specificationQuery, pageable); return pageRows; }}

这为了能够大家能够理解，就没有使用lambda表达式和一些简写使用。
这使用了多条件分页查询。这不是本篇重点。本篇重点是vue和spring的controller如何分页交互。所以具体JPA多条件如何使用请查看

1-4.controller

@RestController@RequestMapping("/api/toolssys")public class ToolsSysController {
       @Autowired    private ToolsSysService toolsSysService;    @PostMapping("/findByPage")    public ResponseData
   
    
     > findByPage(@RequestBody ToolsSysSearchVo searchVo,             @PageableDefault(sort = {
   "orderNum"},direction = Sort.Direction.DESC) Pageable pageable) {
           ResponseData
     
      
       > result = new ResponseData<>();        Page
       
         pageData = toolsSysService.findByPage(searchVo, pageable);        ResponseUtils.setSuccessData(result, pageData);        return result;    }}

这使用Pageable来介绍分页参数，并配合@PageableDefault注解，指定默认的排序或者页数等参数。
返回值是Page对象，交给前台进行展示
通过查看Pageable的实现或者@PageableDefault里值，可以看到rest需要传哪些参数

1-5.rest测试

到这后台部分就已经好了，我们可以使用Postman来测试下

测试url: http://localhost:8080/api/toolssys/findByPage?page=0&size=5

json参数:

{
       "sysName": ""}

2.vue

2-1.api

export function findByPage(data, pageInfo) {
     return request({
       url: `/toolssys/findByPage?page=${
     pageInfo.curPage - 1}&size=${
     pageInfo.pageSize}`,    method: 'post',    data  })}

vue和java的分页起始值有一点区别

vue: 从1开始

java: 从0开始

或者使用params来指定参数，而不是拼接URL

export function findByPage(data, pageInfo) {
     return request({
       url: '/toolssys/findByPage',    method: 'post',    params: {
    page: pageInfo.curPage - 1, size: pageInfo.pageSize },    data  })}