From 2a48f02b19f97339a868cc8956e28aa1e6817f55 Mon Sep 17 00:00:00 2001 From: leejinseok Date: Mon, 17 Feb 2020 12:17:12 +0900 Subject: [PATCH] pagination --- src/front/src/App.vue | 2 + src/front/src/pages/articles/List.vue | 79 +++++++++++++++---- src/front/src/services/articleService.js | 7 +- src/front/src/utils/commonUtil.js | 7 ++ src/front/src/utils/paginationUtil.js | 30 +++++++ .../vue/article/ArticleServiceTest.java | 2 +- 6 files changed, 108 insertions(+), 19 deletions(-) create mode 100644 src/front/src/utils/paginationUtil.js diff --git a/src/front/src/App.vue b/src/front/src/App.vue index ab1b0f8..e64a1bb 100644 --- a/src/front/src/App.vue +++ b/src/front/src/App.vue @@ -175,4 +175,6 @@ img {vertical-align: bottom;} opacity: 0; } } + + diff --git a/src/front/src/pages/articles/List.vue b/src/front/src/pages/articles/List.vue index de65ab7..ad8556d 100644 --- a/src/front/src/pages/articles/List.vue +++ b/src/front/src/pages/articles/List.vue @@ -9,6 +9,17 @@ {{ article.user.name }} + +
+ +
+
@@ -32,6 +43,7 @@ import authService from "../../services/authService"; import articleService from "../../services/articleService"; import Header from '../../components/common/Header'; + import paginationUtil from "../../utils/paginationUtil"; export default { name: "List", @@ -47,6 +59,7 @@ data() { return { articles: [], + pages: null, pending: true, user: null }; @@ -57,30 +70,47 @@ authService.session = authService.session.bind(this); }, async created() { - this.startSpin(); - - try { - const { data } = await authService.session(); - this.user = data; - this.setSession(data); - } catch (err) { - console.log(err); + await this.fetchArticles(); + }, + watch: { + '$route': async function () { + await this.fetchArticles(); } - - const articles = await articleService.getArticles({}); - - this.articles = articles.content; - this.pending = false; - - this.stopSpin(true); }, methods: { + async fetchArticles() { + this.startSpin(); + + try { + const { data } = await authService.session(); + this.user = data; + this.setSession(data); + } catch (err) { + console.log(err); + } + const page = this.$route.query.page || 0; + + const data = await articleService.getArticles({page}); + const {content, totalPages, totalElements } = data; + + this.pages = paginationUtil(page, totalPages); + + this.articles = content; + this.pending = false; + + this.stopSpin(true); + }, async logout() { if (!confirm("정말 로그아웃 하시겠습니까?")) return; await authService.logout(); }, clickUser(evt) { console.log(evt.target); + }, + isActivePage(page) { + const currentPage = this.$route.query.page || 0; + console.log(currentPage, page); + return page - 1 === currentPage; } } }; @@ -110,4 +140,23 @@ margin-left: auto; margin-right: auto; } + + .paginatior-wrapper { + + } + + .paginatior-wrapper ul { + + } + + .paginatior-wrapper ul li { + float: left; + border: 1px solid dimgray; + padding: 6px 4px; + } + + .paginatior-wrapper ul li.active { + background-color: dimgray; + color: #fff; + } \ No newline at end of file diff --git a/src/front/src/services/articleService.js b/src/front/src/services/articleService.js index 1493c39..be3f187 100644 --- a/src/front/src/services/articleService.js +++ b/src/front/src/services/articleService.js @@ -3,17 +3,18 @@ import commonUtil from "../utils/commonUtil"; import authApi from "../api/authApi"; export default { - async getArticles({page = 0, size = 10}) { + async getArticles({page = 0, size = 3}) { try { const accessToken = this.$cookie.get('accessToken'); const authorization = accessToken ? commonUtil.getAuthenticationHeaderBearer(accessToken) : ''; - const {data} = await articleApi.getArticles({ + const result = await articleApi.getArticles({ page, size }, authorization); - return data; + + return result.data; } catch (err) { alert('문제가 발생하였습니다.'); diff --git a/src/front/src/utils/commonUtil.js b/src/front/src/utils/commonUtil.js index 937139b..6187cce 100644 --- a/src/front/src/utils/commonUtil.js +++ b/src/front/src/utils/commonUtil.js @@ -1,5 +1,12 @@ export default { getAuthenticationHeaderBearer(accessToken) { return 'Bearer ' + accessToken; + }, + pagination(totalElements, totalPages, pageSize) { + // 페이지 그룹 사이즈 (5, 10) + // 시작 페이지, 마침 페이지 + // 최초 페이지, 마지막 페이지 + // 이전페이지 여부, 다음 페이지 여부 + // 현재 페이지 } }; \ No newline at end of file diff --git a/src/front/src/utils/paginationUtil.js b/src/front/src/utils/paginationUtil.js new file mode 100644 index 0000000..d8242e4 --- /dev/null +++ b/src/front/src/utils/paginationUtil.js @@ -0,0 +1,30 @@ +export default function (currentPage, pageCount) { + let current = currentPage, + last = pageCount, + delta = 2, + left = current - delta, + right = current + delta + 1, + range = [], + rangeWithDots = [], + l; + + for (let i = 1; i <= last; i++) { + if (i == 1 || i == last || i >= left && i < right) { + range.push(i); + } + } + + for (let i of range) { + if (l) { + if (i - l === 2) { + rangeWithDots.push(l + 1); + } else if (i - l !== 1) { + rangeWithDots.push('...'); + } + } + rangeWithDots.push(i); + l = i; + } + + return rangeWithDots; +} diff --git a/src/test/java/com/example/vue/article/ArticleServiceTest.java b/src/test/java/com/example/vue/article/ArticleServiceTest.java index 5661f70..31ed083 100644 --- a/src/test/java/com/example/vue/article/ArticleServiceTest.java +++ b/src/test/java/com/example/vue/article/ArticleServiceTest.java @@ -41,7 +41,7 @@ public class ArticleServiceTest { Article article = baseTest.findTestArticle(); ArticleRequestDto articleRequestDto = new ArticleRequestDto(); articleRequestDto.setTitle("update title"); - articleRequestDto.setTitle("update content"); + articleRequestDto.setContent("update content"); articleService.update(article.getId(), articleRequestDto, baseTest.findTestUser()); }