Как я могу отобразить данные из модели 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:
- Сделайте (async) API запрос в React к вашей конечной точке/представлению Django (в данном случае я использую стандартный fetch API)
- Сопоставить возвращенный 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)
в ваших представлениях, чтобы сделать запросы к базе данных в соответствии с пользователем на стороне клиента.