第一种方法是构建单独的 Django 和 React 应用程序。Django 将负责提供使用 Django REST 框架构建的 API,而 React 将使用 Axios 客户端或浏览器的 fetch API 使用这些 API。您需要有两台服务器,分别用于开发和生产,一台用于 Django(REST API),另一台用于 React(提供静态文件)。
第二种方法不同,前端和后端应用程序将耦合。基本上,您将使用 Django 来为 React 前端提供服务并公开 REST API。所以你需要将 React 和 Webpack 与 Django 集成,这些是你可以遵循的步骤
首先生成你的 Django 项目,然后在这个项目目录中使用 React CLI 生成你的 React 应用程序
对于 Django 项目,使用 pip安装 django-webpack-loader:
pip install django-webpack-loader
接下来将应用程序添加到已安装的应用程序并settings.py
通过添加以下对象进行配置
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': '',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
然后添加一个 Django 模板,该模板将用于挂载 React 应用程序并由 Django 提供服务
{ % load render_bundle from webpack_loader % }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Django + React </title>
</head>
<body>
<div id="root">
This is where React will be mounted
</div>
{ % render_bundle 'main' % }
</body>
</html>
然后添加一个 URLurls.py
来提供这个模板
from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView
urlpatterns = [
url(r'^', TemplateView.as_view(template_name="main.html")),
]
如果此时同时启动 Django 和 React 服务器,您将收到一个 Django 错误,指出webpack-stats.json
不存在。所以接下来你需要让你的 React 应用程序能够生成 stats 文件。
继续并在您的 React 应用程序中导航,然后安装 webpack-bundle-tracker
npm install webpack-bundle-tracker --save
然后弹出你的 Webpack 配置并转到config/webpack.config.dev.js
然后添加
var BundleTracker = require('webpack-bundle-tracker');
//...
module.exports = {
plugins: [
new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
]
}
这将BundleTracker插件添加到 Webpack 并指示它webpack-stats.json
在父文件夹中生成。
确保在config/webpack.config.prod.js
生产中也做同样的事情。
现在,如果你重新运行你的 React 服务器,webpack-stats.json
它将生成,Django 将能够使用它来查找有关 React 开发服务器生成的 Webpack 包的信息。
还有一些其他的事情要做。您可以从本教程中找到更多信息。