Как добавить запись, которая имеет внешний ключ, из frontend, имея только pk из fk

Возможно, это не лучший заголовок, но я постараюсь объяснить вопрос.

В моем приложении Django установлены две модели:

class Category(models.Model):
    class Meta:
        verbose_name_plural = "Categories"

    name = models.CharField(max_length=20)

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('home')



class Post(models.Model):
    title = models.CharField(max_length=255)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    body = models.TextField()
    post_date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title + " | " + str(self.author)

    def get_absolute_url(self):
        return reverse('post-details', args=(str(self.id)))

с соответствующими сериализаторами:

class UserSerializer(ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'first_name', 'last_name']


class CategorySerializer(ModelSerializer):
    class Meta:
        model = Category
        fields = ['id', 'name']


class PostSerializer(ModelSerializer):
    category = CategorySerializer()
    author = UserSerializer()

    class Meta:
        model = Post
        fields = ['id', 'title', 'author', 'category', 'body', 'post_date']

и набор представлений по умолчанию для Post:

from rest_framework.viewsets import ModelViewSet


class PostViewSet(ModelViewSet):
    serializer_class = PostSerializer
    queryset = Post.objects.all().order_by('-post_date')

Я хочу добавить новую запись, отправив axios POST запрос в мое Django приложение из Vue frontend и я хотел бы сделать это таким образом:

      const formData =  {
        title: this.title,
        category: this.category,
        body: this.body,
        author: this.$store.state.user_id,
      }
      axios({
        method: "POST",
        url: '/api/blog/posts/',
        headers: {"Content-Type": "application/json"},
        data: formData
      })
      .then(response => {
        this.$router.push({ name: 'home' });
      })
      .catch(err=> {
        console.log(err.response.data)
      })

Однако это, очевидно, возвращает ошибку Bad Request, потому что я передаю идентификаторы автора и категории, а не словари с соответствующими полями.

bad request

Мой вопрос заключается в следующем: можно ли передать только ID в моем запросе и создавать новые записи на их основе, или я должен как-то получить сначала пользователя и категорию, и вернуть их в моем POST запросе после?

Думаю, вам нужно установить дополнительные поля для загрузки id автора и id категории.

class PostSerializer(ModelSerializer):
    category_id = serializers.IntegerField(write_only = True)
    author_id = serializers.IntegerField(write_only = True)
    category = CategorySerializer(read_only = True)
    author = UserSerializer(read_only = True)

    class Meta:
        model = Post
        fields = ['id', 'title', 'author', 'category', 'body', 'post_date', 'author_id', 'category_id']

А во фронтенде нужно загрузить целочисленные идентификаторы.

const formData =  {
  title: this.title,
  category_id: parseInt(this.category, 10),
  body: this.body,
  author_id: parseInt(this.$store.state.user_id, 10),
}
Вернуться на верх