Flask - структура шаблонов компонентов?

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 предназначено для индекса веб-сайта и что все они будут отображаться на этой же странице.

Кроме того, похоже, что ваши вкладки будут в содержании/ body 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/