时间戳

首页 > 解决方案 > Angular：如何在 Flask 上服务并路由到不同的端点/路径？

angular - Angular：如何在 Flask 上服务并路由到不同的端点/路径？

问题描述

我正在尝试使 Angular 应用程序与 Flask 一起加载以加载 Angular 应用程序登录页面。仅使用https://domainname/工作正常，但我无法路由到https://domainname/login.

重现步骤：

最初我使用了另一种解决方案，但在尝试的过程中，我最终采用了 Stack Overflow 问题Python (Flask) 为 Angular 项目的 index.html 文件提供服务所建议的方法

烧瓶路线

@app.route('/<path:path>', methods=['GET'])
def static_proxy(path):
  return send_from_directory('./dist/', path)


@app.route('/')
def root():
  return send_from_directory('./dist/', 'index.html')

Angular 应用程序的生产版本直接放在dist文件夹中。该https://domainname/请求到达第一条路线，实际上我看不到第二条路线有效。因此，当我键入https://domainname/login它时，它会命中第一条路线，当然它会返回404，因为“dist”文件夹中没有名称为 login 的文件。所以问题是，如何路由到如下路径：

我尝试过的另一个配置，它具有相同的行为，正在使用Blueprint. 我不明白为什么，仍然不能使用/login路径，因为在这个版本中应该返回 index.html 文件并且它应该在客户端工作，对吗？（这里的角度应用程序构建到静态/分布）

main.py
from app.api_default import api as default_blueprint
app.register_blueprint(default_blueprint)

...

app/api_default/__init__.py
STATIC_FOLDER = os.path.join(os.pardir, 'static/dist')
api = Blueprint('default', __name__, static_folder=STATIC_FOLDER, static_url_path='')
from . import routes

...

app/api_default/routes.py

@api.route('/', defaults={'path': ''})
@api.route('/<path:path>')
def route_path(path):
  return api.send_static_file('index.html')


@api.route('/')
def home_paths():
  return api.send_static_file('index.html')

标签： angularflask

解决方案

Angular 应用程序是单页应用程序 (SPA)。SPA 是一种 Web 应用程序或网站，它通过动态重写当前页面而不是从服务器加载整个新页面来与用户交互 [ 1 ]。

一旦你index.html从 Flask 成功地提供了页面并加载了 Angular 应用程序，路由将由Angular Router处理。

请参阅路由和导航

推荐阅读