[Spring] API를 이용한 리스트 가져오기

API 만들기

controller

@GetMapping("")     //http://localhost:8888/api/user?page=1 (get)
public Header<List<UserApiResponse>> findAll
	(@PageableDefault(sort={"id"},direction=Sort.Direction.DESC) Pageable pageable){
    return userApiLogicService.search(pageable);
}

Header<List>
@PageableDefault:

Service

public Header<List<UserApiResponse>> search(Pageable pageable){
        Page<Users> users = baseRepository.findAll(pageable);

        List<UserApiResponse> userApiResponses = users.stream().map(
                user -> response(user)).collect(Collectors.toList());
        //collect 특정 자료구조로 바꿔달라는 뜻 그중에서도 List 형태!!
        Pagination pagination = Pagination.builder()
                .totalPages(users.getTotalPages())  //전체 페이지수
                .totalElements(users.getTotalElements())    //전체 페이지 요소
                .currentPage(users.getNumber()) //현재 페이지
                .currentElements(users.getNumberOfElements())   //현재 페이지 요소
                .build();
        return Header.OK(userApiResponses, pagination);
    }

Pasible

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Pagination {
    private Integer totalPages;
    private Long totalElements;
    private Integer currentPage;
    private Integer currentElements;

}

JavaScript

$(function(){

    const { createApp } = Vue

    let showPage = createApp({
        data() {
            return {
                totalElements: {},
                currentPage: {}
            }
        }
    }).mount('#showPage');

    let itemList = createApp({
        data() {
            return {
                itemList: {}
            }
        }
    }).mount('#itemList');

    console.log("user.js 실행!");
    searchStart(0);

    function searchStart(index){
        console.log("index : " + index);
        $.get("/api/user?page="+index, function(response){

            console.log(response);

            let pagination = response.pagination;
            showPage.totalPages = pagination.totalPages;    
  			//Vue{} 데이터가 없으면 만든다
            showPage.currentPage = pagination.currentPage + 1;

            //response.data url에서 가져온 json의 데이터! 통째로
            itemList.itemList = response.data;


            let lastPage = response.pagination.totalPages;

            let pageStr = "";
            if(lastPage != 0){
                pageStr += "<<";
            }
            for(let i = 0; i < lastPage; i++){
                pageStr += "&nbsp;&nbsp; <span class='pages' id='" 
                         + i + "'>" + (i+1) + " </span> &nbsp;&nbsp;";
            }
            if(lastPage != 0){
                pageStr += ">>";
            }
            $('#pageNum').html(pageStr);
            // 선택자 안에 pagestr을 넣어줘라 innerHTML한거랑 같은효과
        });
    }

    $(document).on('click', '.pages', function(){
        let pageId = this.id;
        searchStart(pageId);
    });
});

Html

head에 vue와 jquery cdn 추가

<script src="https://unpkg.com/vue@3"></script>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" 
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 
        crossorigin="anonymous"></script>

총 페이지수와 현재 페이지

<div id="showPage" class="card-box">
	<i class="fas fa-table me-1"></i>
	총 {{totalPages}}페이지 중 {{currentPage}}페이지
</div>

테이블

<table class="data-table table stripe hover nowrap">
  <thead>
    <tr>
      <th>idx</th>
      <th>ID</th>
      <th>name</th>
      <th>Hp</th>
      <th>email</th>
      <th>regdate</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>번호</th>
      <th>아이디</th>
      <th>이름</th>
      <th>핸드폰</th>
      <th>이메일</th>
      <th>등록날짜</th>
    </tr>
  </tfoot>
  <tbody id="itemList">
    <tr class="bg-pink" v-for="dto in itemList">
      <th scope="row">{{dto.id}}</th>
      <td>{{dto.userid}}</td>
      <td>{{dto.name}}</td>
      <td>{{dto.email}}</td>
      <td>{{dto.hp}}</td>
      <td>{{dto.regDate}}</td>
    </tr>
  </tbody>
  </table>