Меню

Програма Flask та макет проекту Flask за допомогою проекту та Bootstrap

  • Головна
  • Інший
  • Програма Flask та макет проекту Flask за допомогою проекту та Bootstrap

flask app flask project layout with blueprint bootstrap

Спробуйте Наш Інструмент Для Усунення Проблем

Цей підручник пояснює, як використовувати Flask App, Flask Blueprint та Flask Bootstrap у проекті Flask:

У цій темі ми трохи відійдемо від архетипу Flask-Appbuilder, щоб побудувати наше розуміння концепцій Flask. Прочитайте наш підручник з Flask, Flask Templates & Views та Flask з базами даних, такими як MongoDB, SQLite та MySQL. Ми використовуємо приклад проекту під назвою flaskTutorialApp.

Однак ви також можете створити проект з нуля, використовуючи команду flask fab create-app. Ця команда створює риштування, необхідне для проекту Flask, разом із каталогом програми на основі наведеного вами імені програми.

=> Див. Серію навчальних колб для всіх

Макет проекту Flask з проектом та Bootstrap 1

У цьому навчальному посібнику ми розповімо про додаток Flask, проект Flask Blueprint та Bootstrap Flask. Ми розробляємо наш додаток Flask спочатку за допомогою вже існуючих будівельних лісів, наданих Flask-Appbuilder. Потім ми створюємо проект колби, який називається hello2. Нарешті, ми опишемо концепцію Flask Docker шляхом докеризації нашого Flask App.

Що ви дізнаєтесь:

Flask App

Flask App - це інша назва програми Flask. Якщо ви помітите код, записаний у файлі __init__.py, то помітите, що екземпляр Flask створений, а змінна названа як app. Екземпляром класу Flask є Flask Application, який є екземпляром програми WSGI.

from flask import Flask app = Flask(__name__)

Конструкція колби

Bluesrint Flask дозволяє нам поєднувати пов'язані функції разом і допомагає вдосконалювати практики розробки. Нижче наведено деякі переваги креслення колби.

  1. Проста організація великомасштабних додатків.
  2. Збільшує можливість повторного використання коду, реєструючи один і той же Blueprint кілька разів.
  3. Набір операцій записується і може бути згодом відтворений після реєстрації проекту.

Отримавши вищезазначене на Flask Blueprint, ми можемо рухатися вперед і розробляти наш перший проект. Ми також можемо сприймати Blueprint як модуль. Давайте створимо проект HelloWorld.

Усі компоненти, ресурси та особливості проекту зберігаються та упорядковуються окремо від іншого вихідного коду програми Flask. Це означає, що проект колби може мати свої види, форми, моделі, статичні файли та шаблони.

Ви можете створити декілька креслень з одного набору ресурсів. Однак це може спричинити плутанину і не є доброю практикою.

Створіть Flask Blueprint файли та довідники

Почнемо створювати проект колби з назвою hello2. Використовуйте наведений нижче сценарій для створення структури каталогів після активації вашого віртуального середовища, використовуючи вихідний venv / bin / activate після переходу до каталогу програми.

blueprint_name='hello2' mkdir '$blueprint_name' mkdir -p '$blueprint_name/templates/$blueprint_name' touch '$blueprint_name/templates/$blueprint_name/hello.html' mkdir '$blueprint_name/static/' touch '$blueprint_name/__init__.py' touch '$blueprint_name/views.py'

Ми хочемо, щоб наш hello2 Blueprint мав свої погляди, які ми будемо імпортувати в __init__.py. Ми створюємо окремий каталог для нашого Blueprint із шаблонами та статичними каталогами, щоб рендерити представлення Flask і обслуговувати статичні ресурси, відповідно.

Структура каталогу колби

Структура каталогів для проекту повинна виглядати так, як показано нижче. Використовуйте команду дерева, щоб створити подібний результат.

Структура каталогів Flask Blueprint

Create Flask Blueprint View

Тепер давайте визначимо простий погляд всередині views.py. Відкрийте hello2 / views.py та введіть наведений нижче фрагмент коду.

from flask import Blueprint, render_template hello2 = Blueprint( 'hello2', __name__, template_folder='templates', static_folder='static' ) @hello2.route('/hello2') def hello2_view(): greeting = 'Hello World 2' return render_template('hello2/hello.html', greeting=greeting)

Ми імпортуємо клас Blueprint і метод render_template. Потім ми створюємо об’єкт Blueprint, надаючи імена шаблону та статичні каталоги.

Потім ми визначаємо маршрут, використовуючи декоратор @ hello2.route та контролер з ім'ям hello2_view. Цей контролер є функцією Python. У цій функції ми присвоюємо значення змінної, яка називається привітанням, а потім передаємо її методу render_template.

Створіть шаблон колби

Тепер давайте створимо шаблон hello.html. Якщо ви читали наші попередні підручники, то ви, мабуть, помітили, що шаблон має те саме ім'я, що ми створили для обробки подання HelloWorld. Для цього hello2 Blueprint ми створюємо новий шаблон, розширюючи попередній.

Крім того, зауважте, що ми використовували семантичний шлях hello2 / hello.html під час виклику render_template для надання вітання в шаблоні. Цей шаблон дозволяє уникнути конфліктів між однойменними шаблонами.

Використовуйте наведений нижче фрагмент коду, щоб створити hello.html та зберегти його у розділі hello2 / templates / hello2 / path.

{% extends 'hello.html' %} {% block hello %}

{{ greeting }} , from Software Testing Help.

{% endblock %}

Цей шаблон майже схожий на hello.html. Однак більшість своїх HTML-частин він успадковує від hello.html. Зверніть увагу на використання {% block hello%} та {% endblock%}. Блок hello у hello2 / hello.html замінює блок hello базового шаблону hello.html.

Тепер відкриємо файл __init__.py файлу hello2 Blueprint і згадаємо в ньому код, наведений нижче.

from app.hello2.views import * # expose all views at the blueprint level

У цій заяві ми імпортуємо всі декоровані методи, які ми створили у views.py проекту hello2 Blueprint. За потреби ми можемо імпортувати лише ті методи / контролери, які готові до використання або тестування.

Зареєструйте проект колби за допомогою програми Flask

Тепер давайте відкриємо __init__.py в каталозі програми Flask та зареєструємо наш hello2 Blueprint, як показано в коді нижче.

from app.hello2 import hello2 app.register_blueprint(hello2, url_prefix='/hello2')

Тут також зауважте, що ми можемо вибірково імпортувати подання та реєструвати лише ті, які готові до використання чи тестування.

Давайте запустимо наш додаток Flask в режимі налагодження за допомогою команди python run.py з кореневого каталогу проекту та перейдемо до http: // localhost: 8080 / hello2, щоб побачити, чи добре працює подання hello2.

Результат у браузері повинен бути подібним до прикладу, показаного нижче.

Приклад HelloWorld2_View
Перегляд проекту Hello2

Давайте попрацюємо над кращою презентацією проекту hello2, використовуючи фреймворк bootstrap Twitter. Більше того, у наступному розділі ви дізнаєтесь більше про необов’язкові параметри для зміни поведінки проекту колби. Давайте подивимося на цьому на прикладі проекту колби під назвою Flask Bootstrap.

Приклад застосування модульної колби з проектом колби

На основі нашого вивчення hello2 Flask Blueprint, давайте додамо ще кілька креслень, щоб зрозуміти, як ми можемо створювати модульні програми в Flask.

Припустимо, що ми маємо веб-додаток, який обслуговує відвідувачів у вигляді електронних книг, навчальних посібників та курсів. У ньому також є додатковий вміст, що стосується інформації про команду та домашньої сторінки.

Якщо ми спробуємо врахувати ці нові функції в існуючій програмі, то нам доведеться створювати подання в views.py та відповідні шаблони в каталозі шаблону програми. Подібним чином нам потрібно створювати моделі та форми в models.py та forms.py.

Однак підтримка всього коду програми стане громіздкою, а співпраця з іншими членами команди буде занадто складною і може призвести до конфліктів між комітами або складного робочого процесу.

В даний час у цьому традиційному підході структура заявки така, як показано нижче.

традиційний підхід

Щоб уникнути подібного сценарію, ми можемо використовувати Flask Blueprints для створення модулів, специфічних для функцій та відповідного вмісту. Давайте створимо декілька креслень колби з їх окремими ресурсами.

Кожен макет Flask Blueprint буде виглядати приблизно так, як показано нижче.

Макети колби

Використовуйте наведений нижче сценарій, щоб створити необхідні файли та каталоги для запланованих креслень колби. Запустіть цей сценарій із кореневого каталогу проекту.

cd app for dir in home courses tutorials ebooks do echo 'generating files for $dir ..' mkdir -p $dir/templates/$dir touch $dir/templates/$dir/$dir.html mkdir $dir/static touch $dir/static/style.css touch $dir/__init__.py touch $dir/views.py touch $dir/models.py touch $dir/forms.py done

Спершу створимо функції для домашнього модуля.

Відкрийте views.py у домашньому каталозі та оновіть його за допомогою вказаного нижче коду.

from flask import render_template, Blueprint home = Blueprint('home', __name__, template_folder='templates', static_folder='static') @home.route('/') def index(): return render_template('home/home.html')

У цьому файлі ми імпортували клас Blueprint Flask і створили його з необхідними параметрами з окремими шаблонами та статичною папкою. Потім ми використовуємо @home прикраса, щоб оголосити пов'язаний маршрут методу перегляду, який називається index.

Тепер створіть шаблон base.html Jinja2 у каталозі шаблонів програми. Використовуйте наведений нижче код для оновлення файлу.

from Software Testing Help.

Learn More >> {% endblock %}

Ми продовжили з Bootstrap's base.html. Зверніть увагу на використання div контейнера класу та hero-unit. Більше того, ми створили кнопку, щоб користувачі могли дізнатись більше. Ми модифікували цей HTML і використовували класи з фреймворку Bootstrap Twitter.

Тепер оновіть сторінку в браузері за адресою http: // localhost: 8080 / hello2.html, щоб побачити змінений вигляд hello2.html.

Вигляд Changed Hello2 буде виглядати приблизно таким, як показано нижче.

HelloWorld2_View_Bootstrap
Перегляд Hello2 за допомогою Bootstrap

Використання Flask-Bootstrap повністю залежить від блоків, доступних для заміни або модифікації. Ми можемо використовувати згадані нижче блоки для налаштування досвіду. Детальний список усіх можливих блоків можна переглянути на https://pythonhosted.org/Flask-Bootstrap/basic-usage.html.

Іноді, коли ми просто хочемо змінити блок, а не повністю його замінити, ми можемо використовувати функцію super () Jinja2 для досягнення результатів.

Створіть файл із назвою hello2.css у розділі hello2 / static та розмістіть наведений нижче фрагмент коду для стилізації кольору абзацу в hello2 / hello.html.

p { color: orange; }

Візьміть фрагмент коду, показаний нижче, і розмістіть його в hello2 / hello.html.

{% block styles } {{ super() }} {% endblock %}

Тепер відкрийте views.py Flask Blueprint hello2 та змініть інструкцію blueprint, як показано нижче.

Як знайти ключ безпеки мережі у Windows 10 -
hello2 = Blueprint('hello2', __name__, template_folder='templates', static_folder='static')

Перейдіть до зареєстрованої URL-адреси Flask Blueprint, тобто http: // localhost: 8080 / hello2. Результат через внесені на сьогодні зміни повинен виглядати, як показано нижче.

Перегляд Hello2 змінено
Перегляд Hello2 змінено

Док-колба

Docker допомагає в контейнеризації програми. Він ізолює середовище, яке потрібно додатку Flask, таким чином, що немає потреби у повному віртуалізованому середовищі, такому як віртуальні машини.

Крім того, контейнери-докери мають мінімальний розмір та зручніші в управлінні та масштабуванні за допомогою платформи оркестровки. У наші дні, коли кожна інша програма також має розгорнуте контейнерне розгортання, нам також потрібно навчитися розгортати наш зразок програми як контейнер докера.

Контейнер на базі Linux може працювати на Windows і MAC. Таким чином, докеризований додаток Flask можна розгорнути на будь-якій операційній системі, незалежно від операційної системи, в якій він був побудований.

У цьому розділі ми пояснимо кроки докеризації програми Flask. Ми закріпимо цей проект, щоб його можна було розгорнути в контейнері з усіма залежностями, упакованими всередині нього.

Спочатку, встановити Docker на вашій машині.

sudo apt-get install docker.io

Після завершення встановлення перейдіть до кореневого каталогу нашого зразка проекту та створіть файл Docker.

Напишіть код, наведений нижче, у цей Dockerfile.

FROM python:3 ADD . /flaskTutorialApp WORKDIR /flaskTutorialApp RUN pip install -r requirements.txt ENTRYPOINT ('python') CMD ('run.py')

Оновіть файл config.py та змініть базу даних на SQLite, як показано нижче.

# The SQLAlchemy connection string. SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'app.db') # SQLALCHEMY_DATABASE_URI = 'mysql://myapp@localhost/myapp'

Крім того, якщо ви вперше працюєте з SQLite у цій серії підручників, створіть, будь ласка, користувача адміністратора, використовуючи команду flask fab create-admin.

Перевірте, чи може адміністратор ввійти до програми.

Тепер створіть образ докера нашого зразка програми, використовуючи команду нижче.

sudo docker build --tag flask-tutorial

Ця команда займає деякий час, оскільки вона завантажує ресурси з концентратора докера. Після завершення цієї команди перевірте, чи з’явились зображення, використовуючи наведену нижче команду.

sudo docker images

Тепер запустіть цей нещодавно створений образ Docker.

sudo docker run -p 5001:8080 flask-tutorial:latest

На консолі відображатимуться повідомлення журналу сервера розробки.

Установка Docker призводить до створення віртуального NIC з назвою docker0. Знайдіть IP-адресу за допомогою команди sudo ifconfig. Отримавши IP-адресу Docker, ви можете отримати доступ до програми, перейшовши за вказаною нижче URL-адресою.

http: //: 5001

Коли ви впевнені в розробці програми, ви можете розгорнути свій образ Docker у Docker Hub, щоб інші завантажили та використали.

Тестування проекту колби

Тепер давайте створимо кілька тестів для тестування Blueprint hello2. Давайте подивимось, чи повертає наш зразок програми правильний код HTTP, коли клієнт надсилає запит на отримання ресурсів у кінцевій точці / hello2 чи ні. Якщо ви пам’ятаєте, ми зареєстрували наш проект Flask Blueprint hello2 з префіксом url_prefix зі значенням / hello2.

Створіть файл test_blueprint.py під тестами та додайте до нього наступний тест.

def test_hello2(client): resp = client.get('/hello2') assert 308 == resp.status_code

HTTP 308 відноситься до Постійного перенаправлення, і очікується, що наш додаток Flask повинен перенаправити запит на ресурси, пов'язані з Концепцією, що називається hello2.

Тепер додамо ще один тест для перевірки кореневого шляху ресурсів нашого Плану. Давайте додамо тест, щоб побачити, чи має воно значення чи ні.

from app.hello2 import hello2 def test_rootpath(): assert hello2.root_path is not None

Тепер давайте проведемо ці тести разом з іншими тестами, щоб переконатися, що вони проходять.

pytest -v

Ви побачите подібний результат результатів тесту, як показано нижче.

План результатів Pytest
План результатів Pytest

Тепер зафіксуйте всі зміни в репозиторії та опублікуйте ці зміни у віддаленому сховищі на Github. Порівняйте відмінності з кодом із відмінностями головного гілки та створіть запит на витяг, якщо конфліктів немає.

Запит на виклик викликає завдання збірки, які є частиною нашого робочого процесу Github. Якщо всі перевірки на запити на витягування з tutorial-4 не дають збою, тоді ми можемо спокійно об’єднати цю гілку з master.

Підручник з Git Action-4
Підручник з Git Action-4

Часті запитання

Q # 1) Що таке Flask BluePrint?

Відповідь: Програма Flask - це спосіб структурувати додаток Flask на менші модулі, що повторно використовуються. Програма Flask має свої окремі ресурси, такі як подання, шаблони, статичні файли, моделі, форми тощо. Ми використовуємо підхід Flask Blueprint для створення легко підтримуваних та масштабованих додатків Flask.

Q # 2) Як ви використовуєте Flask Blueprint?

Відповідь: Щоб використовувати Flask Blueprint, нам потрібно імпортувати його та зареєструвати в об’єкті Flask Application, використовуючи метод app.register_blueprint. Ми можемо передати значення параметру url_prifix, щоб додати шлях до маршрутів Колбової схеми.

Висновок

У цьому посібнику ми пояснили креслення Flask разом із концепціями створення статичних ресурсів для програми Flask. Ми дослідили переваги використання Flask Blueprint разом із думками про ресурси за допомогою плагіна Flask під назвою Flask-Bootstrap.

Ми також розглянули концепції створення образу Docker зразка програми-підручника Flask. Крім того, ми також створили два тести для перевірки креслень колби.

У нашому наступному уроці ми розглянемо загальноприйняті шаблони під час створення функцій у веб-додатках за допомогою Flask.

=> Завітайте сюди, щоб вивчити колбу з нуля

Рекомендована література

^