https://googleapis.dev/nodejs/firestore/latest/CollectionReference.html#limit
1.json-server 설치
nodejs
json server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리 서버 설치
https://www.npmjs.com/package/json-server
2.axios 설치
https://www.npmjs.com/package/axios
3.페이징 처리
<template> <div class="container"> <h6>게시글 수 : {{ numberOfTodos }}</h6> <div class="mt-3"> <nav aria-label="Page navigation example "> <ul class="pagination" style="justify-content: center"> <li v-if="currentPage !== 1" class="page-item"> <a class="page-link" @click="getTodos(currentPage - 1)" aria-label="Previous" > <span aria-hidden="true">«</span> </a> </li> <li v-for="page in list" :key="page" class="page-item" :class="currentPage === page ? 'active' : ''" > <a class="page-link" @click="getTodos(page)">{{ page }}</a> </li> <li v-if="numberOfPages !== currentPage" class="page-item"> <a class="page-link" @click="getTodos(currentPage + 1)" aria-label="Next" > <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </template> <script> import { ref, computed } from "vue"; import TodoSimpleForm from "@/components/TodoSimpleForm.vue"; import TodoList from "@/components/TodoList.vue"; import axios from "axios"; export default { components: { TodoList, }, setup() { const todos = ref([]); const error = ref(""); const numberOfTodos = ref(0); //전체 게시글 갯수 const limit = 5; //한페이지에 보여줄 목록 갯수 const currentPage = ref(); //현재 페이지 const block = 5; // 페이지 block 에 표시할 갯수 let first = null; // 첫번째 페이지번호 let end = null; // 마지막 페이지 번호 let list = ref([]); // 페이지 block 에 표시할 번호들 const numberOfPages = computed(() => { return Math.ceil(numberOfTodos.value / limit); }); const pageDataSetting = ({ total, limit, block, page }) => { const totalPage = Math.ceil(total / limit); let currentPage = page; const first = currentPage > 1 ? parseInt(currentPage, 10) - parseInt(1, 10) : null; const end = totalPage !== currentPage ? parseInt(currentPage, 10) + parseInt(1, 10) : null; let startIndex = (Math.ceil(currentPage / block) - 1) * block + 1; let endIndex = startIndex + block > totalPage ? totalPage : startIndex + block - 1; let list = []; for (let index = startIndex; index <= endIndex; index++) { list.push(index); } return { first, end, list, currentPage }; }; const getTodos = async (page) => { if (page == undefined) page = 1; //console.log("page :" + page); try { await axios .get( `http://localhost:3000/todos/?_sort=id&_order=desc&_page=${page}&_limit=${limit}` ) .then((res) => { //1.전체 게시글 갯수 가져오기 numberOfTodos.value = parseInt(res.headers["x-total-count"]); //2. 현재 페이지 currentPage.value = page; const pagetData = { total: numberOfTodos.value, limit: limit, block: block, page: page, }; // console.log("pagetData : "); // console.log(pagetData); //3.페이지 계산처리 const pageCalceData = pageDataSetting(pagetData); // console.log("pageCalceData : "); // console.log(pageCalceData); first = pageCalceData.first; end = pageCalceData.end; list.value = pageCalceData.list; //console.log(list.value); //4.목록에 출력 데이터 todos.value = res.data; }); } catch (error) { error.value = "데이트를 가져오는데 문제가 발생했습니다."; } }; getTodos(); return { todos, addTodo, deleteTodo, searchText, filteredTodos, error, toggleTodo, numberOfPages, currentPage, getTodos, block, pageDataSetting, first, end, list, numberOfTodos, }; }, }; </script>
참조 : https://iixmsh0709.tistory.com/9
4. vue3부터는 vue-router@next를 설치
# npm i vue-router@next
5. lodash 설치
$ npm i -g npm
$ npm i --save lodash
댓글 ( 0)
댓글 남기기