Django создает кнопку Like, используя JS и DOM ->404

У меня проблема с "живой" кнопкой в Django и JavaScript DOM

после нажатия на кнопку я получил ошибку

POST http://127.0.0.1:8000/like/24 404 (Not Found)
likePost @ javascripts.js:24
(anonymous) @ javascripts.js:40
javascripts.js:7

Я не знаю, проблема в функции 'await fetch' или может я где-то использовал неправильный класс или id. С чего начать?

javascript.js

const reloadPostHTML = async (postId) => {
  const homePageResponse = await fetch(window.location.href);
  const newHTML = await homePageResponse.text();
  const newDocument = new DOMParser().parseFromString(newHTML, "text/html");
  console.log(newDocument)
  const newPostElem = newDocument
    .querySelector(`[data-post-id='${postId}']`)
    .closest(".post");
  const oldPostElem = document
    .querySelector(`[data-post-id='${postId}']`)
    .closest(".post");
  oldPostElem.innerHTML = newPostElem.innerHTML;
  makeLikeButton(oldPostElem.querySelector(".like-button-wrapper"));
};

const likePost = async (postId, csrfToken) => {
    await fetch(`/like/${postId}`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        "X-CSRFToken": csrfToken
      }
    });
    reloadPostHTML(postId);
  };

const makeLikeButton = (elem) => {
  elem.querySelector('button').addEventListener("click", (event) => {
    event.preventDefault();
    const postId = elem.dataset.postId;
    const csrfToken = elem.dataset.csrfToken;
    likePost(postId, csrfToken);
  });
};

const makeLikeButtons = () => {
  for (let elem of document.getElementsByClassName("like-button-wrapper")) {
    makeLikeButton(elem);
  }
};
makeLikeButtons();

urls.py

    path(
        'article_detail/<int:pk>/',
        login_required(
            ArticleDetail.as_view(template_name = "web/article_detail_view.html")
        ),
        name='article_detail'
        ),
    path('like/<int:pk>', views.like, name='like'),

В представлениях я должен также использовать "if request.method == "POST":"? views.py

def like(request, pk):

    article = get_object_or_404(Article, id=request.POST.get("article_id"))
    if article.likes.filter(id=request.user.id).exists():
        article.likes.remove(request.user)
        liked = False
    else:
        article.likes.add(request.user)
        liked = True
    return HttpResponseRedirect(reverse("article_detail", args=[int(pk)]))

и detail_view.py

класс .post есть, поэтому я использовал .closest(".post") в javascript.js

<div class="card post"> ........
                <div class="like-button-wrapper"
          data-post-id='{{ article.pk }}'
          data-csrf-token='{{ csrf_token }}'>


                        {% if liked %}
                        <button class="btn btn-danger position-relative" type="submit" id="like" name="article_id"
                            value="{{article.id}}">
                            <i class="bi bi-hand-thumbs-down">
                            </i>
                        </button>
                        {% else %}
                        <button class="btn btn-primary position-relative" type="submit" id="like" name="article_id"
                            value="{{article.id}}">
                            <i class="bi bi-hand-thumbs-up">
                            </i>
                            <span
                                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                {{ likes }}
                            </span>
                        </button>
                        {% endif %}
                </div>

Ок, я понял, это была ошибка 404, пришедшая из views.py get_or_404

Теперь я просто перестраиваю функцию like в представлениях, и она работает как надо


def like(request, pk):

    # if request.method == "POST":
    #     article = get_object_or_404(Article, id=request.POST.get("article_id"))
    #     print(article)
    #     if article.likes.filter(id=request.user.id).exists():
    #         article.likes.remove(request.user)
    #         liked = False
    #     else:
    #         article.likes.add(request.user)
    #         liked = True
    # return HttpResponseRedirect(reverse("article_detail", args=[int(pk)]))
    if request.method == "POST":
        #article = get_object_or_404(Article, id=request.POST.get("article_id"))
        article = Article.objects.get(id=pk)

        if article.likes.filter(id=request.user.id).exists():
            article.likes.remove(request.user)
            liked = False
        else:
            article.likes.add(request.user)
            liked = True

    return HttpResponseRedirect(reverse("article_detail", args=[int(pk)]))
Вернуться на верх