Actualmente estoy trabajando en un sitio web de cartera personal usando Django para el backend y la base de datos, y React para todo el frontend.
En este programa, tengo varios campos que me gustaría actualizar de vez en cuando; Tengo tablas de Django para mi historial educativo, mis experiencias laborales, mis habilidades y una tabla para guardar las entradas del portafolio. Me gustaría mostrar esta información en mi interfaz React, donde podría mostrar una página que contiene tarjetas con todos los proyectos de cartera que he creado, y una página donde se muestra mi experiencia laboral, habilidades e historial educativo.
Usando Django simple, simplemente habría seleccionado los elementos de la tabla en views.py y los habría pasado al contexto, representando los elementos según sea necesario. Con React, no sé cómo manejaría tal solicitud.
La forma en que mi código funciona actualmente, en los componentes de React, declaro objetos con los campos requeridos como
const myExperiences = [{ name: "Company name", title: "job title", description: "job description", startDate: "start", endDate: "end", location: "city, country", }]y los muestro usando la función de mapa para ponerlos en el formato deseado.
Esto no es ideal ya que me obligaría a cambiar mi código fuente cada vez que quisiera agregar más entradas, donde preferiría hacerlo desde la consola de administración de Django.
Mi otra idea era obtener los datos de una API de Django, pero eso parece ineficiente y tener que obtener información de 3 tablas diferentes cada vez que la página se siente lenta para el usuario sin ningún motivo.
¿Cuál es el curso de acción correcto aquí? ¿Qué sugerirían ustedes?
Según lo solicitado, encuentre a continuación un enfoque común básico con una configuración de React / Django:
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 PayrollWrapperPunto final/vista de la API de Django para el ejemplo dado:
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)Nota:
Un concepto clave de esta configuración es proporcionar el encabezado de autenticación (token) para la solicitud de API, ya que querrá acceder al objeto de authenticated user (request.user) en sus vistas para realizar las consultas de la base de datos de acuerdo con el usuario del lado del cliente. .