mk3mk
@mk3mk
занимаюсь вёрсткой (иногда)

Как вывести категории постов в приложении Django React?

Есть приложение. АПИ на Django, фронт на React.
База данных SQlite3.
С помощью AXIOS Получаем из АПИ список постов и выводим их список на странице.
Требуется помимо названия и тела поста вывести категорию поста.
С названием и телом все понятно, мы их выводим с помощью post.title, post.body,
А вот как вывести категорию, не понятно.
Категории идут в другой таблице базы данных.
И еще нужно вывести количество комментариев к каждому посту.

Вот модели в Django
from django.db import models


class Post(models.Model):
    created = models.DateTimeField(auto_now_add=True)
    title = models.CharField(max_length=100, blank=True, default='')
    body = models.TextField(blank=True, default='')
    owner = models.ForeignKey('auth.User', related_name='posts', on_delete=models.CASCADE)

    class Meta:
        ordering = ['created']


class Comment(models.Model):
    created = models.DateTimeField(auto_now_add=True)
    body = models.TextField(blank=False)
    owner = models.ForeignKey('auth.User', related_name='comments', on_delete=models.CASCADE)
    post = models.ForeignKey('Post', related_name='comments', on_delete=models.CASCADE)

    class Meta:
        ordering = ['created']


class Category(models.Model):
    name = models.CharField(max_length=100, blank=False, default='')
    owner = models.ForeignKey('auth.User', related_name='categories', on_delete=models.CASCADE)
    posts = models.ManyToManyField('Post', related_name='categories', blank=True)

    class Meta:
        verbose_name_plural = 'categories'


А вот здесь мы в React получаем и выводим посты. post.title и post.body

import React, { useState, useEffect } from 'react';

import axios from "axios";

const client = axios.create({
  baseURL: "http://127.0.0.1:8000/posts"
});

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    client.get('?_limit=10').then((response) => {
      setPosts(response.data);
    });
  }, []);

  return (
    <div className="app">
      <h2>All Posts</h2>
      {posts.map((post) => {
        return (
          <div className="post-card" key={post.id}>
            <h2 className="post-title">{post.title}</h2>
            <p className="post-body">{post.body}</p>
          </div>
        );
      })}
    </div>
  );
};

export default Posts;
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 1
nnnLik
@nnnLik
Capybara god
class PostSerializer(serializers.ModelSerializer):
    categories = serializers.StringRelatedField(many=True)
    comments_count = serializers.SerializerMethodField()

    class Meta:
        model = Post
        fields = ('id', 'title', 'body', 'categories', 'comments_count')

    def get_comments_count(self, obj):
        return obj.comments.count()


Ну и еще можно посмотреть в сторону TreeForeignKey из mptt.models для реализации комментов
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
08 нояб. 2024, в 21:09
8000 руб./за проект
08 нояб. 2024, в 20:58
1000 руб./за проект
08 нояб. 2024, в 20:30
10000 руб./за проект