Как создать приложение на python через html

Создайте веб-сайт с помощью Python

Программирование и разработка

Flask — это фреймворк для веб-разработки. В Python есть два модуля, которые можно использовать для веб-разработки: Django и Flask. Однако Flask более легкий и легкий в освоении. В этом руководстве мы создадим очень простой веб-сайт, используя модуль Python Flask.

Для начала устанавливаем колбу:

Шаг 1: минимальное веб-приложение

Минимальное приложение можно найти по адресу https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application. Это веб-страница, на которой отображается «Hello World». Первым делом мы создали экземпляр Flask () с аргументом «__name__». Декоратор маршрута используется для того, чтобы сообщить Flask URL-адрес, который активирует написанную нами функцию.

from flask import Flask

app = Flask ( __name__ )

@ app. route ( ‘/’ )

def index ( ) :
return «Hello World»

if «__name__» == «__main__» :
app. run ( debug = True )

Затем в терминале PyCharm введите следующее (где имя моего файла Python — main.py; в вашем случае замените main.py именем вашего файла Python):

set FLASK_APP = main. py
$env:FLASK_APP = «main.py»
flask run

Как только вы запустите «flask run», терминал выдаст URL-адрес с портом. Этот URL: ПОРТ — это место, где загружается веб-страница. Вы всегда можете нажать Control + c, чтобы выйти. В моем случае написано: «Запуск на http://127.0.0.1:5000/ (нажмите CTRL + C, чтобы выйти)». Итак, откройте свой веб-браузер, скопируйте и вставьте указанный URL. В моем случае я скопировал и вставил «http://127.0.0.1:5000/». Также обратите внимание, что предыдущие строки должны запускаться каждый раз, когда вы перезапускаете PyCharm, чтобы он работал:

Шаг 2: Добавление HTML

Первое, что вам нужно сделать, это открыть папку, в которой находится скрипт Python, и создать папку под названием «шаблоны». Когда я впервые запустил это, я попытался указать имя «шаблон» в качестве имени папки, и вся программа вылетела и не работала. Поэтому обязательно назовите папку « Шаблоны ». В этой папке «шаблонов» создайте файл index.html с вашим HTML-кодом. Затем используйте render_template () и передайте index.html в качестве аргумента. Теперь, если вы запустите «flask run» в терминале, ваш HTML-код должен отобразиться:

Мой html-код (index.html) на данный момент выглядит следующим образом:

И мой код файла Python (main.py) выглядит следующим образом:

from flask import Flask , render_template

app = Flask ( __name__ )

@ app. route ( ‘/’ )

def index ( ) :
return render_template ( «index.html» )

if «__name__» == «__main__» :
app. run ( debug = True )

Последний будет отображать простую HTML-страницу.

Шаг 3: Добавление CSS

Теперь я хочу добавить CSS в свой HTML. Для этого создайте папку с именем «static» и создайте файл с именем «main.css». Здесь имя фактического файла CSS может быть любым. Я решил назвать свой «main.css». Однако имя папки должно быть «статическим»! Фактически, в «статической» папке можно разместить все, что является статическим, например CSS, JavaScript и изображения. Итак, если вы собираетесь размещать изображения, JavaScript и CSS, вы можете создать подпапки.

Сначала напишем нужный мне CSS (main.css):

body <
margin: 0 ;
color: #333
font-family: verdana ;
font-size: 20px ;
background-color: rgb ( 201 , 76 , 76 ) ;
>
. styled <
background-color: #92a8d1;
font-family: verdana ;
font-size: 20px ;
>

Здесь, в index.html, нам нужно написать & lt; link rel = «stylesheet» type = «text / css» href = «<>» > в заголовке HTML-файла. Здесь имя файла — это имя файла CSS (у меня main.css). Если, например, «main.css» находится с подпапкой «css», вы должны написать следующее:

После этого вы можете использовать созданный вами CSS. Например, я создал один под названием «стилизованный» и использовал его в классе h1.

Мой файл index.html будет следующим:

Главный файл Python — main.py — остается прежним.

from flask import Flask , render_template

app = Flask ( __name__ )

@ app. route ( ‘/’ )

def index ( ) :
return render_template ( «index.html» )

if «__name__» == «__main__» :
app. run ( debug = True )

Шаг 4: добавление изображения

Теперь давайте добавим изображение на созданную HTML-страницу! Для этого мы используем созданную нами «статическую» папку. Внутри «статической» папки я создал другую папку под названием «изображения». В папке изображений я поместил изображение. Теперь давайте добавим изображение в HTML-код следующим образом: <img src = ”/ static / images / kalyani.jpg” height = ”200 ″ />. В этом случае я установил высоту изображения на 200, но вы можете изменить ее на все, что захотите, и добавить CSS, если хотите.

HTML-код будет выглядеть следующим образом:

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

В этом случае HTML-код будет выглядеть так:

Шаг № 5: Добавление JavaScript

Есть два способа добавить JavaScript. В этой первой демонстрации я создам кнопку. Когда кнопка нажата, она активирует функцию myFunction (), которая будет JavaScript (находится в теге <script>). Для этого настройте кнопку. Затем установите тег скрипта в заголовке HTML-кода и определите в нем функцию. В моем случае я определил функцию, которая будет добавлять «все резюме» к элементу ap при нажатии кнопки.

Создание веб-приложения с помощью Flask в Python 3

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

В рамках этого обучающего руководства вы будете использовать инструментарий Bootstrap, чтобы сделать ваше приложение визуально привлекательным. Bootstrap поможет вам включить в ваше веб-приложение быстрые веб-страницы, чтобы приложение можно было использовать на мобильных браузерах без написания для этого собственных кодов HTML, CSS и JavaScript. Инструментарий дает возможность изучить работу Flask.

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

С помощью этого обучающего руководства вы создадите небольшой веб-блог с использованием Flask и SQLite в Python 3. Пользователи приложения могут видеть все посты в вашей базе данных и нажимать на заголовки постов для просмотра их содержания. Кроме того, присутствует возможность добавлять новый пост в базу данных и редактировать или удалять существующий пост.

Предварительные требования

Перед началом выполнения этого руководства вам потребуется:

• Локальная среда программирования Python 3. Следуйте инструкциям из обучающего руководства Установка и настройка локальной среды программирования для Python 3 для вашего локального компьютера. В этом обучающем руководстве мы назовем директорию проекта flask_blog .
• Понимание концепций Python 3, таких как типы данных, условные выражения, циклы for, функции и другие. Если вы не знакомы с Python, воспользуйтесь нашей серией Программирование на Python 3.

Шаг 1 — Установка Flask

На этом этапе вы активируете вашу среду Python и установите Flask с помощью установщика пакетов pip .

Если вы еще не активировали среду программирования, убедитесь, что находитесь в директории проекта ( flask_blog ), и с помощью следующей команды активируйте среду:

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

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

Примечание. Вы можете использовать Git, систему контроля версий, для эффективного управления и отслеживания процесса разработки вашего проекта. О том, как использовать Git, вы можете узнать из нашей статьи Введение в Git: установка, использование и ответвления.

Если вы используете Git, рекомендуем игнорировать вновь созданную директорию env в файле .gitignore , чтобы избежать отслеживания файлов, не связанных с проектом.

Теперь вы можете установить пакеты Python и изолировать ваш код проекта от основной системы Python. Это делается с помощью pip и python .

Чтобы установить Flask, запустите следующую команду:

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

Используйте интерфейс командной строки python с опцией -c для выполнения кода Python. Далее вы импортируете пакет flask с помощью import flask; и затем распечатываете версию Flask через переменную flask.__version__ .

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

Вы создали папку проекта, виртуальную среду и установили Flask. Теперь вы готовы переходить к настройке базового приложения.

Шаг 2 — Создание базового приложения

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

В директории flask_blog откройте файл с именем hello.py для редактирования. Используйте nano или любой другой текстовый редактор:

Этот файл hello.py будет служить минимальным примером того, как обрабатывать запросы HTTP. Внутри него импортируйте объект Flask и создайте функцию, которая возвращает ответ HTTP. Напишите следующий код внутри файла hello.py ​​​:

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

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

Функция просмотра hello() возвращает строку ‘Hello, World!’ в качестве ответа.

Сохраните и закройте файл.

Для запуска вашего веб-приложения сначала укажите Flask, где искать приложение (в вашем случае файл hello.py ) с помощью переменной среды FLASK_APP :

Затем запустите его в режиме разработки с помощью переменной среды FLASK_ENV :

И наконец, запустите приложение, используя команду flask run :

После запуска приложения вы увидите примерно следующее:

В предыдущем выводе представлена следующая информация:

• Название работающего приложения.
• Среда, в которой работает приложение.
• Debug mode: on означает, что отладчик Flask работает. Эта функция полезна при разработке, так как при возникновении проблем она выдает детализированные сообщения об ошибке, что упрощает работу по их устранению.
• Приложение работает локально на URL http://127.0.0.1:5000/ , где 127.0.0.1 — это IP-адрес localhost вашего компьютера, а :5000 — номер порта.

Откройте браузер и введите URL ​​​​​​ http://127.0.0.1:5000/ ​​​​​​. Вы получите строку Hello, World! в качестве ответа. Это подтверждает то, что ваше приложение успешно работает.

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

Теперь вы можете оставить сервер разработки работать в терминале и открыть другое окно терминала. Перейдите в папку проекта, где находится файл hello.py ​​​, активируйте виртуальную среду, установите переменные среды FLASK_ENV и FLASK_APP , а затем выполните следующие шаги (эти команды перечислены ранее на этом шаге).

Примечание. При открытии нового терминала важно помнить об активации виртуальной среды и настройке переменных среды FLASK_ENV и FLASK_APP .

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

Для решения этой проблемы нужно либо остановить работающий в настоящий момент сервер с помощью команды CTRL+C , а затем снова задать команду flask run , или, если вам нужно,чтобы оба сервера работали одновременно, передать другой номер порта в аргумент -p , например запустить другое приложение через порт 5001 , используя следующую команду:

Теперь у вас есть небольшое веб-приложение Flask. Вы запустили ваше приложение и вывели информацию в браузере. Далее вы будете использовать файлы HTML в вашем приложении.

Шаг 3 — Использование шаблонов HTML

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

Flask предлагает вспомогательную функцию render_template() , которая позволяет использовать механизм шаблонов Jinja. Это упрощает работу с HTML благодаря написанию вашего кода HTML в файлах .html , а также использованию логики в вашем коде HTML. Вы будете использовать файлы HTML (шаблоны) для создания всех страниц вашего приложения, например главной страницы, где будут отображаться текущие посты блога, страницы поста блога, страницы, на которой пользователь сможет добавить новый пост и т. д.

На этом этапе вы создадите свое основное приложение Flask в новом файле.

Сначала в директории flask_blog с помощью nano или другого редактора создайте и отредактируйте файл app.py . Здесь будет хранить весь код, который вы будете использовать для создания приложения с блогом:

В этом новом файле вы сможете импортировать объект Flask для создания экземпляра приложения Flask так же, как вы делали ранее. Кроме того, вы сможете импортировать вспомогательную функцию render_template() , позволяющую поставлять файлы шаблонов HTML, существующих в папке templates , которую вы создадите. Файл будет иметь единичную функцию просмотра, отвечающую за обработку запросов по основному маршруту / . Добавьте следующее содержимое:

Функция просмотра index() возвращает результат вызова render_template() с index.html​​ в качестве аргумента. Это дает указание render_template() искать файл с именем index.html в папке шаблонов. И папка, и файл еще отсутствуют. Вы получите сообщение об ошибке, если запустите приложение на этом этапе. Тем не менее при запуске вы уже будете знать об этой часто встречающейся ошибке. Затем вы сможете исправить ошибку, создав необходимые папку и файл.

Сохраните и закройте файл.

Остановите сервер разработки на другом терминале, на котором работает приложение hello с помощью CTRL+C .

Перед запуском приложения убедитесь, что вы корректно указали значение для переменной среды FLASK_APP , так как вы больше не используете приложение hello :

После открытия URL http://127.0.0.1:5000/ в вашем браузере страница отладчика сообщит вам, что шаблон index.html не был найден. Основная строка кода, которая привела к этой ошибке, будет выделена. В данном случае это строка return render_template(‘index.html’) .

Если вы нажмете на эту строку, отладчик откроет код, и у вас будет дополнительный контекст для понимания и решения проблемы.

Для устранения данной ошибки создайте директорию с именем templates внутри директории flask_blog . Затем внутри нее откройте файл с именем index.html​ ​​ для редактирования:

После этого добавьте следующий код HTML внутри index.html ​​:

Сохраните файл и используйте свой браузер для перехода на http://127.0.0.1:5000/ или обновите страницу. Теперь браузер должен отобразить текст Welcome to FlaskBlog в теге <h1> .

Помимо папки templates веб-приложения Flask также обычно имеют папку static для хостинга статичных файлов, таких как файлы CSS, файлы JavaScript и изображения, которые использует приложение.

Вы можете создать файл стилей style.css , чтобы добавить CSS в ваше приложение. Сначала создайте директорию с именем static внутри основной директории flask_blog :

Затем создайте другую директорию с именем css внутри директории static для хостинга файлов .css . Обычно это делается для упорядочивания статичных файлов в специальных папках. Например, файлы JavaScript обычно находятся в директории с именем js , изображения хранятся в директории images (или img ) и т. д. Следующая команда создает директорию css внутри директории static :

После этого откройте файл style.css в директории css для редактирования:

Добавьте следующее правило CSS в файл style.css :

Код CSS добавит границу, изменит цвет на коричневый, выравняет текст по центру и добавит небольшое дополнение к меткам <h1> .

Сохраните и закройте файл.

Далее откройте файл шаблона index.html для редактирования:

Добавьте ссылку в файл style.css внутри раздела <head> файла шаблона index.html :

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

Сохраните и закройте файл.

После обновления страницы индекса вашего приложения вы увидите, что цвет текста Welcome to FlaskBlog ​​​ теперь коричневый, расположен по центру и добавлен внутри границы.

Используйте язык CSS для оформления стиля приложения и придавайте ему более привлекательный вид с помощью своего собственного дизайна. Однако, если вы не веб-дизайнер или не знакомы с CSS, воспользуйтесь инструментарием Bootstrap, который предлагает простые в использовании компоненты для оформления приложения. В данном проекте мы будем использовать Bootstrap.

Вероятно, вы уже догадались, что создание другого шаблона HTML будет означать повторение основной части кода HTML, который уже написан вами в шаблоне index.html . Избежать ненужного повторения кода возможно благодаря файлу базового шаблона, из которого наследуются все ваши файлы HTML. Дополнительную информацию можно найти в статье Наследование шаблонов в Jinja.

Для создания базового шаблона сначала необходимо создать файл с именем base.html внутри директории templates :

Введите следующий код в шаблоне base.html ​​:

Сохраните и закройте файл после редактирования.

Основная часть кода в предыдущем блоке состоит из стандартного HTML и кода, необходимого для Bootstrap. Теги <meta> содержат информацию для веб-браузера, тег <link> привязывает файлы CSS Bootstrap, а теги <script> являются ссылками на код JavaScript, который позволяет выполнить ряд дополнительных функций Bootstrap. Дополнительную информацию по этому вопросу можно найти в документации Bootstrap.

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

• <% block title %><% endblock %>: блок, замещающий заголовок. Позже вы будете использовать его в других шаблонах для написания пользовательского заголовка для каждой страницы в приложении без перезаписи всего раздела <head> каждый раз.
• << url_for('index')>> : вызов функции, который возвращает URL для функции просмотра index() . Этот вариант отличается от прошлого вызова url_for() , который использовался для привязки статичного файла CSS. Он использует только один аргумент, а именно имя функции просмотра, и привязывается к маршруту, связанному с функцией вместо статичного файла.
• <% block content %><% endblock %>: еще один блок, который будет замещен контентом в зависимости от дочернего шаблона (шаблоны, которые наследуются из base.html ), который заменит его.

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

Замените его содержание на следующее:

В этой новой версии шаблона index.html вы используете тег <% extends %>для наследования из шаблона base.html . Затем вы расширите его, заменив блок content в базовом шаблоне на содержимое блока content из предыдущего блока кода.

Этот блок content содержит тег <h1> с текстом Welcome to FlaskBlog внутри блока title , который в свою очередь заменяет оригинальный блок title в шаблоне base.html текстом Welcome to FlaskBlog . Так вы можете избежать повторения одного и того же текста дважды, так как он используется и в качестве названия страницы, и в качестве заголовка, который появляется под панелью навигации, унаследованной от базового шаблона.

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

Сохраните и закройте файл, а затем обновите страницу индекса в браузере. Вы увидите страницу с панелью навигации и оформленным заголовком.

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

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

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

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

Поскольку данные в SQLite хранятся в таблицах и столбцах, а ваши данные в основном состоят из постов блога, в первую очередь вам понадобится создать таблицу с именем posts и необходимыми столбцами. Вы создадите файл .sql , содержащий команды SQL для создания таблицы posts с несколькими столбцами. Затем вы будете использовать этот файл для создания базы данных.

Откройте файл с именем schema.sql внутри директории flask_blog :

Введите следующие команды SQL в этом файле:

Сохраните и закройте файл.

Первая команда SQL — это DROP TABLE IF EXISTS posts; .Она удаляет все уже существующие таблицы с именем posts , чтобы не создавать путаницу. Обратите внимание, что при использовании этих команд SQL будет удалено все содержимое базы данных, поэтому не записывайте ничего важного в веб-приложении до окончания изучения этого руководства и экспериментируйте с финальным результатом. Далее, команда CREATE TABLE posts ​​​ используется для создания таблицы posts со следующими столбцами:

• id : целое число, которое представляет собой первичный ключ. В базе данных будет присвоено уникальное значение каждой записи (посту блога).
• created : время создания поста блога. NOT NULL означает, что столбец не может быть пустым, а значение DEFAULT — это CURRENT_TIMESTAMP​​​ , т. е. время добавления поста в базу. Точно так же как и в случае с id , вам не нужно указывать значение для этого столбца, так как он будет заполнен автоматически.
• title : заголовок поста.
• content : содержание поста.

Теперь, когда у вас есть схема SQL в файле schema.sql , вы сможете использовать ее для создания базы данных с помощью файла Python, который сформирует файл базы данных SQLite .db . Откройте файл с именем init_db.py внутри директории flask_blog с помощью любого предпочитаемого редактора:

А затем добавьте следующий код.

Сначала вы импортируете модуль sqlite3 , а затем открываете соединение с файлом базы данных database.db , который будет создан сразу после запуска файла Python. После этого используйте функцию open() для открытия файла schema.sql . Далее вы оформляете его содержание с помощью метода executescript() , при котором выполняется несколько операторов SQL одновременно, что формирует таблицу posts . Вы создаете объект курсор, который позволяет вам использовать метод execute() для выполнения двух операторов SQL INSERT , чтобы добавить два поста блога в таблицу posts . И наконец, вы вносите изменения и закрываете соединение.

Сохраните и закройте файл, а затем запустите его в терминале с помощью команды python :

После завершения выполнения файла новый файл с именем database.db появится в директории flask_blog . Это означает, что вы успешно настроили свою базу данных.

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

Шаг 5 — Отображение всех постов

Теперь, когда вы настроили базу данных, можно изменить функцию просмотра index() , чтобы отображать все посты, внесенные в базу данных.

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

Для первого изменения необходимо импортировать модуль sqlite3 в верхней части файла:

Далее вы создадите функцию, которая обеспечивает подключение к базе данных, и вернете ее. Добавьте ее непосредственно после импорта:

Эта функция get_db_connection() открывает соединение с файлом базы данных database.db , а затем устанавливает атрибут row_factory в sqlite3. Row , чтобы получить доступ к столбцам на основе имен. Это означает, что подключение к базе данных будет возвращать строки, которые ведут себя как обычные словари Python. И наконец, функция возвращает объект подключения conn , который вы будете использовать для доступа к базе данных.

После определения функции get_db_connection() необходимо изменить функцию index() следующим образом:

В этой новой версии функции index() сначала откройте подключение к базе данных, используя функцию get_db_connection() , которую вы определили ранее. После этого выполните запрос SQL, чтобы выбрать все записи из таблицы posts . Вы применяете метод fetchall() , чтобы доставить все строки результата запроса. Это вернет список постов, внесенных в базу данных на предыдущем шаге.

Вы закрываете подключение к базе данных, используя метод close() , и возвращаете результат отображения шаблона index.html . Вы также передаете объект posts в качестве аргумента, который содержит результаты, полученные из базы данных. Это откроет вам доступ к постам блога в шаблоне index.html .

После внесения этих изменений сохраните и закройте файл app.py .

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

Откройте файл index.html :

Затем измените его следующим образом:

В данном случае синтаксис <% for post in posts %>— это цикл for Jinja , который аналогичен циклу for Python, за исключением того, что позже он закрывается с помощью синтаксиса <% endfor %>. Вы используете этот синтаксис для создания цикла для каждого элемента в списке posts , который был передан функцией index() в строке return render_template(‘index.html’, posts=posts) . Внутри этого цикла for вы отображаете название поста в заголовке <h2> ​​​ в теге <a> (позже вы будете использовать этот тег для привязки каждого поста в отдельности).

Вы отображаете заголовок с помощью буквального разделителя переменной ( << . >> ​​​​​​). Не забывайте, что post представляет собой объект словарного типа, поэтому вы сможете получить доступ к заголовку поста с помощью post[‘title’] . Также вы отображаете дату создания поста помощью такого же метода.

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

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

Шаг 6 — Отображение отдельного поста

На этом шаге вы создадите новый маршрут Flask с функцией просмотра и новым шаблоном HTML для отображения отдельного поста блога по его ID.

К концу этого шага на URL http://127.0.0.1:5000/1 будет находиться страница, на которой отображается первый пост (так как его ID 1 ). На URL http://127.0.0.1:5000/ ID будет отображаться пост с соответствующим номером ID , если такой существует.

Откройте app.py для редактирования:

Поскольку позже в рамках данного проекта вам потребуется получить пост блога по его ID из базы данных в нескольких расположениях, вы создадите отдельную функцию с именем get_post() . Вы можете вызвать его, передав ID, и получить обратно пост блога, связанный с предоставленным ID, или создать ответ Flask с сообщением 404 Not Found​​​ , если пост блога не существует.

Для ответа в виде страницы 404 вам необходимо импортировать функцию abort() из библиотеки Werkzeug , установленной вместе с Flask в верхней части файла:

Затем добавьте функцию get_post() сразу после функции get_db_connection() , созданной вами на предыдущем шаге:

Эта новая функция имеет аргумент post_id , который определяет, какой пост блога предназначен для возврата.

Внутри функции вы используете функцию get_db_connection() для открытия подключения к базе данных и выполнения запроса SQL, чтобы получить пост блога, связанный с указанным значением post_id . Вы добавляете метод fetchone() для получения результата и хранения его в переменной post , а затем закрываете подключение. Если переменная post имеет значение None ​​​, т. е. результат не найден в базе данных, вы используете функцию abort() , импортированную вами ранее, для ответа с помощью кода ошибки 404 , и функция завершит выполнение. Если же пост был найден, вы возвращаете значение переменной post .

Далее добавьте следующую функцию просмотра в конце файла app.py :

В этой новой функции просмотра вы добавляете правило переменной <int:post_id> , чтобы указать, что часть после слеша ( / ) представляет собой положительное целое число (отмеченное конвертером int ), которое вам необходимо в функции просмотра. Flask распознает это и передает его значение аргументу ключевого слова post_id ​​ вашей функции просмотра post() . Затем вы используете функцию get_post() для получения поста блога, связанного с заданным ID, и хранения результата в переменной post , которую вы передаете шаблону post.html . Этот шаблон вы создадите вскоре.

Сохраните файл app.py и новый файл шаблона post.html для редактирования:

Введите следующий код в этом новом файле post.html . Это будет аналогично файлу index.html , за исключением того, что он будет отображать единичный пост, так же как и содержание поста:

Вы добавляете блок title , который вы определили в шаблоне base.html , чтобы заголовок страницы отражал заголовок поста, в то же время отображаемый в заголовке <h2> .

Сохраните и закройте файл.

Теперь вы можете переходить к следующим URL-адресам для просмотра двух постов из вашей базы данных вместе со страницей, которая указывает пользователю, что запрашиваемый пост блога не обнаружен (так как пост с номером ID 3 пока отсутствует):

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

Затем измените значение атрибута href с # на << url_for('post', post_id=post['id']) >> , чтобы цикл for выглядел следующим образом:

Здесь вы передаете ‘post’ в функцию url_for() в качестве первого аргумента. Это имя функции просмотра post() , и поскольку она принимает аргумент post_id , вы присваиваете значение post[‘id’] . Функция url_for() возвращает правильный URL для каждого поста на основании его ID.

Сохраните и закройте файл.

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

Шаг 7 — Изменение постов

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

Создание нового поста

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

Откройте файл app.py для редактирования:

Сначала импортируйте следующее из фреймворка Flask:

• Глобальный объект request для доступа к входящим данным запроса, которые будут подаваться через форму HTML.
• Функция url_for() для генерирования URL-адресов.
• Функция flash() для появления сообщения при обработке запроса.
• Функция redirect() для перенаправления клиента в другое расположение.

Добавьте импортированные функции в ваш файл следующим образом:

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

Для настройки секретного ключа вам нужно добавить конфигурацию SECRET_KEY в ваше приложение через объект app.config . Добавьте ее непосредственно после определения app перед определением функции просмотра index() :

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

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

Это создает маршрут /create , который принимает запросы GET и POST. Запросы GET принимаются по умолчанию. Для того чтобы также принимать запросы POST, которые посылаются браузером при подаче форм, вы передаете кортеж с приемлемыми типами запросов в аргумент methods декоратора @app.route() .

Сохраните и закройте файл.

Для создания шаблона откройте файл с именем create.html внутри папки templates :

Добавьте в новый файл следующий код:

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

Значением ввода заголовка поста является << request.form['title'] >> , а текстовое пространство имеет значение << request.form['content'] >> . Это сделано для того, чтобы вводимые вами данные не потерялись, если что-то пойдет не по плану. Например, если вы напишете длинный пост и забудете дать ему заголовок, отобразится сообщение, информирующее вас о том, что указание заголовка является обязательным. Это произойдет без потери уже написанного поста, так как он будет сохранен в глобальном объекте request , к которому у вас есть доступ в шаблонах.

Теперь, когда сервер разработки работает, используйте браузер для перехода к маршруту /create :

Вы увидите страницу Create a New Post​​​ (Создать новый пост) с полями для заголовка и содержания.

Эта форма подает запрос POST в функцию просмотра create() . Но в функции пока отсутствует код обработки запроса POST, поэтому после заполнения формы и ее отправки ничего не происходит.

Вы будете обрабатывать входящий запрос POST после отправки формы. Это можно сделать в функции просмотра create() . Вы можете отдельно обрабатывать запрос POST, проверяя значение request.method . Когда задано значение ‘POST’ ​​​, это означает, что полученный запрос — это запрос POST. Тогда вы можете переходить к извлечению отправленных данных, их проверке и внесению в базу.

Откройте файл app.py для редактирования:

Измените функцию просмотра create() следующим образом:

Выражением if вы обеспечиваете, что следующий за ним код выполняется только в случае, если запрос является запросом POST через сравнение request.method == ‘POST’ ​​​.

Затем вы извлекаете отправленные заголовок и содержание из объекта request.form , который дает вам доступ к данным формы в запросе. Если заголовок не указан, будет выполнено условие if not title , и отобразится сообщение для пользователя с информацией о необходимости заголовка. С другой стороны, если заголовок указан, вы открываете подключение с помощью функции get_db_connection() и вставляете полученные заголовок и содержание в таблицу posts .

Затем вы вносите изменения в базу данных и закрываете подключение. После добавления поста блога в базу данных вы перенаправляете клиента на страницу индекса с помощью функции redirect() , передавая URL, сгенерированный функцией url_for() со значением ‘index’ ​​ в качестве аргумента.

Сохраните и закройте файл.

Теперь перейдите к маршруту /create , используя ваш веб-браузер:

Внесите в форму любой заголовок и какой-либо контент. После отправки формы вы увидите новый пост, указанный на странице индекса.

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

Отредактируйте файл, добавив новый тег <li> после ссылки About ​​ внутри тега <nav> ​​. Затем добавьте новый цикл for непосредственно над блоком content для отображения всплывающих сообщений под панелью навигации. Эти сообщения доступны в специальной функции get_flashed_messages() ​​​​​​, имеющейся в Flask:

Сохраните и закройте файл. Теперь на панели навигации будет присутствовать элемент New Post , который связан с маршрутом /create .

Редактирование поста

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

Сначала вам нужно добавить новый маршрут в файл app.py . Его функция просмотра получит ID поста, который необходимо отредактировать. А URL будет представлен в формате / post_id /edit , где переменная post_id — это ID​​​ поста. Откройте файл app.py для редактирования:

Далее добавьте следующую функцию просмотра edit() в конце файла. Редактирование существующего поста аналогично созданию нового поста, поэтому эта функция просмотра будет такой же, как и функция просмотра create() :

Пост, который вы редактируете, определяется с помощью URL, а Flask будет передавать номер ID функции edit() через аргумент id . Вы добавляете это значение к функции get_post() , чтобы доставить пост, связанный с указанным ID, из базы данных. Новые данные будут поступать в запросе POST, который обрабатывается внутри условия if request.method == ‘POST’ .

Как и при создании нового поста, сначала вы извлекаете данные из объекта request.form , затем показываете всплывающее сообщение, если заголовок имеет пустое значение, в противном случае открываете подключение к базе данных. После этого вы обновляете таблицу posts , указывая новый заголовок и новое содержание, где ID поста в базе данных соответствует ID, который был указан в URL.

В случае запроса GET вы используете шаблон edit.html , передавая переменную post , которая содержит возвращенное значение функции get_post() . Вы будете это использовать для отображения существующих заголовка и содержания на странице редактирования.

Сохраните и закройте файл, а затем создайте новый шаблон edit.html :

Добавьте в новый файл следующий код:

Сохраните и закройте файл.

Этот код пишется по той же схеме, за исключением синтаксиса << request.form['title'] or post['title'] >> и << request.form['content'] or post['content'] >> . Здесь отображаются данные, сохраненные в запросе, если он существует. В противном случае отображаются данные из переменной post , которая была передана в шаблон, содержащий данные текущей базы данных.

Теперь вы можете перейти к следующему URL для редактирования первого поста:

Вы увидите страницу Edit “First Post”(Редактировать «Первый пост»).

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

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

Отредактируйте файл, чтобы он выглядел в точности, как показано ниже:

Сохраните и закройте файл.

Здесь вы добавляете тег <a> для ссылки на функцию просмотра edit() , передавая значение post[‘id’] для того, чтобы подключиться к странице редактирования каждого поста с помощью ссылки Edit ​​​.

Удаление поста

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

Сначала вам нужно добавить новый маршрут / ID /delete , который принимает запросы POST, аналогично функции просмотра edit() . Ваша новая функция просмотра delete() будет получать ID поста для удаления из URL. Откройте файл app.py :

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

Эта функция просмотра принимает только запросы POST. Это означает, что навигация по маршруту / ID /delete в вашем браузере вернет ошибку, так как веб-браузеры по умолчанию настроены на запросы GET.

Но вы можете получить доступ к этому маршруту через форму, которая отправляет запрос POST, передающий ID поста, который вы хотите удалить. Функция получит значение ID и будет использовать его для получения поста из базы данных с помощью функции get_post() .

Затем вы открываете подключение к базе данных и выполняете команду SQL DELETE FROM для удаления поста. Вы вносите изменения в базу данных и закрываете подключение, одновременно отображая сообщение для пользователя, о том, что пост был успешно удален, и перенаправляете на страницу индекса.

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

Откройте файл шаблона edit.html :

Затем добавьте следующий тег <form> после тега <hr> и непосредственно перед строкой <% endblock %>:

Вы используете метод confirm() для отображения сообщения подтверждения перед отправкой запроса.

Теперь снова перейдите на страницу редактирования поста блога и попробуйте удалить ее:

В конце этого шага исходный код вашего проекта будет выглядеть, как код на этой странице.

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

Заключение

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

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

У Flask есть множество расширений, созданных сообществом. Ниже представлен список расширений, который вы можете использовать для упрощения процесса разработки:

: управляет сеансом пользователя и обрабатывает вход и выход, а также запоминает вошедших в систему пользователей. : упрощает использование Flask благодаря SQLAlchemy, инструментарию Python SQL и Object Relational Mapper для взаимодействия с базами данных. : помогает в решении задачи отправки сообщений электронной почты в приложении Flask.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Создание веб-приложения с использованием Python Flask и MySQL

В этой серии мы будем использовать 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 :

Укажите браузеру на http://localhost:5000/ и у вас должно появиться приветственное сообщение.

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

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

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

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

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

Сохраните изменения и перезапустите сервер. Указав браузеру http://localhost:5000/ вы увидите следующее:

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

Шаг 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 :

Сохраните изменения и перезапустите сервер. Нажмите кнопку Sign Up на главной странице и у вас должна получиться такая страница регистрации:

Шаг 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 .

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

Сохраните изменения и перезапустите сервер. На странице Sign Up заполните данные и нажмите 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 :

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

Сохраните изменения и перезапустите сервер. На странице регистрации введите name , email address и password и нажмите кнопку Sign Up. После успешного создания пользователя вы увидите сообщение в консоли браузера.

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

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

Овладей Python, создавая реальные приложения. Часть 4

Время от времени появляются новые языки программирования, а с ними и крупные сообщества пользователей. Python существует уже довольно долго, поэтому я могу уверенно сказать, что это не просто язык, а целая религия. Хотите напечатать “hello world”? Легко. Создать приложение для работы с базой данных? Пожалуйста. Создать приложение на основе GUI? Ага. Визуализация? И это есть. Сложные алгоритмы машинного обучения? Python поможет и в этом. В любой задаче программирования Python может вам помочь. Однако в одной сфере Python явно недооценивают. Это back-end разработка. Но вскоре и это изменится. А мы же сделаем первый шаг, чтобы побольше об этом узнать.

Все создают сайты при помощи HTML и CSS, что в этом такого? В этой статье мы создадим сайт, используя Python и Flask. А когда мы сделаем это, то запустим его на веб-серверах Heroku. Так все пользователи Интернета смогут увидеть ,что вы сделали. Также это может пригодиться вам в дальнейших разработках в машинном и глубоком обучении. Готовы? Это может занять немало времени. Поехали.

Мой сайт-портфолио

Шаг 1 — Разбираем Flask

Flask — это микрофреймворк для веб-разработки. “Микро” означает, что он очень простой. С ним не идет никаких заранее устанавливаемых внешних библиотек и инструментов. Обычно Flask используют с MongoDB, что позволяет лучше управлять базами данных и историей. Думаю, для введения достаточно. Ведь на самом деле нам интересно то, как он работает, верно? Давайте перейдем к этому. Но перед этим нам нужно разобраться с одним фундаментальным понятием, касающимся фреймворка Flask, маршрутизацией.

Маршруты это всего лишь особые пути. Давайте представим, что вы зашли на сайт apple.com и хотите перейти в раздел Mac на apple.com/mac/ . Почему серверы Apple показывают вам именно страницу с подробностями об устройствах Mac? Вероятнее всего, потому что у них на сервере работает веб-приложение, которое распознает, что кто-то, находясь на apple.com , перешел в раздел сайта /mac/ , обрабатывает этот запрос и отправляет пользователю некоторые страницы, чаще всего индексный файл в этом разделе.

Шаг 2 — Создание простого сайта

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

1. Сначала импортируем класс Flask из фреймворка Flask.
2. Создаем переменную, в которой будем хранить экземпляр класса flask, иными словами, ваше приложение Flask. Параметр __name__ определяет название вашего приложения. По умолчанию это __main__ .
3. Маршрут, как мы уже сказали, это путь или URL, по которому вы можете посмотреть свой сайт. В данном случае он настроен на корневую папку.
4. Теперь создаем функцию. Она определяет, что будет делать наша страница. Пока просто напечатаем “hello world”.
5. Запускаем скрипт. Если название вашего приложения __main__ , скрипт сработает, вот и всё. Но если вы вызываете скрипт из другой части кода, наш параметр __name__ из второго пункта использует имя нашего файла, script1 , и следовательно скрипт не сработает.

Вот вы и создали свою первую веб-страницу

Всё ещё не разобрались с маршрутами? Следующий фрагмент кода прояснит картину. На всех сайтах есть страница О нас, верно? Давайте и на нашем создадим такую же. У нас есть 2 разных маршрута для 2 разных страниц.

Что выводит второй маршрут

Шаг 3 — HTML и CSS

Созданный нами сайт выглядит не очень красиво. Что нужно использовать, чтобы улучшить его? Конечно же, HTML и CSS. Они лучше всего подходят для этой задачи. Если вы разбираетесь в веб-разработке, вы можете создать новый файл .html с нуля. Но если вы не умеете это делать, в Интернете существует немало платформ для этого. Найдите наиболее подходящую для вас.

Теперь мы хотим, чтобы программа возвращала не простой текст, а конкретные html-страницы, которые мы создали. Для этого нужно импортировать ещё один класс, render_template. Тогда наша функция должна возвращать render_template(«file.html») , чтобы мы видели конкретную html-страницу по этому маршруту.

Для HTML — все файлы .html, которые вы вызываете, должны содержаться в папке под названием templates в вашей рабочей папке.

Для CSS — вам нужно создать папку static и добавить в нее папку css , а уже потом добавить в неё ваши файлы .css.

Так должна выглядеть иерархия в вашей рабочей папке

Мой личный блог

Поздравляю, у вас есть всё, чтобы достичь вашей цели. Мы создали сайт, и он отлично работает на удалённом сервере. Следовательно, пора делать следующий шаг. Ваш сайт станет виден всему Интернету. Для этого мы запустим его в облаке. Использовать будем облако Heroku, в нем можно бесплатно запустить приложения Python. Но сначала давайте настроим виртуальную среду в нашей системе.

Шаг 4 — Настройка виртуальной среды

Вы, должно быть думаете, что это за виртуальная среда такая, да? Я тоже так думал. Но не переживайте, я всё объясню. Виртуальная среда поможет нам отделить нашу среду разработки и установки пакетов от остальной системы. То есть, всё, что мы установим в виртуальной среде, не повлияет на реальную систему. Очень удобно, ага. Давайте же настроим её.

1. Установим virtualenv , прописав в терминале pip install virtualenv .

2. Перейдите на тот же уровень, где находится ваша корневая папка и напишите virtualenv -p python3 virtual , чтобы создать виртуальную среду (посмотрите на иерархию ниже, если вы ещё не разобрались, в моем случае корневая папка — App4 ).

3. Для активации виртуальной среды, выполните source virtual/bin/activate , а для деактивации просто напишите deactivate .

Виртуальная среда создана
Когда мы войдем в виртуальную среду, увидим что-то подобное

Шаг 5 — Запуск сайта на реальном сервере

Так, давайте вернемся в нашему сайту. Запустить сайт на Python не так просто, как c HTML и PHP файлами, когда мы перетаскиваем и загружаем файлы при помощи FTP-клиента. Нам нужно делать всё по порядку, будьте терпеливы и внимательно выполняйте каждый шаг.

Шаг 5.1 — Создаем аккаунт Heroku

Создайте аккаунт на Heroku, перейдя по этой ссылке.

Шаг 5.2 — Устанавливаем необходимый инструменты

Прежде всего это git , мы будем использовать git для загрузки файлов на сервер. А чтобы установить git, откройте командную строку и введите следующее:

Если вы устанавливаете git в первый раз, возможно, вам захочется установить своё имя и e-mail адрес, написав это:

Далее следует Heroku CLI , это такой собственный git для Heroku. Для установки:

Отлично. Теперь у нас есть всё, что нужно. Поехали дальше.

Шаг 5.3 — Настройка Heroku через командную строку

Нужно установить Heroku туда же, где находится наше приложение. Давайте перейдем в папку с нашим основным скриптом, и зайдем в аккаунт Heroku, используя наши данные. Вас попросят нажать любую клавишу для входа и перенаправят в браузер. После того ,как вы успешно вошли, ваша командная строка будет выглядеть так:

Нажмите любую кнопку

Теперь нам нужно создать наше приложение. Хорошо подумайте над его названием, потому что это будет ваше доменное имя после herokuapp.com. Например, hello.herokuapp.com . Я хотел использовать своё имя, но такое название было уже занято. Поэтому я выбрал dhrumilp .

Шаг 5.4 — Создаем необходимые файлы (всего 3)

1. requirements.txt — Содержит список зависимостей (библиотек), которые Heroku должен установить, чтобы наше приложение работало правильно. Для этого, переходим в виртуальную среду, которую мы создали ранее, с помощью pip устанавливаем gunicorn . Это веб-сервер Python. После этого напишите pip list , чтобы увидеть список зависимостей, а потом pip list > requirements.txt , чтобы создать текстовый файл с этим списком. Это нам и нужно. Вы можете найти файл в вашей папке, переместите его туда, где находится наш файл Python.

Список зависимостей

Важное примечание — Пожалуйста, удостоверьтесь, что ваш файл requirements выглядит, как представленный ниже. Иначе Heroku не примет его и выдаст ошибку. Отредактируйте файл, чтобы он выглядел так.

requirements.txt

2. Procfile — У этого файла нет расширения. Он содержит имя сервера и название приложения. Создайте файл, назовите его Procfile и напишите в нем следующее:

Здесь, gunicorn — это используемый сервер. mainscript — это название файла Python, app — это название приложения, которое мы придумали при создании экземпляра класса flask (смотри фрагмент кода в шаге 2). Если ваши названия отличаются, измените их.

3. runtime.txt — Содержит информацию о версии Python, которую вы хотите использовать. В этом файле напишите:

Я использую Python 3.x, поэтому я использовал эту среду. Если вы используете Python 2.x, укажите python-2.7.15 вместо этого. Отлично, все готово. Теперь нам нужно просто всё загрузить.

Наконец, всё, что нам нужно, в одном месте

Шаг 5.5 — Загрузка всего необходимого

Отлично. Чтобы не объяснять всё по отдельности, к каждой строке дам комментарий. Каждую строку нужно выполнять отдельно.

Загрузка…
Готово.

Всё готов. Уфф. Поздравляю, если вы смогли добраться до этого этапа. Моё приложение доступно на dhrumilp.herokuapp.com, можете посмотреть.

Шаг 6 — И, наконец, обслуживание сайта

Обычно мы не обновляем наш сайт каждый день, но когда мы вносим обновления, нужно, чтобы они отражались на реальном сайте. Потому каждый раз после изменения вашего сайта вам нужно загружать эти изменения в приложение Heroku. Для этого нам нужно просто повторить то же, что мы только что делали.

Вот так вы можете поддерживать ваш сайт, который мы создали на Python, Flask, Heroku и других приложениях/библиотеках/зависимостях, которые нам пригодились.

Итоговые примечания

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