django+react拼图的缺失部分

django-cra-helper的Python项目详细描述


Django CRA助手

简介

django cra helper是django和create react app之间缺少的链接。通过将其添加到django项目中,您几乎可以毫不费力地将react组件注入django模板,并通过django上下文变量初始化组件属性。

这个包的最终目标是将这两个项目集成起来,对开发过程中通常使用的工作流进行最小的更改。从npm startpython manage.py collectstatic,您的命令应该按预期工作,这样您就可以忘记实现,回到开发!

< Buff行情>

注意:在本自述文件中,缩写词cra将用于指代create react app

安装

此软件包可通过pip

进行安装
pip install django-cra-helper

设置和配置

一旦安装了django cra helper,就需要在settings.py中的已安装的应用程序中添加cra helper

INSTALLED_APPS=['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','cra_helper','django.contrib.staticfiles',]
< Buff行情>

注意:cra_helper必须放在列表中的django.contrib.staticfiles上方!

cra_helper.context_processors.static添加到templates['options']['context_processors']

TEMPLATES=[{# ...snip...'OPTIONS':{'context_processors':[# ...snip...'cra_helper.context_processors.static',],},},]

此外,还需要将以下staticfiles\u finders列表添加到settings.py

STATICFILES_FINDERS=[# Django defaults'django.contrib.staticfiles.finders.FileSystemFinder','django.contrib.staticfiles.finders.AppDirectoriesFinder',# A finder to pull in asset-manifest.json'cra_helper.finders.CRAManifestFinder',]

最后一个必要的设置是包含CRA项目文件的文件夹的名称,相对于django项目的基本目录(包含manage.py的文件夹):

CRA_APP_NAME='cra-app'

如果由于某种原因CRA LiveServer不在本地主机或端口3000上运行,则可以在settings.py中添加以下设置以指定其实际主机和端口:

CRA_HOST='0.0.0.0'CRA_PORT=9999
< Buff行情>

注意:如果您没有为cra_host设置值,那么django cra helper将默认为host'localhost'

< Buff行情>

注意:如果未设置CRA_port的值,则django CRA helper将默认为port3000

最后,运行cra的npm run build命令一次以生成build/目录。django cra helper需要包含在中的build/asset manifest.json文件来帮助加载任何react组件中可能使用的非js和非css资产。在项目中添加新的非js或非css资源时,应重新运行此命令。

一旦一切就绪,django cra helper将使以下操作成为可能:

从CRA LiveServer实时访问React组件

如果在通过python manage.py runserver启动django的开发服务器之前,cra项目的liveserver是通过npm start启动的,那么react代码库中的代码更改也将在django视图中立即更新。

当cra liveserver运行时,django cra helper添加一个bundle\u js模板变量,该变量可以插入到django视图的模板中,以加载包含所有当前js和css的liveserver的中间bundle.js文件。每当对react代码进行编辑时,liveserver会动态重新编译此文件。此文件可以添加到django模板,如下所示:

{% if bundle_js %}<scripttype="text/javascript"src="{{ bundle_js }}"></script>{% endif %}
< Buff行情>

注意:此处不要使用static模板标记!此文件需要从CRA LiveServer加载。

在生产中访问react组件

django cra helper还负责确保django的collectStatic命令拉入由CRA的NPM run build命令构建的生产就绪包。

首先,使用典型的cranpmbuild命令为生产准备react文件:

npm run build

这将把捆绑的、缩小的javascript和css以及资产输出到cra项目文件夹中的/build/文件夹。

完成此命令后,运行以下django命令收集静态文件,包括编译的react资产:

python manage.py collectstatic --no-input

react资产将包含在settings.static_root目录中的其他静态资产中,在django生产环境中通常使用。一个asset manifest.json文件也将被拉入。django cra helper需要此cra生成文件的内容来帮助引用在生成过程中向其文件名添加了唯一散列的react文件。

类似于前面提到的bundle_js模板变量,django cra helper在cra liveservernot运行时包含许多其他模板变量。最重要的两个是main\u jsmain\u css。可以通过对模板中{%static%}的典型调用将它们注入页面:

pip install django-cra-helper
0
pip install django-cra-helper
1

通过将/code>替换为/(句点),可以在模板中访问由cra捆绑的其他资产,包括图像资产。django cra helperasset manifest.json中的每个条目添加到基本上下文中,使用这些替换规则来容纳django的static标记。

例如,cra项目中的logo.svg文件可以包含在django模板中,如下所示:

pip install django-cra-helper
2 < Buff行情>

注意:这是可选的!静态资产仍然可以包含在django应用程序的/static/目录中,并照常加载。只有在重用特定组件之外的react资产时,才需要上述特殊替换。

通过django模板上下文访问react组件

当django提供视图时,cra项目将需要进行一点重新架构,以准备接受django的输入值。下面是对cra项目的src/index.js文件进行一些小的调整后,如何为django建立一个简单的api来与绑定的react代码库通信的示例:

pip install django-cra-helper
3

基本上,index.js会更新为读取设置为window.componentwindow.propswindow.reactroot的值,并使用这些值呈现组件。这三个"输入"中的每一个都将允许django轻松地指定每个视图要初始化的组件:

  • window.component:指向页中的组件项的字符串
  • window.props:包含要传递到组件中的道具的对象
  • window.reactroot:一个document.getelementbyid的实例
< Buff行情>

注意:设置这些值是可选的。上述模板中指定的默认值允许组件在从CRA LiveServer查看时按预期呈现。

既然"api"已经就位,django视图可以通过它们传递给模板的上下文包含这些输入的值:

pip install django-cra-helper
4

下面是django应用程序的index.html模板,它将呈现上下文:

pip install django-cra-helper
5

上下文的组件道具分别绑定到window.componentwindow.props

注意在设置windows.props时使用json过滤器!{%load cra_helper_tags%}提供此筛选器,以便轻松清理和转换python到javascript对象。因此,上面准备的视图上下文呈现为以下典型的javascript对象:

pip install django-cra-helper
6

最后,window.reactroot指定应将react组件呈现到的容器元素。仅当容器的id而不是"根"(在CRA项目的index.html中分配给容器<;div>;的同一ID)时,才需要设置此值。

显示的回报

当所有这些都完成后,react组件现在应该可以在cra liveserver和通过django服务时呈现和查看。下面是一个稍加修改的craa p p组件的示例,显示在django(左)和cra(右):

比较快照

待办事项

  • 了解如何让django在代码更新后在cra liveserver重新加载时自动重新加载。

欢迎加入QQ群-->: 979659372 Python中文网_新手群

推荐PyPI第三方库


热门话题
jsf-java。安全NoSuchAlgorithmException:在jboss上部署时AES密钥生成器不可用   使用servlet与持久化java应用程序对话   java SPNEGO获取用户详细信息   如何向数组中的每个元素添加特定的数字?JAVA   佛教日历中的java JSpinner日期编辑器   tomcat6如何使用ip地址从另一台机器运行java动态web项目   向数据模型添加行时发生java ArrayIndexOutOfBoundsException   java奇怪的线程行为   java为什么程序没有显示任何输出?   具有弱值的java HashMap   java可以收集数据。不可修改地图是否保留原始地图?   java如何确定应用程序中的gccpu利用率?   带文本文件和比较索引的java摩尔斯电码   java第二个按钮没有响应   Maven LifecycleExecutionException java。util。ConcurrentModificationException帮助读取此堆栈跟踪/调试   java试图实现持有密钥绑定   运行时如何在Java程序中检索环境变量(外部修改)的修改值?   java可以在Gsheets数据验证下拉菜单中使用IF函数吗   java应该是抽象还是实现的一部分?