Vue CLI 부트스크랩 5 카드 페이지네이션, 더 보기 - Vue CLI Bootstrap 5, Card UI Pagination(Paging), More Button

Bootstrap의 Card(카드)에 페이지네이션 처리를 하도록 하겠습니다.

 

현재 Card(카드)는 Node.js 레스트 API 서버로부터 게시판 리스트를 가져옵니다. 이전 Node.js 레스트 API 데이터 업데이트를 통해 게시판 전체 리스트가 아닌 1 페이지(게시물에서 맨 앞부터 10개 - 조회, 정렬 조건이 없어 등록 순서로 가져옵니다.)의 게시물 리스트만 가져오게 변경되었습니다.

 

C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈하여  <script>에서 getBoardList() 메서드의 액시오시 URL를 보면 페이지네이션이나 조회, 정렬 조건이 없습니다.

getBoardList() {
	this.axios.get("http://localhost:9000/boards").then((res)=>{
		console.log(res);
		this.boardList = res.data.data;
	}).catch((err) => {
		console.log(err);
	});
}

 

게시물 수(10개)를 확인하기 위해 브라우저 화면 비율을 33%로 축소하였습니다.

 

페이지네이션 처리를 위해 페이지네이션 조건과 정렬 조건을 추가하겠습니다.
테스트를 위해 페이지 크기(countperpage - 가져올 페이지 크기)를 3개로 설정하겠습니다.
정렬 조건은 최신 작성 날짜 순(작성 날짜 내림차순)으로 정렬하겠습니다.

 

 

페이지네이션과 정렬 조건 적용

 

1. 페이지네이션 정보를 저장하기 위해 data에 페이지네이션 정보 객체를 추가합니다.

data : function() {
	return {
		boardList : [],
		boardPagination : {}
	};
}

 

2. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈하여 <script>에서 getBoardList() 메서드에 파라미터로 페이지 번호(pageNo)를 추가하고 액시오시 URL에 페이지네이션과 정렬 조건을 추가합니다. 그리고 console.log()은 주석 처리하겠습니다.

getBoardList(pageNo) {
	this.axios.get("http://localhost:9000/boards?countperpage=3&pageno=" + pageNo + "&sortby=writedate.desc").then((res)=>{
		//console.log(res);
		this.boardList = res.data.data;
	}).catch((err) => {
		console.log(err);
	});
}

 

그리고 getBoardList() 메서드가 호출할 때마다 리턴된 게시물을 추가하기 위해서 Array 객체의 concat() 메서드를 사용하여 boardList에 추가합니다. 그리고 페이지네이션 정보를 저장합니다.

getBoardList(pageNo) {
	this.axios.get("http://localhost:9000/boards?countperpage=3&pageno=" + pageNo + "&sortby=writedate.desc").then((res)=>{
		//console.log(res);
		this.boardList = this.boardList.concat(res.data.data);
		this.boardPagination = res.data.pagination;
	}).catch((err) => {
		console.log(err);
	});
}

 

3. <script>에서 mounted() 메서드에 호출하는 getBoardList() 메서드에 페이지 번호를 추가합니다.

mounted() {
	this.getBoardList(1);
}

 

게시물 작성 날짜 내림차순 정렬과 3개로 변경된 게시물 수를 확인할 수 있습니다.

 

Card(카드) UI 특성상 Table(테이블)의 페이지네이션 UI를 사용하기에는 적합하지 않습니다. 그래서 "더 보기"버튼 UI로 처리하겠습니다. 페이지네이션 UI는 Bootstrap의 Table(테이블)에서 처리하겠습니다.

 

 

 

더 보기 버튼 UI 적용

 

1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈하여 "더 보기"버튼을 추가합니다.

<div class="py-5">
	<div class="container text-start">
		<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
			<div class="col my-2" v-for="boardItem in boardList" v-bind:key="boardItem.no">
				<div class="card">
					<img class="card-img-top" :src="(boardItem.poster.toUpperCase().startsWith('HTTP') ? '' : 'http://localhost:9000') + boardItem.poster" alt="">
					<div class="card-body">
						<h5 class="card-title">{{boardItem.subject}}</h5>
						<h6 class="card-subtitle mb-2 text-muted">{{boardItem.writer}}</h6>
						<p class="card-text">{{boardItem.content}}</p>
						<div class="d-flex justify-content-between align-items-center">
							<div class="btn-group">
								<button type="button" class="btn btn-sm btn-outline-secondary" @click="boardNoClick(boardItem)">보기</button>
							</div>
							<small class="text-muted">{{boardItem.writedate}}</small>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row my-2 mx-auto">
			<button type="button" class="btn btn-sm btn-primary" id="boardMoreButton" @click="boardPaging()">더 보기</button>
		</div>
	</div>
</div>

 

"더 보기"버튼의 클릭 이벤트를 처리하기 위해서 클릭 이벤트를 추가합니다. 그리고 class에서 "my-2"를 적용하여 Card(카드)의 상하 마진과 동일하게 하고 "mx-auto"를 적용하여 버튼의 넓이가 Grid(그리드)의 가로 넓이와 동일하게 합니다. 버튼에 id를 추가한 것은 버튼을 찾아서 비활성화 처리하기 위해서입니다.

 

2. <script>에 boardPaging() 메서드를 추가합니다.

 

페이지네이션 정보에서 enableNextPageNo(다음 페이지 번호 활성화 여부)를 사용하면 별도의 계산 없이 쉽게 페이징 처리를 할 수 있습니다.

boardPaging() {
	if (this.boardPagination != undefined && this.boardPagination.enableNextPageNo) {
		this.getBoardList(this.boardPagination.pageNo + 1);
	}
}

 

페이지네이션 정보에 대한 자세한 내용은 "Node.js 레스트 API 페이지네이션(구현 정보)  (https://carrotweb.tistory.com/176)"를 참고하시기 바랍니다.

"더 보기"버튼을 클릭하겠습니다. (브라우저 화면 비율을 33%로 축소하였습니다.)

 

"더 보기"버튼을 클릭할 때마다 3개의 게시물이 나타나는 것을 확인할 수 있습니다. (브라우저 화면 비율을 33%로 축소하였습니다.)

 

 

더 보기 버튼에 페이지 수 적용 및 비활성화 처리

 

1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈하여 "더 보기"버튼에 페이지 수를 표시하기 위해 pagingInfo 변수를 바인딩 합니다.

<div class="row my-2 mx-auto">
	<button type="button" class="btn btn-sm btn-primary" id="boardMoreButton" @click="boardPaging()">더 보기 ({{pagingInfo}})</button>
</div>

 

 

2. <script>에서 computed에 pagingInfo() 메서드를 추가합니다.
pagingInfo() 메서드는 페이지네이션 정보를 사용하여 현재 페이지 번호와 마지막 페이지 번호를 출력하게 합니다.

computed : {
	pagingInfo() {
		var pagingInfoText = "0 / 0";
		if (this.boardPagination != undefined && this.boardPagination.pageNo != undefined && this.boardPagination.lastPageNo != undefined) {
			pagingInfoText = this.boardPagination.pageNo + " / " + this.boardPagination.lastPageNo;
		}
		return pagingInfoText;
	}
}

 

"더 보기"버튼에 현재 페이지 번호와 마지막 페이지 번호가 표시되는 것을 확인할 수 있습니다. 그리고 클릭할 때마다 현재 페이지 번호가 변경되는 것을 확인할 수 있습니다.

 

3. <script>에서 getBoardList() 메서드에 페이지네이션 정보의 enableNextPageNo(다음 페이지 번호 활성화 여부)를 사용하여 더 이상 다음 페이지 번호로 이동할 수 없으면 "더 보기"버튼을 비활성화합니다.

getBoardList(pageNo) {
	this.axios.get("http://localhost:9000/boards?countperpage=3&pageno=" + pageNo + "&sortby=writedate.desc").then((res)=>{
		//console.log(res);
		this.boardList = this.boardList.concat(res.data.data);
		this.boardPagination = res.data.pagination;
		if (!this.boardPagination.enableNextPageNo) {
			var button = document.getElementById("boardMoreButton");
			button.disabled = "disabled";
		}
	}).catch((err) => {
		console.log(err);
	});
}

 

현재 페이지 번호가 마지막 페이지이면 "더 보기"버튼은 비활성화됩니다.