如何结合 javascript/react 前端和 python 后端?

Posted

技术标签:

【中文标题】如何结合 javascript/react 前端和 python 后端?【英文标题】:How to combine javascript/react frontend and python backend? 【发布时间】:2020-06-17 02:34:07 【问题描述】:

我不太确定我的问题是否重复,但我无法找到对我的情况有帮助的东西。 设置 我已经建立了一个前端网页,其中包含一些服务,例如显示一些时间序列和有关我的系统的其他信息。该网站是使用 react 框架构建的,因此通常使用 javascript。 现在我想对时间序列进行一些计算,例如计算传感器数据的相似性和其他特征。为此,我正在使用 python,它为我提供了很多我已经使用了很长时间并且易于使用的库。我在寻找什么: 我正在寻找一种非常简单的方法来从反应 GUI 调用我的 backend-timeseries-analysis-python 脚本,并传递一些变量,例如系列的长度。我还想处理返回的值并保护归一化所需的当前值(如最大值、最小值)以进行进一步计算。 因此,过程如下所示:

1) Type value in react frontend input box
2) react/javascript calls pythonscript/ initialize a class and passes variables to class
3) python calculates similarity of sensor data 
4) python returns similarity values to frontend and saves classes for later call
5) react displays returned values
6) react/javascript calls pythonscript
7) python compares latest data to past data and refreshs treshholds(like max, min)
8) python calculates similarity of sensor data 
9) continue.. 

感谢您的帮助!

【问题讨论】:

flask 是一个非常简单的 python 服务器,可以满足你的需要 查看后端的 Flask 并使用它为您希望从 React 应用程序调用的服务公开一个 REST API。在 React 应用中使用 Axios 调用你的后端服务。 非常感谢你们。你能想出一种更简单的方法来在嵌入在 react 中的 javascript 中运行 python 命令吗?或者是使用烧瓶服务器的唯一方法? 如果它对其他人很重要:我最终使用了一个 mqtt 代理作为前端-后端 api。 【参考方案1】:

您可以在 REST API 上公开您的 Python 脚本,该 API 将由您的 React 前端调用。该 API 将建立数据库连接,并将响应发送到您的前端。

请参阅Flask(对于小型项目非常简单)甚至Django 来构建 Python API。

【讨论】:

非常感谢。我现在正在研究烧瓶,它似乎就是我想要的。 花了几个小时后,flask 似乎有点复杂,因为它是一个多页服务器,并且只反应一个单页服务器,flask 似乎在我现有的反应框架中集成得很差。所以基本上我正在寻找一种更直接的方法来直接从 javascript 调用 python 脚本。 @Sayydika 我也在找这个。自 1 年前发布此文章以来,您是否设法找到了可以在 Python 脚本和 JS SPA 之间进行通信的东西?【参考方案2】:

查看 Streamlit。它是 Flask /Django 的一个很好的替代品。我是一个后端 python 人,没有使用前端的经验,但我能够使用 Streamlit 快速启动前端。

【讨论】:

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于如何结合 javascript/react 前端和 python 后端?的主要内容,如果未能解决你的问题,请参考以下文章

Hadoop 和 BI 如何结合?搭建一个基于 Hadoop+Hive 的数据仓库,它的前端展现如何实现?如何实现 BI?

如何在 VS Code 中更改 JavaScript Babel 和 JavaScript React 的默认缩进?

前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件

前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件

前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件

如何使 Javascript/React/Typescript 获取调用异步?