Как сделать кнопку flask

Обновлено: 08.07.2024

На моей главной странице есть кнопка с надписью "Enter".

Я бы хотел, чтобы при нажатии на эту кнопку она направлялась на "домашнюю" страницу

Как это может быть сделано? Благодарность

1 ответ

Это работа якорного тега.

Jinja2 (компонент отрисовки шаблонов в Flask) позволяет использовать url_for функция для динамического создания URL-адреса для данной функции просмотра.

С вашим кодом это будет отображаться в браузере как:

Даже если вы измените конечную точку в app.route функция декоратора, которая будет отображаться с правильным URL-адресом.

Чтобы придать этому виду кнопку, я бы предложил использовать библиотеку Bootstrap. Его можно включить из CDN, добавив следующее в head вашего HTML-шаблона:

Затем назначить стиль кнопки так же просто, как добавить class атрибут вашего тега привязки:

Разрабатываю небольшое API. Мне требуется после нажатия кнопки считать данные из input'a , произвести с ними некоторые действия и выввести на экран, если это возможно (Что-то вроде месседжбокса).

Пробовал временно обойтись без кнопки, прописав инпуту следующую конструкцию:

и старался забрать переменную q :

Но, мягко говоря, все тщетно.

Абсолютно не понимаю как по кнопке выполнить определенную функцию.

Разобрался. Если вдруг у кого возникнет подобный вопрос, то вот код и скрины.

Ответы (1 шт):

Вам нужна форма а не просто поле и кнопка.

При этом вам надо тип кнопки сделать submit а вместо /url указать ваш урл роутинга которая перехватывается вашей функцией some_sum .

Ну и вашей функции some_sum указать декоратор вашего урла. Для моего примера должно быть так:

Любое веб-приложение содержит такой важный элемент, как формы. К сожалению, не всегда с ними просто работать. Логика взаимодействия с формами для новичка довольно непростая. Ведь сперва необходимо подтвердить данные на стороне клиента, а потом – на сервере. И даже этого недостаточно, если разработчику нужно сделать этот обмен данными безопасным. В совокупности даже опытному программисту нужно немало работать. К счастью, можно воспользоваться библиотекой WTForms, которая позволяет без библиотек и пакетов работать с формами.

Работа с формами – непростой метод

Сперва давайте создадим шаблон login.html , в котором будет содержаться следующий код.

А после функции представления books необходимо добавить этот код.

Учтите, что аргумент methods был передан декоратору route().

Объект класса request позволяет получить данные о текущем веб-запросе. Данные, полученные с использованием формы, находятся в атрибуте form объекта request . Это словарь, который нельзя редактировать и имеющий название ImmutableMutiDict .

Далее, для получения доступа к странице будет использоваться метод GET . Следовательно, код, находящийся внутри if- блока функции login() не будет учитываться в ходе исполнения приложения.

Если осуществить попытку отправки формы без ввода данных, то страница в итоге будет выглядеть так.

Если использовать правильное имя пользователя и пароль при заполнении формы и нажать Enter , то тогда появится соответствующее уведомление над формой.

Вот, как осуществляется работа с формами во Flask . Но также необходимо обратить внимание на пакет WTForms .

Что такое WTForms?

Это специальная библиотека, которая может использоваться как в совокупности с фреймворками, так и без связи с ними. Она умеет создавать формы, осуществлять их проверку и заполнять их определенными данными. Также в ее функционал входит ряд других возможностей. Помимо этого, библиотека позволяет реализовать защиту от CSRF.

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

Чтобы осуществить инсталляцию библиотеки, используется такая инструкция.

Как создать класс Form?

Для начала необходимо определить формы в виде классов Python. Каждая из форм должна расширять класс FlaskForm , который находится в пакете flask_wtf . FlaskForm – это обертка, которая позволяет использовать набор полезных методов для класса wtform.Form .

Внутри класса, определение полей осуществляется в формате переменных класса и происходит путем создания объекта, который ассоциируется с типом поля.

Пакет wtform предлагает набор классов, которые представляют собой такие поля: StringField , PasswordField, SelectField, TextAreaField, SubmitField и ряд других.

Сперва необходимо создать файл с названием forms.py внутри flask_app , и в него интегрировать такой код.

Здесь определяется класс формы ContactForm , в котором есть четыре поля: name, email, message, submit . Эти переменные нужны, чтобы осуществить рендеринг полей формы, а также получения данных, которые в них находятся. Помимо этого, через них можно изменять содержимое этих форм.

При создании этой формы использовались два StringField, TextAreaField, SubmitField .

Каждый раз, при создании поля, функции-конструктору, используемой для этого, передаются определенные аргументы:

Строка, содержащая метку, отображаемую внутри тега в момент рендеринга поля.
Список валидаторов (элементов для проверки полей формы), передача которых осуществляется в виде аргументов-ключевых слов. Под валидаторами подразумеваются функции или классы, определяющие, правильно ли введены данные в поле.
Для каждого поля возможно применение нескольких валидаторов, которые разделяются запятыми.

Что касается валидаторов, то их можно создать самостоятельно или воспользоваться уже предустановленными в wtforms.validators . Так, в этой форме мы использовали два из них:

DataRequired. Проверяет, была ли хоть какая-то информация введена в это поле.
Email. Выполняет проверку, является ли содержимое конкретного поля действующим электронным адресом.

Валидатор нужен для того, чтобы форма не отправлялась, пока не будут соблюдены все требования.

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

Установка SECRET_KEY

Во Flask_WTF имеется встроенная поддержка возможности предотвращения CSFR- атак. Более того, это данный компонент делает по умолчанию. Как это делается? Путем встраивания в элемент внутри формы специального токена.

Затем он проверяет, насколько подлинный запрос. Еще до генерации csrf-токена необходимо добавить секретный ключ в файл main2.py . Для этого используются следующие строки.

Обратите внимание, что атрибут config , относящийся к объекту Flask , работает, как словарь, нужен для задания параметров настройки Flask и его расширений. Тем не менее, возможно их самостоятельное добавление.

Секретный ключ должен соответствовать следующим требованиям:

Относиться к строковому типу данных.
Желательно, чтобы он был длинным.
Подбираться должен таким образом, чтобы его было трудно разгадать.

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

Важное требование к секретному ключу: он должен быть безопасно сохранен.

Формы в консоли

Теперь давайте используем следующую инструкцию, чтобы открыть оболочку Python .

Она будет запущена внутри контекста приложения.

Далее импортируется класс ContactForm и создается экземпляр объекта новой формы. Для этого передаются ее данные таким образом.

Необходимо учесть, что передача данных осуществляется в виде объекта MultiDict , так как функция-конструктор класса wtfroms.Form принимает аргумент соответствующего типа.

Если определения данных формы при генерации объекта формы не происходит, а при ее отправке использовался POST-запрос, wtforms.Form использует данные, находящиеся в атрибуте request.form . Учтите, что request.form возвращает объект, относящийся к типу ImmutableMultiDict .

Отличие этих типов в том, что ImmutableMultiDict хранит данные такого же типа, только их нельзя изменять.

А валидация формы осуществляется с использованием метода validate() , который возвращает True в случае успешности проверки.

В данном случае проверка формы оказалась неудачной, поскольку в ходе создания объекта не была передана никакая информация. Чтобы получить более подробную информацию об ошибке и обработать ее, необходимо использовать атрибут errors объекта формы.

В этой серии мы будем использовать Python, Flask и MySQL для создания простого веб-приложения с нуля. Это будет приложение списка дел, в котором пользователи смогут зарегистрироваться, подписаться и создать свой список желаний.

Предполагается, что у вас есть базовые знания языка программирования Python . Мы будем использовать Flask , инфраструктуру веб-приложений Python для создания приложения и MySQL как сервер.

Введение в Python Flask

Flask - это фреймворк Python для создания веб-приложений. С официального сайта,

Когда мы думаем о Python, первое, что приходит нам в голову, - это Django framework. Но с точки зрения новичка в Python, начинать с Flask легче, чем с Django.

Установка Flask

Установить Flask легко и просто. С менеджером пакетов pip нужно сделать только:

Когда вы закончите установку Flask, создайте папку FlaskApp . Перейдите в папку FlaskApp и создайте файл с именем app.py . Импортируйте модуль flask и создайте приложение с помощью Flask, как показано ниже:

Теперь определим основной путь / и соответствующий ему обработчик запросов:

Затем проверьте, является ли исполняемый файл главной программой и запустите приложение:

Сохраните изменения и выполните app.py :

Создание домашней страницы

Во-первых, при запуске приложения мы должны показать домашнюю страницу с последними элементами списка дел, добавленными пользователями. Итак, добавим нашу домашнюю страницу в папку приложения.

Flask ищет файлы шаблонов внутри папки templates . Перейдите в папку PythonApp и создайте папку под названием templates . Внутри templates создайте файл index.html . Откройте index.html и пропишите следующий HTML:

Откройте app.py и импортируйте render_template , который мы будем использовать для рендеринга файлов шаблонов.

Измените основной метод, чтобы вернуть созданный файл шаблона.

Создание страницы регистрации

Шаг 1. Настройка базы данных

Мы будем использовать MySQL в качестве сервера. Войдите в MySQL из командной строки или, если вы предпочитаете GUI, например, MySQL work bench, тоже можете пользоваться. Сначала создайте базу данных BucketList . Из командной строки:

Введите требуемый пароль и при входе в систему выполните следующую команду для создания базы данных:

Как только база данных будет создана, создайте таблицу tbl_user , как показано ниже:

Мы будем использовать Stored procedures в приложении Python для взаимодействия с базой данных MySQL. Поскольку таблица tbl_user была создана, создайте процедуру сохранения под названием sp_createUser , чтобы зарегистрировать пользователя.

При создании этой процедуры в таблице tbl_user сначала нужно проверить, не существует ли пользователь с тем же именем username . Если существует, нам нужно выдать ошибку, иначе мы создадим пользователя в таблице user. Вот как должна выглядеть процедура sp_createUser :

Шаг 2. Создание интерфейса регистрации

Перейдите в каталог PythonApp/templates и создайте файл HTML с именем signup.html . Добавьте следующий код HTML в signup.html :

Добавьте такой CSS как signup.css в постоянную папку внутри PythonApp .

В app.py добавьте метод showSignUp для отображения страницы регистрации после поступления запроса в /showSignUp :

Шаг 3. Внедрение метода регистрации

Затем нам нужен server-side метод для UI взаимодействия с базой данных MySQL. Перейдите в PythonApp и откройте app.py . Создайте новый метод signUp , а также добавьте /signUp . Так это выглядит:

Мы будем использовать jQuery AJAX для публикации данных регистрации в методе signUp , поэтому укажем метод в определении маршрута.

Чтобы прочитать опубликованные значения, нам нужно импортировать request из Flask.

С помощью request мы прочитаем значения, как показано ниже:

Импортируйте json из Flask, так как мы используем его для возвращения данных json .

Шаг 4. Создание запроса на регистрацию

Мы будем использовать jQuery AJAX для отправки запроса на регистрацию в метод Python. Загрузите jQuery , разместите его внутри PythonApp/static/js и добавьте ссылку на него со страницы регистрации. Как только jQuery будет включен, мы добавим запрос POST JQuery при нажатии кнопки Sign Up .

Итак, давайте присоединим событие нажатия кнопки, как показано:

Шаг 5: вызов хранимой процедуры MySQL

У нас есть name , email address и password , мы вызываем процедуру MySQL для создания нового пользователя.

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

Импортируйте MySQL внутрь app.py :

Ранее мы определили наше приложение:

Наряду с этим, включая следующие конфигурации MySQL:

Сначала давайте создадим соединение MySQL:

Когда соединение установлено, нам понадобится cursor для запроса stored процедуры. Через conn соединение создаём курсор.

Перед вызовом stored процедуры, давайте сделаем надёжный пароль с помощником от Werkzeug. Импортируйте модуль в app.py :

Используйте модуль для создания хэшированного пароля.

Теперь вызываем процедуру sp_createUser :

Подводя итоги

В этом уроке мы рассмотрели начало работы по созданию приложения с помощью Python Flask , MySQL и расширения Flask-MySQL . Мы создали и прописали таблицы базы данных, stored процедуру, а также обеспечили функциональность регистрации. В следующем уроке мы перейдём на уровень выше, реализовав функции входа в систему и некоторые ещё.

Читайте также: