protable列表前后端规范

前端部分

基本返回类型

Result

export interface Result {
  code: string;
  msg: string;
}

// * 请求响应参数(包含data)
export interface ResultData<T = any> extends Result {
  data?: T;
}

// * 分页响应参数
export interface ResultPage<T> extends Result {
  data: T[];
  page: number;
  success: boolean;
  total: number;
}

示例业务对象类型

  export interface XObj {
    id: string;
    xxx: string;
    yyy: number;
    zzz: boolean;
  }
  type XObjItem = {
    id: string;
    xxx: string;
    yyy: number;
    zzz: boolean;
  };

axios基本配置

需要针对page类型进行特殊处理

  get<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
    return this.service.get(url, { params, ..._object });
  }

  getPage<T>(url: string, params?: object, sort?: object, filter?: object, _object = {}): Promise<ResultPage<T>> {
    const queryPageParams = {
      params: params,
      sort: sort,
      filter: filter
    };
    return this.service.get(url, { ...queryPageParams, ..._object });
  }

  post<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
    return this.service.post(url, params, _object);
  }

  postPage<T>(url: string, params?: object, sort?: object, filter?: object, _object = {}): Promise<ResultPage<T>> {
    const queryPageParams = {
      params: params,
      sort: sort,
      filter: filter
    };
    return this.service.post(url, queryPageParams, _object);
  }

  put<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
    return this.service.put(url, params, _object);
  }

  delete<T>(url: string, params?: any, _object = {}): Promise<ResultData<T>> {
    return this.service.delete(url, { params, ..._object });
  }

示例查询接口

// 普通查询
export const getXInfo = (params: any) => {
  return http.post<XObj>(`url`, params);
};
// 分页查询
export const getXPage = (params: any, sort: any, filter: any) => {
  return http.postPage<XObj>(
    `url`,
    params,
    sort,
    filter
  );
};

ProTable的请求

  <ProTable<XObjItem>
	...
	request={async (params = {}, sort, filter) => {
		return getXPage(params, sort, filter);
	}}
	...
  />

后端部分

分页请求参数基本类型

@Data
public class QueryPageBaseParams {
    //当前页数
    private Integer current = 1;
    //每页条数
    private Integer pageSize = 10;
}

@Data
public class QueryPageVO<T extends QueryPageBaseParams> {
    private T params;
    private Object sort;
    private Object filter;

    public QueryPageVO(T params, Object sort, Object filter) {
        this.params = params;
        this.sort = sort;
        this.filter = filter;
    }
}

@EqualsAndHashCode(callSuper = true)
@Data
public class QueryXObjInfo extends QueryPageBaseParams {

    private String id;

    private String xxx;

    private Integer yyy;

    private Boolean zzz;
}

返回结果基本类型

@Data
@AllArgsConstructor
public class CommonResult<T> {
    private T data;
    private Boolean success;
    private String code;
    private String msg;

    public static <T> CommonResult<T> ok(T data) {
        return new CommonResult<>(data, Boolean.TRUE, ResultCodeEnum.SUCCESS.getResultCode(), ResultCodeEnum.SUCCESS.getResultMsg());
    }
    public static <T> CommonResult<T> fail(String resultCode, String resultMsg, T data) {
        return new CommonResult<>(data, Boolean.FALSE, resultCode, resultMsg);
    }
    public static <T> CommonResult<T> fail(ResultCodeEnum resultCodeEnum,T data) {
        return new CommonResult<>(data, Boolean.FALSE, resultCodeEnum.getResultCode(), resultCodeEnum.getResultMsg());
    }
    public static <T> CommonResult<T> fail(ResultCodeEnum resultCodeEnum) {
        return new CommonResult<>(null, Boolean.FALSE, resultCodeEnum.getResultCode(), resultCodeEnum.getResultMsg());
    }
}

@Data
@AllArgsConstructor
public class PageInfoResult<T> {
    private List<T> data;
    private Integer page;
    private Long total;
    private Boolean success;
    private String code;
    private String msg;

    public static <T> PageInfoResult<T> ok(List<T> data, Integer page, Long total) {
        return new PageInfoResult<>(data, page, total, Boolean.TRUE, ResultCodeEnum.SUCCESS.getResultCode(), ResultCodeEnum.SUCCESS.getResultMsg());
    }

    public static <T> PageInfoResult<T> ok(PageInfo<T> pageInfo) {
        return new PageInfoResult<>(pageInfo.getData(), pageInfo.getPage(), pageInfo.getTotal(), Boolean.TRUE, ResultCodeEnum.SUCCESS.getResultCode(), ResultCodeEnum.SUCCESS.getResultMsg());
    }

    public static <T> PageInfoResult<T> fail(String resultCode, String resultMsg, List<T> data) {
        return new PageInfoResult<>(data, null, null, Boolean.FALSE, resultCode, resultMsg);
    }
    public static <T> PageInfoResult<T> fail(ResultCodeEnum resultCodeEnum,List<T> data) {
        return new PageInfoResult<>(data,null, null, Boolean.FALSE, resultCodeEnum.getResultCode(), resultCodeEnum.getResultMsg());
    }
    public static <T> PageInfoResult<T> fail(ResultCodeEnum resultCodeEnum) {
        return new PageInfoResult<>(null,null, null, Boolean.FALSE, resultCodeEnum.getResultCode(), resultCodeEnum.getResultMsg());
    }
}

分页请求参数示例

    @PostMapping("/x/obj")
    public PageInfoResult<XObjVO> queryXObjPage(@RequestBody @Validated QueryPageVO<QueryXObjInfo> vo){
        ...
        return PageInfoResult.ok(resultPage);
    }