forum-express : log 4+

[lky473736]

forum-express : log 4+

pagination을 구현해보자.

---

pagination의 작동 방식

• 한 페이지에 5개씩 글이 보이게 구현하자.
• /list/1 : previous가 보이면 안됨, next가 보임
• /list/2 ~ /list/마지막에서두번째페이지 : previous와 next가 둘 다 보임
• /list/마지막페이지 : previous만 보임, next가 보이면 안됨

---

pagination 구현

// server.js

// /list 페이지 : 글 목록을 보여준다. (page 파라미터에 따라 게시물을 5개씩 보여줌)
app.get('/list/:page', async (요청, 응답) => {
  // 현재 페이지에 해당되는 5개 이하의 게시물을 postlist에 저장
  let postlist = await db.collection('post').find().skip((요청.params.page-1) * 5).limit(5).toArray();
  let allPostlist = await db.collection('post').find().toArray();
  console.log(postlist, Number(allPostlist.length));

  응답.render('list.ejs', {글목록 : postlist, 페이지 : 요청.params.page, 글수 : allPostlist.length});
});

<!-- /views/list.ejs -->

    <!--페이지네이션 페이지바-->
    <div style="display:flex; justify-content:center; align-items:center;">
        <nav aria-label="pagination navigator">
            <ul class="pagination">
            <% if (Number(페이지) !== 1) { %>
                <li class="page-item"><a class="page-link" href="/list/<%= Number(페이지)-1 %>">Previous</a></li>
            <% } %>
            <li class="page-item"><a class="page-link"><%= 페이지 %></a></li>
            <% if (페이지*5 < 글수) { %>
                <li class="page-item" id="nextpage"><a class="page-link" href="/list/<%= Number(페이지)+1 %>">Next</a></li>
            <% } %>
            </ul>
        </nav>
    </div>