Рубрики
Без рубрики

Флэк 101: как добавить форму поиска

Получите практические, реальные навыки Python на наших ресурсах и пути

Автор оригинала: Mike Driscoll.

В нашей последней статье мы добавили базу данных в наше веб-приложение Flask, но не было способа добавить что-либо в нашу базу данных. У нас также не было способа посмотреть что угодно, поэтому в основном мы получили довольно бесполезное веб-приложение. Эта статья найдет время, чтобы научить вас, как сделать следующее:

  • Создайте форму, чтобы добавить данные в нашу базу данных
  • Используйте форму для редактирования данных в нашей базе данных
  • Создайте какой-то вид на то, что в базе данных

Добавление форм в колбе также довольно просто, как только вы выясните, какое расширение установки. Я слышал хорошие вещи о WTForms, поэтому я буду использовать, что в этом руководстве. Чтобы установить WTForms, вам нужно будет установить Flask-WTF Отказ Установка Flask-WTF довольно проста; Просто откройте свой терминал и активируйте виртуальную среду, мы настроим на нашем Первый учебник Отказ Затем запустите следующую команду, используя PIP:

pip install Flask-WTF

Это будет устанавливать WTForms и Flask-WTF (вместе с любыми зависимостями) к виртуальной среде вашего веб-приложения.

Обслуживание HTML-файлов

Первоначально, когда я начал эту серию, все, что мне служило на индексной странице нашего веб-приложения, была строкой. Мы, вероятно, должны немного ель и использовать фактический файл HTML. Создайте папку «Шаблоны» в папке «MusicDB». Теперь создайте файл под названием «index.html» внутри папки «Шаблоны» и поместите в него следующее содержимое:



    Flask Music Database


Flask Music Database

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

Добавление формы поиска

При работе с базой данных вы захотите найти способ поиска предметов в нем. К счастью, создание формы поиска с WTForms действительно легко. Создайте сценарий Python под названием «Forms.py» и сохранить его в папку «MusicDB» со следующим содержимым:

# forms.py

from wtforms import Form, StringField, SelectField

class MusicSearchForm(Form):
    choices = [('Artist', 'Artist'),
               ('Album', 'Album'),
               ('Publisher', 'Publisher')]
    select = SelectField('Search for music:', choices=choices)
    search = StringField('')

Здесь мы просто импортируем предметы, которые нам нужны из WTForms модуль, а затем мы подкласс Форма класс. В нашем подклассе мы создаем поле выбора (Combobox) и строковое поле. Это позволяет нам фильтровать наш поиск художника, альбома или категории издателей и ввести строку для поиска.

Теперь мы готовы обновить наше основное приложение.

Обновление основного приложения

Давайте переименуемся скриптом нашего веб-приложения из «TEST.PY» на «Main.PY» и обновите его, чтобы он выглядел так:

# main.py

from app import app
from db_setup import init_db, db_session
from forms import MusicSearchForm
from flask import flash, render_template, request, redirect
from models import Album

init_db()


@app.route('/', methods=['GET', 'POST'])
def index():
    search = MusicSearchForm(request.form)
    if request.method == 'POST':
        return search_results(search)

    return render_template('index.html', form=search)


@app.route('/results')
def search_results(search):
    results = []
    search_string = search.data['search']

    if search.data['search'] == '':
        qry = db_session.query(Album)
        results = qry.all()

    if not results:
        flash('No results found!')
        return redirect('/')
    else:
        # display results
        return render_template('results.html', results=results)

if __name__ == '__main__':
    app.run()

Мы изменили Индекс () Функция, так что она работает с обоими постами, так и получила запросы и сказала ему загрузить нашу Musicsearchform. Вы отметите, что при первом загрузке индексной страницы вашего веб-приложения он выполнит функцию GET и INDEX () сделает нашими index.html что мы только что создали. Конечно, мы на самом деле не добавили форму на наш index.html еще, так что поисковая форма еще не появится.

Есть также search_results () что мы добавили, чтобы обработать действительно основные поиски. Однако эта функция не будет вызвана, пока мы фактически не реализуем способ отображения результатов. Итак, давайте пойдем вперед и сделаем поисковую форму, видимую нашим пользователям.

Когда я узнал, как создавать формы с WTForms, Сайт flask-wtf Рекомендуется создать шаблон с макросом под названием «_FormHeLPERS.HTML». Продолжайте и создайте файл этого имени и сохраните его в папку «Шаблоны». Затем добавьте следующее в этот файл:

{% macro render_field(field) %}
    
{{ field.label }}
{{ field(**kwargs)|safe }} {% if field.errors %}
    {% for error in field.errors %}
  • {{ error }}
  • {% endfor %}
{% endif %}
{% endmacro %}

Этот синтаксис может выглядеть немного странно, так как он, очевидно, не просто HTML. Это на самом деле Jinja2 Синтаксис, который является шаблонным языком, используемым колбой. В основном, где вы видите сковороды (I.E. {}), вы видите синтаксис Jinja. Здесь мы проходим в поле объект и доступ его этикетка и Ошибки атрибуты. Не стесняйтесь обратно на документацию для получения дополнительной информации.

Теперь откройте файл «index.html» и обновите его, чтобы он имел следующее содержимое:



    Flask Music Database


Flask Music Database

{% from "_formhelpers.html" import render_field %}
{{ render_field(form.select) }}

{{ render_field(form.search) }}

Новый код в этом примере показывает, как вы можете импортировать макрос, который вы создали в другой файл HTML. Далее мы устанавливаем метод формы для пост И мы проходим Выберите виджет и Поиск Виджет для нашего Render_field макрос Мы также создаем Отправить Кнопка со следующей этикеткой: Поиск Отказ Когда вы нажимаете кнопку поиска, она будет публиковать данные в двух других полях формы к странице, на которую она включена, что в этом случае наша index.html или же “/”.

Когда это произойдет, метод индекса () в нашем main.py Сценарий будет выполняться:

@app.route('/', methods=['GET', 'POST'])
def index():
    search = MusicSearchForm(request.form)
    if request.method == 'POST':
        return search_results(search)

    return render_template('index.html', form=search)

Вы отметите, что мы проверяем, какой метод запроса он есть, и если это метод Post, то мы называем search_results () функция. Если вы на самом деле нажимаете кнопку поиска на этом этапе, вы получите Ошибка внутреннего сервера Потому что мы еще не реализовали «Results.html». В любом случае, прямо сейчас ваше веб-приложение должно выглядеть что-то подобное:

Давайте найдя немного и получите функцию результатов, делая что-то полезное.

Обновление функциональности результатов

Прямо сейчас у нас нет данных в нашей базе данных, поэтому, когда мы пытаемся запросить его, мы не получим никаких результатов. Таким образом, нам нужно сделать наше веб-приложение, указывая на то, что результаты не найдены. Для этого нам нужно обновить страницу «index.html»:



    Flask Music Database


Flask Music Database

{% with messages = get_flashed_messages() %} {% if messages %}
    {% for message in messages %}
  • {{ message }}
  • {% endfor %}
{% endif %} {% endwith %} {% from "_formhelpers.html" import render_field %}
{{ render_field(form.select) }}

{{ render_field(form.search) }}

Отметим, что новый код является новым блоком Jinja. Здесь мы захватываем «вспыхнутые» сообщения и отображаем их. Теперь нам просто нужно запустить веб-приложение и попробовать что-то искать. Если все идет как запланировано, вы должны увидеть что-то вроде этого, когда вы выполняете поиск:

Обертывание

Теперь у нас есть аккуратная небольшая форма поиска, которую мы можем использовать для поиска нашей базы данных, хотя он откровенно не делает все это, так как наша база данных в настоящее время пуста. В нашей следующей статье мы сосредоточимся на наконец, создании способа добавления данных в базу данных, отображать результаты поиска и редактировать также данные!

Скачать код

Скачать Тарбол кода из этой статьи: FLASK_MUSICDV_PART_III.TAR

Другие статьи в серии

  • Часть I – Флэк 101: Начиная
  • Часть II – Флэк 101: Добавление базы данных

Связанные показания