如何让Django和ReactJS共同工作?
如何让Django和ReactJS共同工作?
我是Django的新手,对ReactJS更是一窍不通。我曾研究过AngularJS和ReactJS,但最终选择了ReactJS。尽管AngularJS在市场份额上占据优势,但ReactJS似乎在流行度上领先一步,并且据说更容易上手。
撇开这些琐事不谈,我开始在Udemy上学习ReactJS,但在观看几个视频后,我发现了与Django的集成问题。当我开始尝试运行它时,不可避免地遇到了一些困难,想知道是否有相关的文档,以免浪费几个小时或几个晚上的时间。
我发现的几个教程或pip包并不全面,而且其中一些已经过时,例如pyreact。
我考虑过将ReactJS完全分离开来,但同时要考虑我希望ReactJS组件渲染的类和ID。在将这些独立的ReactJS组件编译成一个ES5文件后,只需将该单个文件导入到Django模板中。
然而,当涉及到从Django模型中渲染时,我认为这种方法可能很快就会崩溃,尽管Django Rest Framework可能会参与其中。我甚至还没有看到Redux对所有这些的影响。
有人能清楚地告诉我他们如何使用Django和ReactJS吗?
无论如何,AngularJS和Django的文档和教程非常丰富,所以很诱人地选择这条路线来开始使用任何前端框架...这不是最好的理由。
如何让Django和ReactJS合作?原因是一些答案在4年前提出之后,一些事情发生了变化,并且许多得票数最高的答案声称您必须将其设置为两个独立的应用程序是不准确的。有两种主要的架构选项:
1. 使用类似于create-react-app和Django REST Framework的完全解耦的客户端/服务器方法。
2. 使用React构建流水线(可能使用webpack)设置混合架构,然后将编译文件作为静态文件包含在Django模板中。
这两种选项可能如下所示:
选项1(客户端/服务器架构):
![Client / Server Architecture](https://i.stack.imgur.com/Sq1hr.png)
选项2(混合架构):
![Hybrid Architecture](https://i.stack.imgur.com/RKKEa.png)
这两种选项之间的决策将取决于您或您团队的经验,以及您的UI的复杂性。如果您有很多JS经验,希望将前端/后端开发人员分开或者希望将整个应用程序编写为React单页应用程序,则第一种选项是不错的选择。第二种选项通常更适合您更熟悉Django并且希望快速移动同时还使用React来构建应用程序的一些部分。我发现它特别适合全栈独立开发者。
在系列文章"Modern JavaScript for Django Developers"中有更多的信息,包括选择架构,将JS构建集成到Django项目中以及构建单页React应用程序等。完全透明,我是该系列文章的作者。
我尽力遵循指导,但是当我尝试运行它时,出现了一个关于URL设置的错误。具体来说,在path('hello-webpack/', TemplateView.as_view(template_name='hello_webpack.html'))
这一行中,它不知道TemplateViews
。你是否导入了这个类?您可以在这里找到更多详细信息:[docs.djangoproject.com/en/4.0/topics/class-based-views](https://docs.djangoproject.com/en/4.0/topics/class-based-views)。
选项2是否仍然可以使用Django表单和上下文处理器?
哦,实际上我刚刚看到了你的文章。里面有很好的信息!
如何让Django和ReactJS一起工作?
在开始让Django和React.js一起工作时,我感同身受。我做了几个Django项目,我认为React.js是Django的一个很好的配对。然而,开始的过程可能有点吓人。我们站在巨人的肩膀上;)
以下是我认为它们如何一起工作的大致情况(如果有错误,请纠正我):
- Django和它的数据库(我更喜欢Postgres)在一边(后端)
- Django Rest框架提供对外界(如移动应用程序和React等)的接口
- Reactjs、Nodejs、Webpack、Redux(或者可能是MobX)在另一边(前端)
Django和“前端”的通信是通过Rest框架完成的。确保为Rest框架设置授权和权限。
我找到了一个非常适合这种场景的好模板,并且它可以直接使用。只需按照readme https://github.com/scottwoodall/django-react-template操作,完成后,您将拥有一个相当不错的Django Reactjs项目。
这绝不是为生产环境准备的,而是为了让您深入了解事物是如何连接和工作的!
我想提出一个小小的建议:
按照设置说明进行操作,但在进行第二步设置后端(这里是Django https://github.com/scottwoodall/django-react-template/blob/master/backend/README.md)之前,更改设置的要求文件。
您可以在项目中找到文件 backend/requirements/common.pip
用以下内容替换文件内容
appdirs==1.4.0 Django==1.10.5 django-autofixture==0.12.0 django-extensions==1.6.1 django-filter==1.0.1 djangorestframework==3.5.3 psycopg2==2.6.1
这将为您提供Django和它的Rest框架的最新稳定版本。
希望对您有所帮助。
一年后,我转向了VUE.js (vuejs.org)。我让它与Django模板一起工作,并通过Django Rest框架与数据库通信。它快速而轻巧(约20kb)。
如何使Django和ReactJS一起工作?
原因:React将使用Django的REST API。前端和后端没有任何连接。React将通过HTTP请求访问REST API以获取和设置数据。React需要使用Webpack和Babel来打包和转译JavaScript代码,并将其放置在入口HTML页面中。需要学习Webpack、Babel、JavaScript、React和Redux。React在渲染页面时将使用API获取数据并进行渲染。需要对HTTP请求、JavaScript(ES6)、Promise、中间件和React有一定的了解。需要查找一些可以帮助的资源,例如Django和React API的教程、设置Django与React的文章等。
解决方法:
- 观看[Django和React API的Youtube教程](https://www.youtube.com/watch?v=CxjJ7siCK44)
- 参考[使用React设置Django](https://web.archive.org/web/20171207032005/http://geezhawk.github.io/using-react-with-django-rest-framework)(使用存档网页链接替代了损坏的链接)
- 使用上述提到的关键词搜索其他资源,首先尝试搜索"Django React Webpack"
- 查看[这篇文章](https://medium.com/labcodes/configuring-django-with-react-4c599d1eae63),它提供了一种配置Django和React的方法。
希望这些信息能够指导你朝正确的方向前进!祝你好运!希望其他专业的Django开发人员能够补充我的回答。