Как я могу отобразить данные из модели Django с помощью фронтенда React?

В настоящее время я работаю над сайтом личного портфолио, используя Django для бэкенда и базы данных, и React для всего фронтенда.

В этой программе у меня есть различные поля, которые я хотел бы обновлять время от времени; у меня есть таблицы Django для истории моего образования, моего опыта работы, моих навыков, и таблица для хранения записей портфолио. Я хотел бы отображать эту информацию на фронтенде React, где я мог бы отображать страницу, содержащую карточки со всеми проектами портфолио, которые я создал, и страницу, где отображается мой опыт работы, навыки и история образования.

Используя обычный Django, я бы просто выбрал элементы из таблицы в views.py и передал их в контекст, отображая элементы по мере необходимости. С React я не знаю, как бы я обработал такой запрос.

Как работает мой код в настоящее время, в компонентах React я объявляю объекты с необходимыми полями, например

const myExperiences = [{
        name: "Company name",
        title: "job title",
        description: "job description",
        startDate: "start", 
        endDate: "end",
        location: "city, country",
    }]

и отображаю их с помощью функции map, чтобы поместить их в нужный формат.

Это не идеально, поскольку это потребует от меня изменения исходного кода каждый раз, когда я захочу добавить больше записей, а я бы предпочел делать это из консоли администратора Django.

Моя другая идея заключалась в том, чтобы получать данные из Django API, но это кажется неэффективным, и необходимость получать информацию из 3 различных таблиц каждый раз, когда страница кажется медленной для пользователя без какой-либо причины.

Какой правильный курс действий здесь? Что бы вы посоветовали?

Ниже приведен базовый общий подход с установкой React / Django:

  1. Сделайте (async) API запрос в React к вашей конечной точке/представлению Django (в данном случае я использую стандартный fetch API)
  2. Сопоставить возвращенный JSON для создания элементов DOM для рендеринга
import PayrollRuns from "./PayrollRuns";
import PayrollDetails from "./PayrollDetails";
import {useEffect, useState} from "react";
import moment from "moment";


const PayrollWrapper = () => {

    // Set State for Payroll data
    const [payrollRuns, setPayrollRuns] = useState([])

    // Fetch data --> 1.)
    useEffect(() => {

        // Fetch the Payroll Data related to the logged in User
        fetch(`http://127.0.0.1:8000/api/lastpayrollruns/`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                 Authorization: `Token ${localStorage.getItem('token')}`
            },
        })
        .then(res => res.json())
        .then(data => {
          setPayrollRuns(data)
          });
    }, []);

    // --> 2.)
    const runItems = props.payrollRuns.map((run) =>
        <div key={run.id} className="flex justify-between p-2 text-lg text-base">
            <div>
                {moment(run.month.period).format('YYYY MMMM')}:
                Paid {run.payroll_run_items.length} talents
            </div>

            <div>
                {run.payroll_run_items.reduce((acc, value) => {
                  return parseFloat(value.amount.toFixed(2)) + acc; // Add 'value.amount' to 'acc'
                }, 0)}
            </div>
        </div>
    );

    return (
        <div className="runs-wrapper bg-white rounded-xl h-full w-48 shadow-sx-shadow p-4 flex flex-col">
            <h1 className="border-b-2 pb-4">Payroll Runs</h1>
            <div className="grow overflow-auto p-4">{runItems}</div>
        </div>
    )
}

export default PayrollWrapper

Django API конечная точка/вид для данного примера:

class PayrollRun(APIView):
    """
    Retrieve payroll runs including line items for a company
    """
    def get(self, request):
        company = Company.objects.get(userprofile__user=request.user)
        payroll_runs = Payroll.objects.filter(company=company).order_by('-month')
        serializer = PayrollSerializer(payroll_runs, many=True)

        return Response(serializer.data)

Примечание:

Одной из ключевых концепций этой установки является предоставление заголовка аутентификации (токена) для запроса API, поскольку вы захотите получить доступ к объекту Django authenticated user (request.user) в ваших представлениях, чтобы сделать запросы к базе данных в соответствии с пользователем на стороне клиента.

Вернуться на верх