페이징 처리하기 Angular With Spring

페이징 처리하기 Angular With Spring

어느분의 코드를 보다가 배울점이 있어서 간단히 프로토 타입코드로 작성해보았다.

========= Angular js ===========

1. Pagenation 이라는 클래스를 만들어서

view에서 검색관련한 이벤트 등이 있을 경우 페이징 할 때 필요한 변수들을 받아놓는다.

export class Pagination { // 다음 가져올 시작 부분 offset: number; // 한번에 가져올 양 limit: number; // 소팅 조건 sortOption [ { prop: string; dir: string; } ]; // 검색 조건 및 정보 searchOption: 'AND' | 'OR'; searchwords: string[]; //생성자로는 기본값을 설정했다 .!! constructor(type?: string) { this.searchOp = 'OR'; this.keywords = []; } }

2. 앵귤러의 Service에서

showListPagePostslist ( pagination: Pagination ) 이라는 함수를 정의한다.

import { Pagination } from '@model/common/pagination'; Postslist(pagination: Pagination): Observable { //pagenation 을 변수로 받는다. const params: any = { index: pagination.offset, //offset 과 limit 뽑아서 파라미터에 넣음. size: pagination.limit //파라미터에는 스프링의 변수이름과 맞춰주자. }; if (pagination.sortOption) { //sort가 정해져있다면 params.sortOption= `${pagination.sortOption[0].prop};${pagination.sortOption[0].dir}`; //파라미터에 넣음 } if (pagination.keywords && pagination.keywords.length > 0) { //keyword가 있다면 params.searchOption = pagination.searchOption; //검색카테고리와 키워드 파라미터에 넣음 params.searchWords = pagination.searchWords; } return this.api.get(`${BASE_PATH}/Postslist`, params); // 파라미터와 함꼐 http요청을 보내준다. // backend에 listPage라는 함수가 있다. }

=========Spring Rest ==============

------------PostsListController.class ------------ @RequestMapping(value = "PostsList/{typeCd}") public ApiResponseDto getList( @RequestParam(value = "index") int index, @RequestParam(value = "size") int size, @RequestParam(value = "sortOption", required = false) String[] sortProperties, @RequestParam(value = "searchWords", required = false) String[] keywords, @RequestParam(value = "searchOption", required = false) String searchOp) throws BackendException { return PostService. getPostsList(index, size, sortProperties, keywords, searchOp)); }

------------ PostsService.class ------------- public PageWrapper getListPage(int index, int size, String[] sortOptions[],String[] searchWords, String searchOption) throws BackendException { PageRequest pageRequest =new PageRequest(index, size, sortOptions); if( keywords가 있다면 ) 검색조건 = searchKeywords(keywords, searchOp)); Page page = PostsRepository .findAll( 검색조건 , pageRequest ); return page; }

from http://sbarrys.tistory.com/102 by ccl(A) rewrite - 2021-10-28 00:00:51