烧瓶-组件模板的结构？

Question

我一直在尝试使用Flask模板结构来类似于组件工作流程。这是受Vue启发的。

一些关键思想：

1. 每个页面都被视为一个组件
2. 组件只是一个文件夹，其中包含所有必需的文件（常见文件除外）
3. 鼓励每个组件都有几个HTML文件以避免大文件，我们将使用Jinja的include来“捆绑”它们 陶吉特
4. 避免使用javascript，或者至少避免加载不必要的javascript，每个页面只会include仅提供必要的内容

这是一个例子：

PageExample的路线如下：

app.route('/example'):
  return render_template('PageExample/html.html')

和PageExample / html.html：

{% extends 'base.html' %}
{% block content %}
<div class="tab" id="tab1">
  {% include 'PageExample/tab1.html' %}
</div>
<div class="tab" id="tab2">
  {% include 'PageExample/tab2.html' %}
</div>
{% endblock %}

PageExample / tab1.html（tab2遵循相同的逻辑）

<!-- block header is in base.html -->
{% block header %}
  {{ super() }}
  <script src="{{url_for('components', 'PageExample/tab1.js')}}">
{% endblock %}
<div class="tab-content">
  Some content here that uses the tab1.js javascript
</div>

那么，有什么问题？

我对Flask的经验有限，所以我不确定这个主意是否合理，似乎很笨拙，但是它使开发页面更加容易，尤其是对于多人开发（可以用任何方式完成页面的小javascript） ）。装载速度也提高了一吨。

这有效吗？推荐这种结构吗？有任何缺陷吗？我会遇到什么问题？有什么建议可以做得更好吗？如今，这已经在Flask中完成了吗？我找不到以这种方式完成的Flask应用程序的任何示例（特别是Jinja中使用了大量包含项的东西）

Answer 1

我目前不在我的主计算机上，因此以后会在需要时进行更新，但是如果您包含的html文件引用了后端中存储的任何数据，那么您还需要确保引用那里的确切位置。

例如： 如果您需要User类中的名字属性，则为

{{ User.firstName }}

不仅如此，还需要向此选项卡模板提供User.firstName变量，这不是隐式完成的。

您将需要先创建Blueprint，然后再创建View，并告诉视图使User.firstName变量可用于PageExample/tab1.html

tabs.py

import User
from flask import Blueprint, render_template
import """other flask dependencies needed"""

bp = Blueprint('index', __name__, url_prefix='/')

def tabData():
    """data to process"""
    render_template("PageExample/tab1.html", User=User)

在同一tabs.py文件中，您还可以为tab2.html和html.html编写视图。应该注意的是，我假设PageExample的内容用于网站的索引，并且它们都将呈现在同一页面上。

此外，看来您的标签页将位于html的内容/正文中，但它还将呈现base.html的块并在html.html的正文中内联添加已定义的脚本。相反，应该在html.html文件本身中引用它

html.html

{% extends 'base.html' %}
{% block header %}
  {{ super() }}
  <script src="{{url_for('components', 'PageExample/tab1.js')}}">
{% endblock %}
{% block content %}
<div class="tab" id="tab1">
  {% include 'PageExample/tab1.html' %}
</div>
<div class="tab" id="tab2">
  {% include 'PageExample/tab2.html' %}
</div>
{% endblock %}

tab1.html为

<div class="tab-content">
  Some content here that uses the tab1.js javascript
</div>

很显然，这只是您需要了解烧瓶的内容的表面。认为底线是它可以工作。尽管我建议您将所有资源（例如JS和CSS）放在一个单独的文件夹中，然后从这些位置引用这些资源。

有关Flask以及如何使用它的更多信息，请在此处查看Flask教程：

http://flask.pocoo.org/docs/1.0/tutorial/