-
(국비교육) 80 - Spring boot + vue 게시판 만들기 ( 페이징 )개발/국비교육 2023. 10. 3. 17:21
■ 페이징 만들기
페이징 화면에 보이는 번호를 만들어준다.
mounted 처음 페이지 로딩될 때 실행되는 것
보드를 눌렀을 때 메소드 실행될 수 있도록 메서드도 만들어준다.
라우트로 보내서 사용하게 한다.
pageNo 값 파람 값으로 받고 이 값을 리스트에 넣어서 보낸다.
0부터 시작해야 하니까 다음과 같이 서비스에서 설정해준다.
받은 pageNo 값부터 10개 찍어준다.
몇 페이지 찍는지도 찍어줄 수 있다.
총 게시글 수를 부르기 위해 맵퍼에서 전체 게시글 수를 구하고,
해당 변수를 totalcount 라고 짓는다.
리스트에 담은 totalcount 값을 가져온다.
참고로 totalcount 는 모든 list 안에 담기게 된다.
내가 가져온 게시글의 10개씩 나눠서 해당하는 값만큼 버트 찍히게 해줄 것이다.
버튼 반복문에 totalPage 를 넣고,
각각 내용을 출력해본다.
다음과 같이 출력된다.
그러나 나는 총 게시글이 176개이기 때문에 버튼이 18개가 생성돼야 한다.
Math.ceil 처리를 하면 올림처리를 해서 18개 버튼이 생성된다.
'개발 > 국비교육' 카테고리의 다른 글
(국비교육) 82 - Vue.js devtools 설치하기 (0) 2023.10.05 (국비교육) 81 - Spring boot + vue 게시판 만들기 + AWS 시험 미리보기 + GITHUB 관리(동영상) + Vuex 설치 + store 이용하기 + 포트 변경하기 + 로그인/로그아웃 만들기 (0) 2023.10.04 (국비교육) 79 - Spring boot + vue 게시판 만들기 + 유라클 회사 소개 (0) 2023.09.22 (국비교육) 78 - 13회차 시험 (0) 2023.09.21 (국비교육) 77 - Spring boot + vue 게시판 만들기 3 ( 수정하기 + 삭제하기) (0) 2023.09.21