在 Google App Engine 上连接 python 后端和 vue.js 前端

Posted

技术标签:

【中文标题】在 Google App Engine 上连接 python 后端和 vue.js 前端【英文标题】:Connecting a python backend and vue.js frontend on Google App Engine 【发布时间】:2018-09-25 09:31:40 【问题描述】:

我有一个任务,用 python 后端(不是烧瓶)和 Vue.js 前端在谷歌应用引擎上构建一个系统。 系统需要在谷歌应用引擎(谷歌云SDK)上加载vue.js应用(一些基本的hello world应用)。

我已经构建了 python 和 yaml 端并将其加载到 GAE 并构建了 vue.js 端.. 但我在如何连接部件上停留了很长时间,以便 python/yaml 将在加载 url 时加载我的应用程序..

请帮忙, 无论哪种方式,都提前感谢! :)

【问题讨论】:

请说明您已经尝试过的内容以及您遇到的具体问题,以便 SO 可以帮助您 嘿,我做了 python webapps 服务器,做了 vue.js 客户端 ui,我需要一个服务器和 http 函数实现作为“中间人”来使这个系统一起工作(或其他方式。 .?) 【参考方案1】:

严格来说,您的 Python 不会直接“加载您的应用”。

首先,冒着不必要的解释的风险,有一个重要的概念,即代码驻留位置与代码执行位置。您的 VueJS 代码驻留在服务器上的静态文件中,但在客户端/浏览器中执行。

:它是如何从服务器到浏览器执行的?:客户端必须向服务器发送请求来提供它。

:什么会导致浏览器发送这个请求?A:发送给它的其他代码中的指令,很可能是<script>标签html

所以,流程是这样的(根据未提供的详细信息,您可能会有所不同):

浏览器向服务器 (GAE) 发送 HTML 请求,例如主页 服务器 (GAE) 以 HTML 响应 此 HTML 可能由 Python 动态创建,也可能是静态文件。 此 HTML 包含指示浏览器请求更多文件的标记:图像、CSS、JS。 此 HTML 应包含 <script> 标记以请求您的 VueJS 代码。 浏览器接收 HTML 并对其进行处理,包括您的 VueJS 代码的 <script> 标记。 浏览器向服务器发送请求以获取 VueJS 代码。 服务器 (GAE) 使用包含 VueJS 代码的静态文件进行响应。 浏览器接收到包含 VueJS 代码的文件,运行它,您的 VueJS 现在已加载并运行! 当您的 VueJS 运行时,它可能会向服务器 (GAE) 发送 AJAX 请求以获取数据和/或更多代码。

您的 VueJS 代码必须驻留在服务器上的静态文件中。对于服务器(Python)来说,这个静态文件只是一个毫无意义的字节包(如果代码中有语法错误,直到它执行客户端才会被发现)。

如何将这些静态文件导入 GAE,以便在浏览器请求时可用?您可能已经获得了这个(对于 CSS、图像),但以防万一,请参阅此链接:Server Static Files,了解有关设置的详细信息。

【讨论】:

非常感谢您的回答。对我帮助很大!

以上是关于在 Google App Engine 上连接 python 后端和 vue.js 前端的主要内容,如果未能解决你的问题,请参考以下文章

连接 Google App Engine 和 Google Compute Engine

在 Flask + Google App Engine 上启用 SSL

Google App Engine 记录了一个新连接的混乱......并且客户端关闭了本地连接

Google App Engine 和 Cloud SQL:在“读取初始通信数据包”时失去与 MySQL 服务器的连接

建立数据库连接时出错:Google App Engine Deploy

使用 Google 工具箱 for Mac OAuth for Google App Engine