20221124 TIL

오늘의 한 일

• 유화 제작 프로젝트 

 

유화 제작 프로젝트 

 

아티클 디테일 페이지 띄우기 - 새 페이지 vs 모달

 

새 페이지의 경우

 

api.js

// 아티클 디테일 페이지 연결 //
function ArticleDetail(article_id) {
  const url = `${frontend_base_url}/Article_detail.html?id=${article_id}`;
  location.href = url;
}

이렇게 하고 main페이지에서 생성되는 카드에 onclick = ArticleDetail(this.id) 속성을 부여하면 디테일 칸으로 넘어가고

 

 

 

article_detail.js

// 디테일 페이지 보여주기 //
const urlParams = new URLSearchParams(window.location.search);
const article_id = urlParams.get("id");


// 아티클 디테일 가져오기 (ajax) //

function showArticleDetail(article_id) {
    $.ajax({
        type: 'GET',
        url: `${backend_base_url}article/${article_id}`,
        data: {},
        success: function (response) {
            let articles = response
            append_temp_html(
                    articles.id,
                    articles.username,
                    articles.title,
                    articles.content,
                    articles.image
                )
            function append_temp_html(id, user, title, content, image) {
                temp_html = `
            		<li>
                    <div class="detail-card" id="${id}">
                    <div class="detail-card-img" style="background: url(${backend_base_url}${image}) no-repeat center center/contain;"></div>
                    <div class="deatil-card-body">
                        <h5 class="datail-card-title">${title}</h5>
                        <hr>
                        <p class="detail-card-text">${content}</p>
                    </div>
                    </li>`
            $('#detail-cards-box').append(temp_html)
        });
}

showArticleDetail(article_id)








// 아티클 디테일 가져오기 (await fetch) html쪽 사전작업 필요 //

async function getArticleDetail(article_id) {
  const response = await fetch(`${backend_base_url}/articles/${article_id}`, {
    method: "GET",
  });
  response_json = await response.json();
  return response_json;
}


async function loadArticleDetail(article_id) {
  const article = await getArticleDetail(article_id);
  const user = document.getElementById("user");
  const title = document.getElementById("title");
  const content = document.getElementById("content");
  const image = document.getElementById("image");
  let imgTag = document.createElement("img");
  imgTag.src = article.image;
  
  image.appendchild(imgtag);
  user.innerText = "[ 작성자 ]/n" + article.user
  title.innerText = article.title;
  content.innerText = article.content;
}
loadArticleDetail(article_id);

 

ajax쪽으로 만드는 편이 더 직관적이긴 한데 양쪽 다 더 진행해봐야 할것같다..

 

 

 

만약 모달로 띄운다면

 

urlparam을 제거하고

아티클 전체 불러오는 ajax쪽에 카드에서 onclick = showArticleDetail({id})로 아티클 상세용 모달 div에 temp_html 만들어서 append 시키면 되지 않을까?

 

 

 

 

 

drf 페이지네이션 적용

 

 

참조 : https://velog.io/@jewon119/TIL00.-DRF-Pagination-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

TIL126. DRF : Pagination 적용하기

 

 

settings.py 페이지네이션 설정

# 전역 페이지네이션 적용

REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS' : 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE' : 2, 
}

 

페이지네이션을 적용시켜주기 위해서는 추가로 class가 APIView가 아닌 Viewset을 써야 하는것 같다. 차이가 어떻게 되는거지?

 

참조  : https://ssungkang.tistory.com/entry/Django-APIView-Mixins-generics-APIView-ViewSet%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

[Django] APIView, Mixins, generics APIView, ViewSet을 알아보자

이렇게 되면 전체 아티클 뷰의 get 부분은 viewset으로 빼야하는건가? 고민이 깊어집니다..

 

article/views.py

from rest_framework.pagination import PageNumberPagination
from rest_framework import viewsets

class ArticlePagination(PageNumberPagination): # 👈 PageNumberPagination 상속
    page_size = 2

class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
    pagination_class = ArticlePagination

article/urls.py

from django.urls import path, include
from articles import views
from rest_framework.routers import DefaultRouter

router = DefaultRouter()
router.register('', views.ArticleViewSet)

urlpatterns = [
    path('',include(router.urls)),
    # path("", views.ArticleView.as_view()),
    path("<article_id>/", views.ArticleDetailView.as_view()), 
    path("comment/", views.CommentView.as_view()),
    path("comment/<comment_id>/", views.CommentView.as_view()),
]

 

 

 

일단 구현은 해봤는데 제대로 써먹으려면 다듬어야 할 부분이 너무 많은것같습니다..

 

프론트엔드에서 구현해내는것까지도 문제인것같다.. 어렵다 어려워