reactjs和django如何结合或集成

Posted 2023-02-24

【中文标题】reactjs和django如何结合或集成

【英文标题】：how to combine or integrate reactjs and Django

【发布时间】：2020-08-20 04:06:29

【问题描述】：

我在 Reactjs 中创建了前端，在 Django 中创建了后端，并使用 Django rest API 进行链接。但是 react 在 localhost:3000 中运行，而 Django 在 localhost:8000 中运行。如何将这两者结合或整合并在同一个地址运行。

【问题讨论】：

我制作了一个包含托管和文件上传的样板。你可以在这里找到它：hvitis.dev/how-to-connect-filepond-reactjs-and-drf-extension

【参考方案1】：

发展

如果您处于开发阶段并使用Create React App，那么您可以将"proxy": "http://localhost:8000" 添加到您的package.json。然后你在 React 中完成的 api 请求将被转发到端口 8000。

生产

生产设置完全不同。你会想要运行yarn build 并让Django 本身或nginx 为index.html 提供服务。在这种情况下，将不再有多个端口，因为 React 构建只是静态文件。

当我们使用同一个堆栈 (GitHub) 交谈时，我正在创建一个示例真实世界项目。它还没有完全准备好生产设置，但如果你想要一些灵感，可以查看我的开发设置。

【讨论】：

这会集成 react 和 Django 吗？？

【参考方案2】：

您需要使用您在后端创建的路由来链接它们。将路由放入 React 前端的 fetch 请求中，并通过 GET 或 POST 方法等调用它们。一旦您将应用程序部署到服务器，您的用户只会点击前端主机地址。

【讨论】：

怎么做？

假设你在后端有一个这样的路由：localhost:5000/photos 然后在前端反应你需要使用 fetch('localhost:5000/photos/') 从后端取回响应.然后，您可以使用收到的响应对象通过反应组件呈现数据。