pagination

src/front/src/App.vue

@@ -175,4 +175,6 @@ img {vertical-align: bottom;}
     opacity: 0;
   }
 }
+
+
 </style>

src/front/src/pages/articles/List.vue

@@ -9,6 +9,17 @@
                 <span @click="clickUser">{{ article.user.name }}</span>
             </article>
 
+
+            <div class="paginatior-wrapper" v-if="pages">
+                <ul class="clearfix">
+                    <li v-for="page in pages" v-bind:key="page" v-bind:class="{active: isActivePage(page)}">
+                        <router-link :to="{ path: '/articles', query: { page: page - 1 }}" v-if="typeof(page) === 'number'">
+                            {{ page }}
+                        </router-link>
+                    </li>
+                </ul>
+            </div>
+
             <br/>
 
             <div v-if="user">
@@ -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;
+    }
 </style>

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('문제가 발생하였습니다.');

src/front/src/utils/commonUtil.js

@@ -1,5 +1,12 @@
 export default {
     getAuthenticationHeaderBearer(accessToken) {
         return 'Bearer ' + accessToken;
+    },
+    pagination(totalElements, totalPages, pageSize) {
+        // 페이지 그룹 사이즈 (5, 10)
+        // 시작 페이지, 마침 페이지
+        // 최초 페이지, 마지막 페이지
+        // 이전페이지 여부, 다음 페이지 여부
+        // 현재 페이지
     }
 };

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;
+}

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());
     }