[pinterest clone (29)] ListView, Pagination 적용

accountview 같은걸 만들때는 단일 객체만 보면 됐었다. detailview 하면 그 사람의 정보, 그 게시물의 정보 이런식이었는데 최종적으로는 게시판의 형태를 만들어야하니까 여러개의 객체를 다룰 수 있는 그런 view가 필요하다. 여러개의 게시글을 한번에 보여줄 수 있는 방법이 필요하다.

그래서 나오는 것이 List view 이다. (django 기본 제공)

 

basicform

class ArticleListView(ListView):
	model = Article
    context_object_name = 'article_list'
    template_name = 'articleapp/list.html'
    paginate_by = 25

*pagination 이란: page의 객체를 생성한다.

html template에서 쓸 객체들: 'article_List', 'page_obj'

 

---

1

articleapp/views.py

class ArticleListView(ListView):
    model = Article
    context_object_name = 'article_list'
    template_name = 'articleapp/list.html'
    paginate_by = 25

 

2

urls.py

path('list/', TemplateView.as_view(template_name='articleapp/list.html'), name='list'),

원래 list path가 있었는데 그냥 템플릿뷰를 쓰고 있었다. 이걸 위에서 만든 뷰로 교체

from django.urls import path
from django.views.generic import TemplateView

from articleapp.views import ArticleCreateView, ArticleDetailView, ArticleUpdateView, ArticleDeleteView, ArticleListView

app_name = 'articleapp'

urlpatterns = [
    path('list/', ArticleListView.as_view(), name='list'),
    path('create/', ArticleCreateView.as_view(), name='create'),
    path('detail/<int:pk>', ArticleDetailView.as_view(), name='detail'),
    path('update/<int:pk>', ArticleUpdateView.as_view(), name='update'),
    path('delete/<int:pk>', ArticleDeleteView.as_view(), name='delete'),
]

 

3

list.html

{% extends 'base.html' %}
{% load static %}

{% block content %}

<style>
    .container div {
      width: 250px;
      background-color: antiquewhite;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1rem;
    }

    .container img {
      width: 100%;
      border-radius: 1rem;

    }

</style>

    <div class="container">
        {% for article in article_list %}
        <a href="{% url 'articleapp:detail' pk=article.pk %}">
            <div>
                <img src="{{ article.image.url }}" alt="">
            </div>
        </a>
    </div>

    <div style="text-align:center;">
        <a href="{% url 'articleapp:create' %}" class="btn btn-dark rounded-pill col-3 mt-3 mb-3">
            Create Article
        </a>
    </div>

<script src="{% static 'js/magicgrid.js' %}"></script>


{% endblock%}

 

4

카드에 해당하는 코드조각은 따로 빼줄것이다. templates/snippets/card.html

<div>
    <img src="{{ article.image.url }}" alt="">
</div>

list.html 은 수정

{% extends 'base.html' %}
{% load static %}

{% block content %}

<style>
    .container div {
      width: 250px;
      background-color: antiquewhite;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1rem;
    }

    .container img {
      width: 100%;
      border-radius: 1rem;

    }

</style>
    {% if article_list %}
    <div class="container">
        {% for article in article_list %}
        <a href="{% url 'articleapp:detail' pk=article.pk %}">
            {% include 'snippets/card.html' with article=article %}
        </a>
        {% endfor %}
    </div>
    <script src="{% static 'js/magicgrid.js' %}"></script>
    {% else %}
    <div class="text-center">
        <h1>No Articles Yet</h1>
    </div>
    {% endif %}

    {% include 'snippets/pagination.html' with page_obj=page_obj %}
    <div style="text-align:center;">
        <a href="{% url 'articleapp:create' %}" class="btn btn-dark rounded-pill col-3 mt-3 mb-3">
            Create Article
        </a>
    </div>




{% endblock%}

 

5

snippets/pagination.html

<div style="text-align: center; margin: 1rem 0;">
    {% if page_obj.has_previous %}
    <a href="{% url 'articleapp:list' %}?page={{ page_obj.previous_page_number }}"
        class="btn btn-secondary rounded-pill">
        {{ page_obj.previous_page_number }}
    </a>
    {% endif %}
    <a href="{% url 'articleapp:list' %}?page={{ page_obj.number }}"
        class="btn btn-secondary rounded-pill active">
        {{ page_obj.number }}
    </a>
    {% if page_obj.has_next %}
    <a href="{% url 'articleapp:list' %}?page={{ page_obj.next_page_number }}"
        class="btn btn-secondary rounded-pill">
        {{ page_obj.next_page_number }}
    </a>
    {% endif %}
</div>

page_obj 인자의 객체:

has_previous: 현재 페이지에서 이전페이지가 있는지 없는지를 판단하는 객체

has_next: 다음페이지가 있는지 판단