Error 404 NOT FOUND occurs when trying to GET from django - django

Question

I am getting the 404 error
Failed to load resource: the server responded with a status of 404 (Not Found)
127.0.0.1:8000/api/v1/products/$%7Bcategory_slug%7D/$%7Bproduct_slug%7D:1
my code for product/models.py:
from io import BytesIO
from PIL import Image
from django.core.files import File
from django.db import models
class Category (models.Model):
name = models.CharField(max_length=255)
slug = models.SlugField(null=True)
class Meta:
ordering = ('name',)
def __str__(self) :
return self.name
def get_absolute_url(self):
return f'/{self.slug}/'
class Product(models.Model):
category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
name = models.CharField(max_length=255)
slug = models.SlugField(null=True)
description = models.TextField(blank=True, null=True)
price = models.DecimalField(max_digits=6, decimal_places=2)
image = models.ImageField(upload_to='uploads/', blank=True, null=True)
thumbnail = models.ImageField(upload_to='uploads/', blank=True, null=True)
date_added = models.DateTimeField(auto_now_add=True)
class Meta:
ordering = ('-date_added',)
def __str__(self) :
return self.name
def get_absolute_url(self):
return f'/{self.category.slug}/{self.slug}/'
def get_image(self):
if self.image:
return 'http://127.0.0.1:8000' + self.image.url
return ''
def get_thumbnail(self):
if self.thumbnail:
return 'http://127.0.0.1:8000' + self.thumbnail.url
else:
if self.image:
self.thumbnail = self.make_thumbnail(self.image)
self.save()
return 'http://127.0.0.1:8000' + self.thumbnail.url
else:
return ''
def make_thumbnail(self, image, size=(300, 200)):
img = Image.open(image)
img.convert('RGB')
img.thumbnail(size)
thumb_io = BytesIO()
img.save(thumb_io, 'JPEG', quality=85)
thumbnail = File(thumb_io, name=image.name)
return thumbnail
the product page,product.vue code:
<template>
<div class="page-product">
<div class="column 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><strong>Price: </strong>Ksh{{ product.price }}</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" #click="addToCart">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { toast } from 'bulma-toast'
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)
})
},
addToCart() {
if (isNaN(this.quantity) || this.quantity < 1) {
this.quantity = 1
}
const item = {
product: this.product,
quantity: this.quantity
}
this.$store.commit('addToCart', item)
toast({
message: 'The product was added to the cart!',
type: 'is-success',
dismissible: true,
pauseOnHover: true,
duration: 2000,
position: 'bottom-right',
})
}
}
}
</script>
my product/urls.py code is:
from django.urls import path
from product import views
urlpatterns = [
path('latest-products/', views.LatestProductsList.as_view()),
path('products/<slug:category_slug>/<slug:product_slug>/', views.ProductDetail.as_view()),
]
my main.js in for the vue app is :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8000'
createApp(App).use(store).use(router, axios).mount('#app')

Answer 1

You make a request with "/api/v1/" in axios. Did you forget that inside Django URL patterns or "axios.defaults.baseURL"?
axios
.get('/api/v1/products/${category_slug}/${product_slug}')
.then(response => {
this.product = response.data
})
.catch(error => {
console.log(error)
})