Django dan Vue: "Tidak dapat memuatkan sumber: Pelayan bertindak balas dengan status 500 (Ralat Pelayan Dalaman)" terus masuk ke tapak saya

Question

Saya menggunakan Vue dan Django untuk projek ini, tetapi apabila saya menjalankan kod saya, saya terus mendapat ralat ini

"Failed to load resource: the server responded with a status of 500 (Internal Server Error)

127.0.0.1:8000/api/v1/products/winter/yellow-jacket-with-no-zipper:1"

Saya terus memuat semula dan menunggu 30 minit untuk ralat ini hilang, tetapi ia terus datang. Saya tidak tahu sama ada terdapat sesuatu yang salah dengan javascript saya kerana saya menjalankan projek vue tanpa sebarang ralat.

Ini kod yang saya rasa bermasalah.

Belakang:

modul urls.py dalam pakej produk:

from django.urls import path, include

from product import views

urlpatterns = [
  path('latest-products/', views.LatestProductsList.as_view()),
  path('products/<slug:category_slug>/<slug:product_slug>', views.ProductDetail.as_view()),
]

Halaman hadapan:

Skrip Product.vue:

<template>
  <div class="page-product">
    <div class="columns is-multiline">
      <div class="column is-9">
        <figure class="image mb-6">
          <img v-bind:src="product.get_image">
        </figure>

        <h1 class="title">{{ product.name }}</h1>

        <p>{{ product.description }}</p>
      </div>

      <div class="column is-3">
        <h2 class="subtitle">Information</h2>

        <p>Price: <strong>{{ product.price }}</strong></p>

        <div class="field has-addons mt-6">
          <div class="control">
            <input type="number" class="input" min="1" v-model="quantity">
          </div>

          <div class="control">
            <a class="button is-dark">Add to Carts</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Product',
  data() {
    return {
      product: {},
      quantity: 1
    }
  },
  mounted() {
    this.getProduct()
  },
  methods: {
    getProduct() {
      const category_slug = this.$route.params.category_slug
      const product_slug = this.$route.params.product_slug

      axios
        .get(`/api/v1/products/${category_slug}/${product_slug}`)
        .then(response => {
          this.product = response.data
        })
        .catch(error => {
          console.log("error")
        })
    }
  }
}
</script>

Editor:

Selepas beberapa pengubahsuaian, saya rasa masalah itu disebabkan oleh modul views.py dalam pakej produk

from django.http import Http404

from rest_framework.views import APIView
from rest_framework.response import Response

from .models import Product
from .serializers import ProductSerializer

class LatestProductsList(APIView):
  def get(self, request, format=None):
    products = Product.objects.all()[0:4]
    serializer = ProductSerializer(products, many=True)
    return Response(serializer.data)

#I think its this line of code
class ProductDetail(APIView):
  def get_object(self, category_slug, product_slug):
    try:
      return Product.objects.filter(category_slug=category_slug).get(slug=product_slug)
    except Product.DoesNotExist:
      raise Http404

  def get(self, request, category_slug, product_slug, format=None):
    product = self.get_object(category_slug, product_slug)
    serializer = ProductSerializer(product)
    return Response(serializer.data)

Answer 1

Selepas mengubah suai kod, saya mendapati bahawa saya betul. Masalahnya ialah dengan modul views.py dalam pakej produk. Ini boleh dilihat dalam fungsi get_object dalam kelas ProductDetail.

Teks asal:

class ProductDetail(APIView):
  def get_object(self, category_slug, product_slug):
    try:
      return Product.objects.filter(category_slug=category_slug).get(slug=product_slug)
    except Product.DoesNotExist:
      raise Http404

Masalahnya ialah saya perlu menambah satu lagi garis bawah/garis bawah (perkara ini: _) apabila mentakrifkan kategori slug, jadi

category_slug=category_slug

menjadi

category__slug=category_slug

Versi baharu:

class ProductDetail(APIView):
      def get_object(self, category_slug, product_slug):
        try:
          return Product.objects.filter(category__slug=category_slug).get(slug=product_slug)
        except Product.DoesNotExist:
          raise Http404