Как запустить flask в pycharm
Перейти к содержимому

Как запустить flask в pycharm

  • автор:

Run/Debug Configuration: Flask Server

Use this dialog to create run/debug configuration for Flask server and customize the way PyCharm executes your Flask application.

See Creating web applications with Flask for more details on using Flask in PyCharm.

Select Run | Edit Configurations from the main menu, then click and select the Flask template.

Flask run/debug configuration

Fill in the following parameters:

Configuration tab

Module name/Script path/Custom

Choose one of the following methods to construct and pass the FLASK_APP variable to Flask:

  • Module name – by using a Python module name and a Flask class instance.
  • Script path – by using a path to a Python file.
  • Custom – by using an arbitrary combination of paths, modules, and Flask class instances.

For more information about the FLASK_APP variable, refer to Flask CLI documentation.

Depending on the selected Target type , you can specify the following values:

  • Path to the Python file, for example, /Users/jetbrains/MyFlaskProject/app.py . You can type in the path or click the button to locate the file in the project structure.
  • Name of the module in the Flask project, for example, access_management . You can type in the module name or click the button to search the target module by its name or to locate it in the project structure.
  • Custom combination of modules, scripts, and Flask class instances, for example, access_management.access:app2 , where:
    • access_management – the module name
    • access – the target file in the module
    • app2 – the Flask class instance in access .

    The target Flask class instance to be executed. This value will be put into the FLASK_APP variable during the execution. For example, you’ve declared the following instance of the Flask class in your application:

    Then you can add app into the Application field. It is typically used for the Module name target type. For Script path , the Application field is enabled only for the Flask version 0.13 and later. The field is disabled for the Custom target type, because you can specify the required instance in the combination added to the Target field.

    Parameters of the flask run command.

    —host – the IP address of the web server to run your Flask application on. The default value is ‘127.0.0.1’. To make your web server externally visible, use the ‘0.0.0.0’ value for this parameter.

    —port – the port of the web server. The default value is 5000 or it is the port number set in the SERVER_NAME config variable.

    Example: —host=127.0.0.2 —port=1234 .

    An environment variable set to one of possible environments. The default value is ‘development’.

    Select this checkbox to enable the built-in Flask debug mode. With this mode, the development server will be automatically reloaded on any code change enabling continuous debugging. For more information about Flask debugger, refer to Flask Debug Mode.

    Click this list to select one of the projects, opened in the same PyCharm window, where this run/debug configuration should be used. If there is only one open project, this field is not displayed.

    This field shows the list of environment variables. If the list contains several variables, they are delimited with semicolons.

    By default, the field contains the variable PYTHONUNBUFFERED set to 1. To fill in the list, click the browse button, or press Shift+Enter and specify the desired set of environment variables in the Environment Variables dialog.

    To create a new variable, click , and type the desired name and value.

    You might want to populate the list with the variables stored as a series of records in a text file, for example:

    Variable1 = Value1 Variable2 = Value2

    Just copy the list of variables from the text file and click Paste () in the Environmental Variables dialog. The variables will be added to the table. Click Ok to complete the task. At any time, you can select all variables in the Environment Variables dialog, click Copy , and paste them into a text file.

    Select one of the pre-configured Python interpreters from the list.

    Note that you can select a remote interpreter as well as the local one.

    In this field, specify the string to be passed to the interpreter. If necessary, click , and type the string in the editor.

    Specify a directory to be used by the running task.

    • When a default run/debug configuration is created by the keyboard shortcut Control+Shift+F10 , or by choosing Run from the context menu of a script, the working directory is the one that contains the executable script. This directory may differ from the project directory.
    • When this field is left blank, the bin directory of the PyCharm installation will be used.

    Add content roots to PYTHONPATH

    Select this checkbox to add all content roots of your project to the environment variable PYTHONPATH;

    Add source roots to PYTHONPATH

    Select this checkbox to add all source roots of your project to the environment variable PYTHONPATH;

    Logs tab

    Use this tab to specify which log files generated while running or debugging should be displayed in the console, that is, on the dedicated tabs of the Run or Debug tool window.

    Select checkboxes in this column to have the log entries displayed in the corresponding tabs in the Run tool window or Debug tool window.

    The read-only fields in this column list the log files to show. The list can contain:

    • Full paths to specific files.
    • Aliases to substitute for full paths or patterns. These aliases are also displayed in the headers of the tabs where the corresponding log files are shown. If a log entry pattern defines more than one file, the tab header shows the name of the file instead of the log entry alias.

    Select this checkbox to have the previous content of the selected log skipped.

    Save console output to file

    Select this checkbox to save the console output to the specified location. Type the path manually, or click the browse button and point to the desired location in the dialog that opens.

    Show console when a message is printed to standard output stream

    Select this checkbox to activate the output console and bring it forward if an associated process writes to Standard.out.

    Show console when a message is printed to standard error stream

    Select this checkbox to activate the output console and bring it forward if an associated process writes to Standard.err.

    Click this button to open the Edit Log Files Aliases dialog where you can select a new log entry and specify an alias for it.

    Click this button to edit the properties of the selected log file entry in the Edit Log Files Aliases dialog.

    Click this button to remove the selected log entry from the list.

    Click this button to edit the select log file entry. The button is available only when an entry is selected.

    Common settings

    When you edit a run configuration (but not a run configuration template), you can specify the following options:

    Specify a name for the run configuration to quickly identify it among others when editing or running.

    Allow multiple instances

    Allow running multiple instances of this run configuration in parallel.

    By default, it is disabled, and when you start this configuration while another instance is still running, PyCharm suggests stopping the running instance and starting another one. This is helpful when a run configuration consumes a lot of resources and there is no good reason to run multiple instances.

    Store as project file

    Save the file with the run configuration settings to share it with other team members. The default location is .idea/runConfigurations . However, if you do not want to share the .idea directory, you can save the configuration to any other directory within the project.

    By default, it is disabled, and PyCharm stores run configuration settings in .idea/workspace.xml .

    Toolbar

    The tree view of run/debug configurations has a toolbar that helps you manage configurations available in your project as well as adjust default configurations templates.

    Create a run/debug configuration.

    Python. Настраиваем Pycharm для работы с Flask

    Flask — это мини-фреймворк для разработки веб-приложений на Python, он прост и удобен в использовании. Сегодня я покажу вам как настроить Pycharm Community Edition от Jetbrains для работы с этим фреймворком. Зачем использовать именно IDE Pycharm? Да потому, что Pycharm можно скачать совершенно бесплатно и эта IDE очень удобная и самая используемая в мире разработки Python. Скачать Pycharm вы можете на официальном сайте компании Jetbrains по этой ссылке.

    Шаг первый. Создадим первое приложение на Flask

    Откройте Pycharm, нажмите New Project и сохраните созданный проект в своей директории. При создании вам нужно выбрать версию интерпретатора Python, либо это 2.7 или 3.х, в моем случае я выбрал последнею версию Python 3.7.

    Шаг второй. Устанавливаем рабочее окружение для Flask

    После того как вы создали проект, вам надо настроить под него окружение. Первым шагом вы должны создать файл с расширением типа *.py. Допустим пускай это будет main.py. Для того что бы вам это сделать, вы должны кликнуть по правой кнопкой мыши по директории проекта в IDE и выбрать пункт New и далее Python File, далее вам надо вести название вашего файла и сохранить его.

    Шаг третий. Работа создание первого файла

    В созданном вами файле вам надо написать следующий код. Это довольно простая программа которая отдает всего лишь одно предложение «This is a Flask». Да это будет вашей первой программой, которую вы создадите при помощи фреймворка Flask.

    from flask import Flask 
    app = Flask(name)
     
    @app.route('/') def index(): return 'this is a Flask'
     
    app.run('0.0.0.0:8000', debug=True)

    Запустите данный код просто нажав правой кнопкой мыши и выбрав пункт меню Run ‘app’ или используйте сочетание клавиш клавиатуры Ctrl+Shift+F10. Если после этого ваш скрипт выдал в консоли Pycharm, что то подобное то значит вы все сделали правильно.

    Если в консоли есть ошибки и скрипт не работает, то надо убедиться, что интерпретатор видет пакет Flask. В Pycharm вы можете просто установить пакет просто кликнув в меню на пункт File > Settings > Project > Project Interpreter и установить пакет Flask. Если пакета в списке нет, то вы можете установить его самостоятельно, просто нажав зеленый крестик в правом верхнем углу IDE.

    После этого вам надо открыть браузер и вбить в него урл на который указан в приложении Flask, в нашем случае это 0.0.0.0:8000 и в окне браузера должна появиться надпись которую мы указали в скрипте выше.

    Поздравляем! Это ваше первое приложение, которое вы написали при помощи это мини-фреймворка Flask.

    Использование фреймворка Flask для реализации web-приложений

    В данной статье я создам свое первое веб-приложения на Flask, а также попрактикуюсь в использовании шаблонов.

    Но прежде чем начать, давайте разберемся что такое вообще Flask. Flask– это легкая веб платформа Python, которая предоставляет полезные инструменты и функции для создания веб приложений на языке Python. Это дает разработчикам гибкость и является доступной средой для новых разработчиков, поскольку вы можете быстро создать веб приложение, используя только один файл Python.

    Создание и запуск своего первого веб-приложения

    Работать я буду в PyCharm. Поэтому, первым делом я создаю свой проект и далее устанавливаю Flask через встроенный терминал с помощью команды pip install flask. Далее, я создал файл app1.py, где будет написано простое веб-приложение, отображающее HTML-код в браузере.
    Открыв файл, я написал следующий код:

    from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return '
    Hello, World!
    '

    В нем мы сначала импортируем объект Flask из пакета flask. Затем используем его для создания экземпляра приложения Flask, присвоив ему имя app. Мы передаем специальную переменную __name__, которая содержит имя текущего модуля Python. Это имя сообщает экземпляру, где он находится; это нужно, потому что Flask устанавливает некоторые пути за кулисами.

    Создав экземпляр приложения, мы можем использовать его для обработки входящих веб запросов и отправки ответов пользователю. @app.route — это декоратор, который превращает обычную функцию Python в функцию просмотра Flask, который преобразует возвращаемое значение функции в HTTP-ответ, отображаемый HTTP-клиентом, например, веб браузером. Мы передаем значение ‘/‘ в @app.route (), чтобы указать, что эта функция будет отвечать на веб запросы для URL-адреса /, который является основным URL-адресом.

    Функция просмотра hello() возвращает строку в качестве ответа HTTP.

    Теперь у нас есть простое приложение Flask в файле Python с именем app1.py.

    Далее, необходимо его запустить чтобы увидеть результат функции просмотра hello(), отображаемой в веб браузере. Как это сделать? Во встроенном терминале я прописываю команду set FLASK_APP=app1, благодаря которой я сообщаю Flask, где найти приложение app1. После, прописываю set FLASK_ENV=development, которая говорит о том, что я хочу запустить приложение в режиме разработки (чтобы можно было использовать отладчик для обнаружения ошибок). Наконец, я прописываю flask run. После запуска, вы увидите следующее:

    * Serving Flask app 'app1' (lazy loading) * Environment: development * Debug mode: on * Restarting with stat * Debugger is active! * Debugger PIN: 188-110-549 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

    Эти выходные данные содержат несколько частей информации:
    •Название приложения, которое вы запускаете («app1»).
    •Среда, в которой выполняется приложение (development).
    •Debug mode (Режим отладки): on означает, что отладчик Flask запущен. Это полезно при разработке, поскольку предоставляет подробные сообщения об ошибках, когда что-то идет не так, что упрощает поиск и устранение неисправностей.
    •Приложение работает локально по URL-адресу http://127.0.0.1:5000/. 127.0.0.1 — это IP-адрес, который представляет локальный хост вашего компьютера, а: 5000 — это номер порта.
    Далее, открываем браузер и введем URL-адрес http://127.0.0.1:5000/. Вы увидите текст “Hello, World!” в качестве ответа. Это подтверждает, что ваше приложение успешно работает.

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

    Маршрут — это URL-адрес, который вы можете использовать, чтобы определить, что пользователь получает, когда посещает ваше веб приложение в своем браузере. Например, http://127.0.0.1:5000/ — это основной маршрут, который может использоваться для отображения главной страницы. URL-адрес http://127.0.0.1:5000/about может быть другим маршрутом, используемым для страницы «About», которая дает посетителю некоторую информацию о вашем веб приложении.

    Для этого, в app1.py прописываем следующее:

    from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return '
    Hello, World!
    ' @app.route('/about/') def about(): return '
    This is a Flask web application.
    '

    Здесь, мы добавили новую функцию about(). Эта функция украшена декоратором @app.route(), который преобразует ее в функцию представления, которая обрабатывает запросы к конечной точке http://127.0.0.1:5000/about. Для просмотра результата переходим по этому URL-адресу.

    Но можно использовать и несколько маршрутов для одной функции просмотра. Для этого, изменяем app1.py следующим образом:

    from flask import Flask app = Flask(__name__) @app.route('/') @app.route('/index/') def hello(): return '
    Hello, World!
    ' @app.route('/about/') def about(): return '
    This is a Flask web application.
    '

    После добавления этого нового декоратора вы можете получить доступ к странице индекса как по адресу http://127.0.0.1:5000/, так и по адресу http://127.0.0.1:5000/index.

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

    Кроме этого, хотелось бы разобрать динамические маршруты, то есть мы создадим маршрут, в котором слова, переданные через URL, будут написаны с заглавной буквы, и маршрут, который складывает два числа и отображает результат.

    Для этого, открываем наш app1.py и добавляем:

    from markupsafe import escape from flask import Flask # . @app.route('/capitalize//') def capitalize(word): return '
    <>
    '.format(escape(word.capitalize()))

    Этот новый маршрут имеет переменную секцию. Это говорит Flask взять значение из URL-адреса и передать его функции просмотра. Переменная URL передает аргумент ключевого слова функции просмотра capitalize(). Аргумент имеет то же имя, что и переменная URL (в данном случае слово). При этом вы можете получить доступ к слову, переданному через URL-адрес, и ответить его версией с заглавной буквы, используя метод capitalize() в Python.

    Мы используем функцию escape (), которую мы импортировали, чтобы отобразить строку слова как текст. Это важно, чтобы избежать атак с использованием межсайтовых сценариев (XSS). Если пользователь отправляет вредоносный код JavaScript вместо слова, escape() отобразит его как текст, а браузер не запустит его, сохраняя безопасность вашего веб приложения.
    Чтобы отобразить слово с заглавной буквы внутри заголовка HTML h1, используйте метод Python .format().

    Запустив сервер разработки, открыв браузер и передав по следующим URL-адресам. Вы можете заменить выделенные слова любым словом по вашему выбору. Например:

    http://127.0.0.1:5000/capitalize/hello http://127.0.0.1:5000/capitalize/flask http://127.0.0.1:5000/capitalize/python

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

    # . @app.route('/add///') def add(n1, n2): return '
    <>
    '.format(n1 + n2)

    В этом маршруте вы используете специальный преобразователь int с переменной URL (/add///), который принимает только положительные целые числа. По умолчанию переменные URL-адреса считаются строками и рассматриваются как таковые.

    Запустив сервер разработки, открыв браузер и перейдя по следующему URL-адресу:

    http://127.0.0.1:5000/add/5/5/

    мы увидим следующий результат:

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

    Чтобы продемонстрировать, как обрабатывать ошибки, вы создадите маршрут, который приветствует пользователя из списка имен пользователей.
    Откроем файл app1.py для редактирования и добавим в конец файла следующий маршрут:

    # . @app.route('/users//') def greet_user(user_id): users = ['Bob', 'Jane', 'Adam'] return '
    Hi <>
    '.format(users[user_id])

    В приведенном выше маршруте функция просмотра greet_user() получает аргумент user_id из переменной URL user_id. Мы используем преобразователь int, чтобы принимать положительные целые числа. Внутри функции у нас есть список Python под названием users, который содержит три строки, представляющие имена пользователей. Функция просмотра возвращает строку, которая создается в зависимости от предоставленного user_id. Если user_id равен 0, ответом будет Привет, Боб в теге h2, потому что Боб является первым элементом в списке (значение users[0]).

    Запустив сервер разработки, откроем браузер и перейдем по следующим URL-адресам:

    http://127.0.0.1:5000/users/0 http://127.0.0.1:5000/users/1 http://127.0.0.1:5000/users/2

    Мы получим следующие ответы:

    Hi Bob Hi Jane Hi Adam

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

    http://127.0.0.1:5000/users/3

    Вверху на странице указано имя исключения Python, которым является IndexError, что указывает на то, что индекс списка (в данном случае 3) находится за пределами диапазона списка (который составляет только от 0 до 2, потому что в списке всего три элемента). В этом случае вы можете использовать простую команду try . except, чтобы исправить эту ошибку. Если запрошенный URL-адрес имеет индекс за пределами диапазона списка, пользователь получит ошибку 404 Not Found, которая является ошибкой HTTP, которая сообщает пользователю, что страница, которую он ищет, не существует.

    Откроем файл app1.py для редактирования. Чтобы ответить с ошибкой HTTP 404, нам понадобится функция Flask abort(), которую можно использовать для создания ответов об ошибках HTTP. Изменим вторую строку файла, чтобы также импортировать эту функцию:

    from markupsafe import escape from flask import Flask, abort

    Затем отредактируем функцию просмотра greet_user(), чтобы она выглядела следующим образом:

    # . @app.route('/users//') def greet_user(user_id): users = ['Bob', 'Jane', 'Adam'] try: return '
    Hi <>
    '.format(users[user_id]) except IndexError: abort(404)

    Мы использовали попытку выше, чтобы проверить возвращаемое выражение на наличие ошибок. Если ошибки не было, то есть user_id имеет значение, соответствующее индексу в списке пользователей, приложение ответит соответствующим приветствием. Если значение user_id выходит за пределы диапазона списка, возникает исключение IndexError,
    и мы используем except, чтобы поймать ошибку и ответить ошибкой HTTP 404 с помощью вспомогательной функции Flask abort().

    Теперь, когда сервер разработки запущен, снова посетим тот URL-адрес. На этот раз мы увидим стандартную страницу с ошибкой 404, информирующую пользователя о том, что страница не существует.

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

    Как использовать шаблоны в приложении Flask

    1. Визуализация шаблона и использование переменных

    Создав просто веб-приложение на Flask, я решил попробовать использование шаблонов. Для этого, я создал файл app2.py.

    В него добавляем следующее:

    from flask import Flask, render_template app = Flask(__name__) @app.route('/') def hello(): return render_template('index.html')

    В этом блоке кода мы импортируем класс Flask и функцию render_template() из пакета flask. Мы используем класс Flask для создания экземпляра приложения Flask с именем app. Затем мы определяем функцию просмотра (которая является функцией Python, которая возвращает ответ HTTP) с именем hello(), используя декоратор app.route(), который преобразует обычную функцию в функцию просмотра. Эта функция представления использует функцию render_template() для визуализации файла шаблона с именем index.html.

    Затем нам нужно будет создать файл шаблона index.html в каталоге с именем templates. Flask ищет шаблоны в каталоге templates, который называется шаблонами, поэтому имя важно. Для этого выполним следующую команду, чтобы создать каталог шаблонов:

    mkdir templates

    Затем откроем файл с именем index.html и добавим следующий HTML код:

    FlaskApp 
    Hello World!
     
    Welcome to FlaskApp!

    Здесь мы устанавливаем заголовок, добавляем Hello World! сообщение в виде заголовка h1 и создаем сообщение Welcome to FlaskApp! как заголовок h2. Далее запускаем наше приложение. (как это сделать говорилось выше)

    Оставим сервер запущенным и откроем файл app2.py для редактирования. Импортируем модуль datetime из стандартной библиотеки Python и отредактируем функцию index(), чтобы файл выглядел следующим образом:

    import datetime from flask import Flask, render_template app = Flask(__name__) @app.route('/') def hello(): return render_template('index.html', utc_dt=datetime.datetime.utcnow())

    Здесь мы импортировали модуль datetime и передали в шаблон index.html переменную с именем utc_dt со значением datetime.datetime.utcnow(), которое является текущей датой и временем в формате UTC.

    Затем, чтобы отобразить значение переменной на странице индекса, откроем файл index.html для редактирования. Отредактируем файл, чтобы он выглядел следующим образом:

    FlaskApp 
    Hello World!
     
    Welcome to FlaskApp!
     
    >

    Мы добавили заголовок h2 со специальным разделителем > для печати значения переменной utc_dt. Откроем браузер и перейдём на главную страницу:

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

    2. Использование механизма наследования шаблонов

    На этом этапе мы создадим базовый шаблон с содержанием, которым можно будет поделиться с другими шаблонами. Мы отредактируем свой шаблон индекса, чтобы он унаследовал от базового шаблона. Затем мы создадим новую страницу, которая будет служить страницей «О приложении», где пользователи смогут найти дополнительную информацию о вашем приложении.
    Для этого, создадим base.html и пропишем следующий код:

    — FlaskApp nav a < color: #d64161; font-size: 3em; margin-left: 50px; text-decoration: none; >

    Большая часть кода в этом файле представляет собой стандартный HTML код, заголовок, некоторые стили для ссылок навигации, панель навигации с двумя ссылками, одна для страницы индекса, другая для еще не созданной страницы «О программе», а также div для содержание страницы. (Ссылки пока не работают; на следующем шаге будет показано, как создавать ссылки между страницами). Однако, следующие выделенные части относятся к шаблонизатору Jinja:

    • : блок, который служит заполнителем для заголовка. Позже вы будете использовать его в других шаблонах, чтобы задать собственный заголовок для каждой страницы в приложении, не переписывая каждый раз весь раздел.
    • : другой блок, который будет заменен содержимым в зависимости от дочернего шаблона (шаблона, наследуемого от base.html), который заменит его.
    Теперь, когда у нас есть базовый шаблон, мы можем воспользоваться им, используя наследование. Откроем файл index.html и затем заменим его содержимое следующим:

    Index

    Hello World!

    Welcome to FlaskApp!

    >

    Здесь мы используем тег для наследования от шаблона base.html. Затем мы расширяем его, заменяя блок содержимого в базовом шаблоне тем, что находится внутри блока содержимого в предыдущем блоке кода.

    Этот блок содержимого содержит тег h1 с текстовым индексом внутри основной надписи, который, в свою очередь, заменяет исходную основную надпись в шаблоне base.html текстовым индексом, так что полный заголовок становится индексом — FlaskApp. Таким образом, мы можем избежать повторения одного и того же текста дважды, поскольку он работает как заголовок страницы, так и заголовок, который появляется под панелью навигации, унаследованной от базового шаблона. Затем у нас есть еще несколько заголовков: один заголовок h1 с текстом Hello World!, заголовок h2 и заголовок h3, содержащий значение переменной utc_dt.

    Наследование шаблонов дает нам возможность повторно использовать HTML код, который есть в других шаблонах (в данном случае base.html), без необходимости повторять его каждый раз, когда это необходимо. Сохраним и обновим страницу индекса в браузере. Страница будет выглядеть следующим образом:

    Затем мы создаем страницу «About». Открываем файл app2.py, чтобы добавить новый маршрут и добавляем следующее:

    # . @app.route('/about/') def about(): return render_template('about.html')

    Здесь используется декоратор app.route() для создания функции просмотра с именем about(). В нем мы возвращаем результат вызова функции render_template() с именем файла шаблона about.html в качестве аргумента.

    Откроем файл шаблона с именем about.html для редактирования и добавьте следующий код:

    About

    FlaskApp is a Flask web application written in Python.

    Здесь мы наследуем базовый шаблон с помощью тега extends, заменяем блок содержимого базового шаблона тегом h1, который также служит заголовком страницы, и добавляем тег h3 с некоторой информацией о приложении.

    Когда сервер разработки запущен, перейдем по следующему URL адресу в своем браузере:

    http://127.0.0.1:5000/about

    Мы увидим следующее:

    Мы создали базовый шаблон и использовали его на своей индексной странице и на странице сведений, чтобы избежать повторения кода.

    3. Связывание страниц

    На этом этапе мы свяжем страницы в шаблонах с помощью вспомогательной функции url_for(). Мы добавим две ссылки на панель навигации в свой базовый шаблон, одну для главной страницы и другую для страницы «About».

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

    — FlaskApp nav a < color: #d64161; font-size: 3em; margin-left: 50px; text-decoration: none; >

    Здесь мы используем специальную функцию url_for(), которая возвращает URL адрес функции просмотра, которую мы ему передаем. Первая ссылка ссылается на маршрут функции просмотра hello() (которая является страницей индекса). Вторая ссылка указывает на маршрут функции просмотра about(). Обратите внимание, что мы передаем имя функции просмотра, а не маршрут (/ или /about). Использование функции url_for() для создания URL адресов помогает лучше управлять URL адресами. Если мы жестко запрограммируем URL адреса, наши ссылки сломаются, если мы изменим маршруты. С url_for() мы можем редактировать маршруты и гарантировать, что ссылки будут работать должным образом. Функция url_for() также заботится о других вещах, таких как экранирование специальных символов.

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

    4. Использование условных выражений и циклов

    На этом этапе мы будем использовать операторы if в своих шаблонах, чтобы управлять тем, что отображать в зависимости от определенных условий. Мы также будем использовать циклы for для просмотра списков Python и отображения каждого элемента в списке. Мы добавим новую страницу, на которой будут отображаться комментарии в виде списка. Комментарии с четным порядковым номером будут иметь синий фон, а комментарии с нечетным порядковым номером будут отображаться на сером фоне.

    Сначала мы создадим маршрут для страницы комментариев. Откроем файл app2.py для редактирования и добавьте следующий маршрут в конец файла:

    # . @app.route('/comments/') def comments(): comments = ['This is the first comment.', 'This is the second comment.', 'This is the third comment.', 'This is the fourth comment.' ] return render_template('comments.html', comments=comments)

    В приведенном выше маршруте у нас есть список Python, называемый комментариями, который содержит четыре элемента. Мы возвращаете файл шаблона с именем comments.html в последней строке, передача переменной с именем comments, содержащей список, в файл шаблона.

    Затем создадим и откроем новый файл comments.html в каталоге шаблонов для редактирования и добавим следующий код:

    Comments

    >

    Здесь мы расширяем шаблон base.html и заменяем содержимое блока содержимого. Во-первых, мы используем заголовок h1, который также служит заголовком страницы.
    Мы используем цикл Jinja for в строке , чтобы просмотреть каждый комментарий в списке комментариев (который сохраняется в переменной комментария). Комментарий отображается в теге (p style=»font-size: 24px» > /p) так же, как мы обычно отображаем переменную в Jinja. Мы сигнализируем о завершении цикла for с помощью ключевого слова . Это отличается от способа построения циклов for в Python, поскольку в шаблонах Jinja нет специального отступа.

    Когда сервер разработки запущен, откроем браузер и перейдем на страницу комментариев:

    http://127.0.0.1:5000/comments

    Мы увидим следующее:

    Давайте откроем файл шаблона comments.html и отредактируйте его, чтобы он выглядел следующим образом:

    Comments

    #>

    >

    С помощью этого нового редактирования мы добавили оператор if в строку . Переменная цикла — это специальная переменная Jinja, которая дает нам доступ к информации о текущем цикле. Здесь мы используем loop.index, чтобы получить индекс текущего элемента, который начинается с 1, а не с 0, как в списках Python. Оператор if здесь проверяет, использует ли индекс даже оператор %. Он проверяет остаток от деления номера индекса на 2; если остаток равен 0, это означает, что номер индекса четный, в противном случае номер индекса нечетный. Тег используется для объявления переменной с именем bg_color. Если порядковый номер четный, мы устанавливаем его на голубоватый цвет, в противном случае, если номер индекса нечетный, мы устанавливаем переменную bg_color на серый. Затем мы используем переменную bg_color, чтобы установить цвет фона для тега div, содержащего комментарий. Над текстом комментария мы используем loop.index для отображения текущего номера индекса в теге p.

    Сохраним и посмотрим результат:

    Кроме того, чтобы отобразить все комментарии, кроме второго, мы можем использовать оператор if с условием loop.index != 2, чтобы отфильтровать второй комментарий.

    Откроем шаблон комментариев и отредактируем его, чтобы он выглядел следующим образом:

    Comments

    #>

    >

    Здесь мы используем , чтобы отображать только те комментарии, которые не имеют индекса 2, что означает все комментарии, кроме второго. Мы также используем жестко запрограммированное значение для цвета фона вместо помощника loop.cycle(), чтобы упростить задачу, а остальное не изменяется. Мы завершаем оператор if, используя . Обновим страницу комментариев, и мы увидим, что второй комментарий не отображается.

    Теперь нам нужно добавить ссылку, которая переводит пользователей на страницу комментариев на панели навигации. Откроем базовый шаблон для редактирования и изменим содержимое тега nav, добавив к нему новую ссылку a:

    — FlaskApp nav a < color: #d64161; font-size: 3em; margin-left: 50px; text-decoration: none; >

    Здесь мы используем помощник url_for() для ссылки на функцию просмотра comments(). Теперь на панели навигации будет новая ссылка, которая ведет на страницу комментариев.

    5. Использование фильтров

    На этом этапе мы узнаем, как использовать фильтры Jinja в своих шаблонах.

    Сначала мы преобразуем комментарии на странице комментариев в верхний регистр. Откроем для редактирования шаблон comments.html и отредактируем его, чтобы он выглядел следующим образом:

    Comments

    #>

    >

    Здесь мы расширяем шаблон base.html и заменяем содержимое блока содержимого. Во-первых, мы используем заголовок h1, который также служит заголовком страницы.
    Мы используем цикл Jinja for в строке , чтобы просмотреть каждый комментарий в списке комментариев (который сохраняется в переменной комментария). Комментарий отображается в теге ((p style = font-size: 24px > /p)) так же, как мы обычно отображаем переменную в Jinja. Мы сигнализируем о завершении цикла for с помощью ключевого слова . Это отличается от способа построения циклов for в Python, поскольку в шаблонах Jinja нет специального отступа.

    Когда сервер разработки запущен, откроем браузер и перейдем на страницу комментариев:

    http://127.0.0.1:5000/comments

    Фильтры также могут принимать аргументы в круглых скобках. Чтобы продемонстрировать это, воспользуемся фильтром объединения, чтобы объединить все комментарии в списке комментариев.

    Откроем шаблон комментариев и отредактируем его, чтобы он выглядел следующим образом:

    Comments

    #>

    >

    >

    Здесь мы добавили теги hr и div, где мы объединяем все комментарии в списке комментариев с помощью фильтра join(). Обновим страницу комментариев, и мы увидим страницу, подобную следующей:

    Как видите, список comments отображается с комментариями, разделенными вертикальной чертой, которую мы передали фильтру join().

    Другой важный фильтр — это безопасный фильтр, который позволяет отображать доверенный HTML код в браузере. Для его реализации откроем шаблон комментариев и отредактируем его, чтобы он выглядел следующим образом:

    Comments

    #>

    >

    COMMENTS

    » >>

    «) >>

    Здесь мы добавили значение h1 COMMENTS/h1 и изменили аргумент соединения на тег hr. Обновим страницу комментариев, и мы увидите страницу, подобную следующей:

    Чтобы отобразить HTML теги выше, откроем файл шаблона комментариев и добавим безопасный фильтр:

    Comments

    #>

    >

    COMMENTS

    » | safe >>

    «) | safe >>

    Мы можем видеть, что мы также можем объединить фильтры в цепочку, как в строке p>hr. Каждый фильтр применяется к результату предыдущей фильтрации. Обновим страницу комментариев, и мы увидим, что теги HTML теперь отображаются должным образом:

    6 — интеграция Bootstrap

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

    Чтобы использовать Bootstrap, нужно добавить его в базовый шаблон, чтобы мы могли использовать его во всех других шаблонах. Откроем свой шаблон base.html для редактирования и запишем:

    — FlaskApp

    Большая часть приведенного выше кода — это шаблон Bootstrap, необходимый для его использования. У нас есть несколько метатегов, ссылка на файл CSS Bootstrap в разделе head, а внизу у нас есть ссылка на необязательный JavaScript. Выделенные части кода содержат код Jinja, объясненный в предыдущих шагах.

    Обратите внимание, как мы используем определенные теги и классы CSS, чтобы указать Bootstrap, как отображать каждый элемент.

    В теге nav выше у нас есть тег a с классом navbar-brand, который определяет ссылку бренда на панели навигации. Внутри тега ul у нас есть обычные элементы панели навигации внутри тега a в теге li.

    Когда сервер разработки запущен, откроем страницу индекса в своем браузере:

    http://127.0.0.1:5000/

    Мы увидим страницу, похожую на следующую:

    Теперь мы знаем, как использовать HTML шаблоны в своем веб-приложении Flask. Мы использовали переменные для передачи данных с сервера в шаблоны, чтобы избежать повторения HTML кода мы использовали наследование шаблонов, встроили такие элементы, как условные выражения if и циклы for, а также ссылки между разными страницами. Мы узнали о фильтрах для изменения текста и отображения надежного HTML, а также интегрировали Bootstrap в свое приложение.

    Как установить Flask в Python 3, используя PyCharm

    facebook vk instagram Телеграм youtube

    Хочешь стать успешным разработчиком
    приложений? Тогда добро пожаловать к нам.

    обучись профессии будущего

    Все права защищены © 2014-2023 GURU

    Наши контакты
    Позвоните мне

    Позвоните мне
    Список поддерживаемых устройств

    Mac mini 2020 года и новее
    iMac 2019 года и новее
    iMac Pro 2017 года
    Mac Pro 2019 года и новее
    MacBook Air 2019 года и новее
    MacBook 2017 года и новее MacBook Pro 2018 года и новее

    Приложение в App Store

    В App Store публикуется только то приложение, которое есть в данной программе курса, данное приложение должно быть написано под руководством преподавателя
    Приложение публикуется только в одном экземпляре
    Сторонние приложения, которые не были написаны в данном курсе и или под руководством преподавателя мы не публикуем в App Store

    «Пятиминутка» — в начале урока, первые 5 минут, Вы сможете ответить на вопросы – устно, из прошлых тем. А уже после этого, продолжите урок – по теме.
    «Пятиминутка», будет не на каждом уроке, а только иногда.
    Мы предполагаем, это улучшит процесс обучения на 2% – 4.5%

    Блиц – это проверка усвоенного материала учеником.
    В течение 1 часа (60 минут) преподаватель задаёт вопросы по пройденным темам, и ученик пишет код, одновременно комментируя и отвечая на вопросы преподавателя.

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

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

    На данном уроке, будут практические задачи, разных уровней сложности, по пройденным темам курса. Все практические задания будут объяснены — показано несколько вариантов, как можно их решить разным способом – усложнить или упростить.

    Похожие публикации:
    1. 1с на чем написана
    2. Как скачать торрент бесплатно
    3. Как сменить язык в postgresql
    4. Как часто менять работу

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *