Меню

Шаблон, форма, вигляд та перенаправлення колби з прикладами

  • Головна
  • Інший
  • Шаблон, форма, вигляд та перенаправлення колби з прикладами

flask template form

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

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

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

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

=> Погляньте на посібник для початківців колби тут

Шаблони колб, подання та форми

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

Вступ

Flask використовує механізм шаблонування під назвою Jinja2, який відображає поведінку програми на основі рівня взаємодії Користувача. Шаблон Jinja використовує змінні, вирази та теги.

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

Вид колби

Поняття подання Flask походить від поширеного шаблону дизайну веб-додатків, який називається Model-View-Controller. Погляд - це один із трьох взаємопов’язаних елементів у цій парадигмі, де він має справу з логікою додатків. Погляд дбає про презентацію інформації Користувачеві.

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

Шаблон колби

Почнемо і напишемо наш перший шаблон. Створіть файл із назвою hello.html у каталозі шаблонів.

Напишіть наступний код у цьому файлі та збережіть його.

Hello World!, from Software Testing Help.

{% for item in greetings %} {% if 'Morning' in item %}

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

Шаблон для циклу

У наведеному вище шаблоні Flask ми використовували цикл for для ітерації елементів списку. У нашому контролері чи обробнику ми передали шаблон зі значеннями привітань. Усередині шаблону ми отримуємо доступ до кожного елемента за допомогою синтаксису {{item}}.

Шаблон, якщо блок

Крім того, зробіть примітку про використання оператора if. Тут ми перевіряємо предмет на ранок і робимо його жирним та курсивом.

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

Форми колби

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

Ми використовуємо Flask-Appbuilder SimpleFormView для візуалізації нашої форми. Однак давайте спочатку створимо форму. На додаток до створення форми, нам потрібно використовувати команду flask fab create-admin для створення користувача адміністратора.

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

Створити адміністратора

Використовуйте команду нижче, щоб створити користувача адміністратора.

flask fab create-admin

Увійдіть за допомогою облікових даних адміністратора

  • Клацніть на Увійти після переходу до http: // localhost: 8080.
Увійдіть як адміністратор
Увійдіть як адміністратор
  • Увійдіть за допомогою облікових даних адміністратора, створених у попередньому розділі.
Клацніть на Вхід
Натисніть Увійти
  • Клацніть на категорію Мої форми, щоб отримати доступ до своїх переглядів.
Клацніть на Меню
Клацніть на Меню

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

Давайте створимо кілька поглядів на основі форми.

Створіть файл із назвою forms.py у каталозі програми та впишіть у нього наступний код.

from wtforms import Form, StringField from wtforms.validators import DataRequired from flask_appbuilder.fieldwidgets import BS3TextFieldWidget from flask_appbuilder.forms import DynamicForm class GreetingsForm(DynamicForm): greeting1 = StringField(('Morning'), description = ('Your morning Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting2 = StringField(('Afternoon'), description = ('Your Afternoon Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting3 = StringField(('Evening'), description = ('Your Evening Greeting'), widget = BS3TextFieldWidget()) greeting4 = StringField(('Night'), description = ('Your Night Greeting'), widget = BS3TextFieldWidget())

Ми створили форму на основі DynamicForm від Flask-Appbuilder. Є чотири текстових поля. Ми передаємо приклад привітання. З чотирьох полів два обов’язкові, а два необов’язкові, оскільки для перших двох привітань ми згадали значення для валідаторів.

Тепер давайте створимо представлення для цієї форми. Запишіть наступні рядки коду у файл views.py.

from flask import render_template, flash from flask_appbuilder import SimpleFormView from app.forms import GreetingsForm class GreetingsView(SimpleFormView): form = GreetingsForm form_title = 'This is a Greetings form' message = 'Your Greetings are submitted' def form_get(self, form): form.greeting1.data = 'Your Morning Greeting' form.greeting2.data = 'Your Afternoon Greeting' form.greeting3.data = 'Your Evening Greeting' form.greeting4.data = 'Your Night Greeting' def form_post(self, form): flash(self.message, 'info') greetings = ( form.greeting1.data, form.greeting2.data, form.greeting3.data, form.greeting4.data, ) session('greetings')=greetings return redirect(url_for('HelloWorld.hello_greetings2'))

На наш погляд вище, у нас є два методи, які називаються form_get і form_post для заповнення значень за замовчуванням у полях форм та зчитування введених значень після подання форми з браузера відповідно.

GreetingsView відображає форму, як показано на малюнку нижче.

Форма привітання

Ми також використовуємо об'єкт сеансу Flask для зберігання значень полів у form_post, щоб ми могли отримати доступ до них у відповідному новому поданні, яке ми збираємося написати.

Давайте тепер модифікуємо клас HelloWorld і додамо ще один метод для відображення привітань. Ми будемо називати це hello_greetings2.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.html', greetings=greetings)

У цьому поданні ми зчитуємо значення з об’єкта сеансу та використовуємо шаблон візуалізації Flask, щоб відобразити ці значення в HTML, що відповідає користувачеві. Зверніть увагу, що hello_greetings2 - це альтернативний спосіб досягнення тієї самої функціональності, подібної до hello_greetings.

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

Відповідь колби

Досить рідко ви зустрінете явне використання відповіді Flask у коді. Клас Response у Flask - це лише підклас класу Response з класу Response Werkzueg, який, у свою чергу, підкласує свій клас ResponseBase.

Об'єкт Flask Response внутрішньо формується Flask щоразу, коли ми викликаємо оператор return або такий метод, як render_template.

Крім того, ми можемо налаштувати код відповіді та тип вмісту, якщо це потрібно як частина оператора return у наших поданнях, як показано в модифікованому поданні HelloWorld нижче.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.json', greetings=greetings), 201, {'Content-Type' : 'application/json'

Безпосереднє використання класу Response Flask може бути розглянуто у випадку використання, коли ми передаємо вміст, а не повертаємо повний вміст відразу через обмеження розміру файлу та пропускної здатності мережі.

Нижче ми показали один приклад потокової передачі вмісту з великого файлу CSV.

from flask import Response @app.route('https://cdn.softwaretestinghelp.com/largefile.csv') def send_large_csv(): '''A controller to stream the content of a large csv file''' def gen(): for row in iter_all_rows(): yield ','.join(row) + ' ' return Response(gen(), mimetype='text/csv')

Перенаправлення колби

Програма не завжди може заздалегідь визначити відповідь на основі різних запитів клієнта.

Ми використовуємо Flask Redirect у сценаріях, де можливо подавати вміст, який може бути виконаний іншими представленнями даних або місцями у відповідь на запит. Ми використовуємо Flask Redirect разом із абортом зі стандартними кодами повернення HTTP.

Наприклад, у наведеному нижче коді ми використовували переспрямування з HTTP-кодом 301 і переривали з 401.

from flask import Flask, redirect, url_for, request, abort app = Flask(__name__) @app.route('/') def index(): return render_template('log_in.html') # Log In template @app.route('/login',methods = ('POST', 'GET')) def login(): if request.method == 'POST': if request.form('username') == 'admin' : # if user is admin return redirect(url_for('success')), 301 else: abort(401) # stop processing else: return redirect(url_for('index')) # redirect to another view

Крім того, перевірте у GreetingsView, де ми скористались перенаправленням Flask та url_for для внутрішнього перенаправлення запиту на інший вигляд, зберігаючи значення привітань в об’єкті сеансу. Перенаправлення колби завжди повертає об'єкт відповіді із типовим або заданим кодом стану в інше місце програми.

Debugtoolbar колби

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

Встановіть панель інструментів Flask Debug.

pip install flask-debugtoolbar

Щоб активувати панель налагодження, відкрийте файл __init__.py у нашому проекті та змініть код, додавши наступні рядки коду.

from flask_debugtoolbar import DebugToolbarExtension app.debug = True toolbar = DebugToolbarExtension(app)

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

# 1) Панель інструментів налагодження відображається праворуч від браузера. Клацніть та розгорніть його, щоб побачити різноманітні функції панелі інструментів.

Активація панелі інструментів налагодження
Активація панелі інструментів налагодження

# два) Щоразу, коли новий запит POST надсилається до програми, він перехоплюється панеллю інструментів, щоб ми могли перевірити змінні та інші параметри, що стосуються налагодження програми.

Налагодження перехоплення панелі інструментів
Налагодження перехоплення панелі інструментів

Цей перехоплення за замовчуванням можна вимкнути за допомогою наведеної нижче конфігурації.

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False Результати Pytest
Налагодження змінних панелі інструментів

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

як відкрити файл .bin у Windows

Перш ніж продовжувати тестування, вимкніть налагодження, як показано нижче в __init__.py. Крім того, ви можете прокоментувати нижченаведений рядок.

app.debug = False

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

Нам потрібно організувати код тестування, щоб зробити його більш керованим. Створіть файл, який називається conftest.py, у кореневому каталозі та перемістіть згадані нижче рядки з test_hello.py до цього файлу.

from app import appbuilder import pytest @pytest.fixture def client(): ''' A pytest fixture for test client ''' appbuilder.app.config('TESTING') = True with appbuilder.app.test_client() as client: yield client

прилади pytest завантажуються pytest під час роботи. Ці пристосування доступні та доступні для всіх тестів. Визначення conftest.py у кореневому шляху будь-якого проекту вважається найкращою практикою, оскільки pytest може розпізнавати всі модулі в проекті, не вказуючи явного PYTHONPATH.

Додайте ще один тест для файлу test_hello. Приклад тесту наведено нижче. Ми викликаємо метод get клієнтського об'єкта і стверджуємо очікуване значення у даних відповідей, що зберігаються в resp.data.

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

def test_greetings(client): ''' A test method to test view hello_greetings''' resp = client.get('/hello/greetings', follow_redirects=True) assert b'Good Morning' in resp.data

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

pytest -v

Тестовий запуск дає результати тесту в консолі, як показано нижче:

Помилка пітесту
Результати Pytest

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

def test_greetings2(client): ''' A test method to test view hello_greetings2 ''' resp = client.get('/hello/greetings2', follow_redirects=True) assert b'Good Morning' in resp.data

Цей тест не вдасться, оскільки ми не визначили жодного атрибута повідомлення в класі HelloWorld у файлі views.py.

Після запуску тестів за допомогою pytest -v результати знову схожі на показано нижче зображення відображатимуться на консолі.

Помилка пітесту

У розділі нижче пояснюються кроки, які нам потрібно виконати під час запуску тестів на платформі CI / CD. Ми використовуємо Git Action для того самого проекту.

CI / CD із Git Action

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

Використовуйте команду нижче, щоб витягнути та об’єднати зміни з віддаленого джерела. Однак зафіксуйте свої зміни, перш ніж витягувати зміни з віддаленого.

git pull origin master --rebase

Тепер перевірте місцеву гілку майстра та об’єднайте її з гілкою tutorial-2. Як тільки злиття буде успішним, опублікуйте ці зміни у майстрі джерела. Ця дія викличе збірки на цільових платформах. Ми тестуємо цей код на Python3.7 та Python 3.8 на останніх версіях Ubuntu.

Висновок

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

Ми також бачили приклади попередньо визначеного подання BaseView плагіна Flask Appbuilder. Цей вигляд може бути легко підкласифікований розробниками Flask для створення власних подань.

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

=> Прочитайте навчальну серію Easy Flask

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

^