我如何能够实现将我们的新公司项目使用reactjs用作前端并将django用作后端api服务器的目标。

你好,世界!

今天,我将分享我在Django和ReactJS方面的最新经验(昨天的经验),以及如何使用这两个单独的框架相互交流和交换信息。 您一定在想:“这有什么大不了的? 为什么这些家伙炫耀?”好吧,让我告诉你情况如何,我在挣扎多少。

让我问你一个问题#1)你知道Django框架吗? 如果您不了解,那么以下信息对您有意义。 Django是服务器端最佳的Web框架之一,也是网站python语言的最佳框架之一。 它具有许多功能,包括数据库支持,ORM,安全性,模板引擎等。django是我最喜欢使用的框架。 您必须处理django的一件事是发布请求后的CSRF令牌。 如果您正在使用django的模板引擎并提供html表单,则可以简单地将隐藏的输入标签与csrf令牌一起使用,并且django将为您提供服务,并且它会为您设置Cookie,因此浏览器也将在每次发布请求时对其进行处理。 但是,当您打算使用post方法发送表单时,如果您的JavaScript库未正确处理它,则可能会遇到http 403禁止响应。 但是同样,如果您将django用于前端和后端,这并不难。

让我问你问题#2)你知道ReactJs吗? 它是所有前端库,也是最受欢迎和最强大的库之一,它节省了开发人员的时间,并有助于创建出色的前端应用程序。

React使创建交互式UI变得轻而易举。

除非JavaScript对您造成痛苦,否则这是事实! 回到我的原始故事,我想做的是两件事。 使用django并分别做出反应,一个作为纯后端运行在处理数据库的“ X”服务器上,另一个作为仅从服务器“ Y”提供的前端服务。 但是如何? 现在我无法使用Django的

  < form method =“ post”> {% csrf_token %} 

因为前端reactks与后端django在不同的服务器上。 因此,如果我想使用邮寄请求提交表单,我将面临http 403禁止错误。 我能做什么? 我用Google搜索了“ reactjs django csrf令牌”,然后猜猜是什么! 我在0.48秒内投入了大约33,800个结果,而在前10个结果中,我找不到用例。 可能我搜索错了吗? 可能是,所以我做了更多的谷歌搜索,您猜怎么着? 互联网是如此神奇,我仍然找不到我的解决方案。 可能是我不擅长使用Google搜寻功能! 我猜! 因此,我所能做的就是锻炼我称为“大脑”的好肌肉,并找到一种应对这种情况的方法。 在“ www.project.com”上提供reactjs前端,在“ api.project.com”上使用django后端,这两个独立的Web服务器关注各自的业务! 就像大多数事情在2018年一样有效。因此以下是我针对开发环境的解决方案,

1.设置一个名为“ apiproject”的django项目,并在端口9000(localhost:9000)上运行

2.为前端创建reactjs项目,并在默认端口3000(localhost:3000)上运行它

3.在后端“ / validate”上创建端点,该端点接受get请求并以json对象{“ csrf_token”:“ 123abc”}的形式返回csrf令牌,并且该端点将是我的reactjs应用程序在加载后立即运行的第一个位置。

4.现在我也可以为移动应用程序使用相同的端点和所有将来的端点。

5.收到csrf令牌作为json后,将其保存为我的react状态和wallaa…。

6.等待,我还没有完成! 😅

7.下次当我使用reactjs创建任何表单时,我将添加隐藏的输入,名称为“ csrfmiddlewaretoken”,并带有已保存的csrf令牌的值。 现在,我的表单已准备就绪,可以处理它,因为当我提交表单时,它将具有django正在寻找的数据,对吗?

8.不,我们忘记了另外两件事。 CORS和Cookie。

为了处理CORS,我使用了名为“ django-cors-headers”的django中间件,并添加了诸如localhost:3000中的allow和其他设置。 对于reactjs,我添加了名为“ react-cookie”的npm包,该包允许获取或设置cookie。

9.回到细节方面,我确实在django和reactjs代码中添加了一些次要设置,但是现在,使用axios for reactjs,我使用相同的csrf令牌设置“ csrftoken” cookie,并能够将发布请求发送到我的django后端api服务器。

欢呼!!!

哦,等等,您一定在想您的代码示例在哪里愚蠢! 好吧,我认为这篇文章已经足够长了,我不想扩大篇幅,所以不要在这里添加代码。 但是,我将在另一篇文章中分享所有代码示例,并在此处添加该链接。 我还计划为此为像我这样的视觉学习者创建视频教程。 您可以在instagram上的“ _desiprogrammer_”关注我,或者在“ vj.desiprogrammer”的facebook上关注我,以了解最新信息。 我将在youtube和medium以及instagram上分享更多代码示例,而facebook是与我保持联系的最简单方法。

也可以随时对此信息发表评论,并让我知道您的建议和疑虑。 下篇再见。

谢谢🤓