我将如何使用 React 前端从 Django 模型渲染数据？

Question

我目前正在开发个人作品集网站，后端和数据库使用 Django，所有前端使用 React。

在这个程序中，我有各种各样的字段，我想每隔一段时间更新一次；我有 Django tables 用于我的教育历史、我的工作经验、我的技能，还有一个 table 用于保存投资组合条目。我想在我的 React 前端显示这些信息，我可以在其中显示一个页面，其中包含我创建的所有投资组合项目的卡片，以及一个显示我的工作经验、技能和教育历史的页面。

使用普通的 Django，我只需从 views.py 中的 table 中选择项目并将其传递给上下文，根据需要呈现项目。使用 React，我不知道我将如何处理这样的请求。

我的代码目前的工作方式是，在 React 组件中，我声明了具有必填字段的对象，例如

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

然后我使用地图函数将它们以所需的格式显示出来。

这并不理想，因为它要求我在任何时候想要添加更多条目时更改我的源代码，而我宁愿在 Django 管理控制台中这样做。

我的另一个想法是从 Django API 中获取数据，但这似乎效率低下，并且每次页面感觉都必须从 3 个不同的 table 中获取信息无缘无故为用户慢

正确的做法是什么？你们有什么建议吗？

Answer 1

根据要求，请在下面找到 React/Django 设置的基本通用方法：

在 React 中向您的 Django 发出（异步）API 请求 endpoint/view（在这种情况下，我使用的是标准获取 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 endpoint/view 对于给定的示例：

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 请求提供身份验证 header（令牌），因为您将要访问 Django authenticated user (request.user) object在您的视图中根据客户端的用户进行数据库查询。

我将如何使用 React 前端从 Django 模型渲染数据？

How would I render data from a Django model with a React frontend?

javascript

reactjs

django

ajax

frontend