веб приложения на питон

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

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

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

Введение в Python Flask

Установка Flask

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

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

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

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

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

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

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

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

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

веб приложения на питон. 76768hghjg55. веб приложения на питон фото. веб приложения на питон-76768hghjg55. картинка веб приложения на питон. картинка 76768hghjg55.веб приложения на питон. 76768hghjg55. веб приложения на питон фото. веб приложения на питон-76768hghjg55. картинка веб приложения на питон. картинка 76768hghjg55. веб приложения на питон. 76768hghjg55. веб приложения на питон фото. веб приложения на питон-76768hghjg55. картинка веб приложения на питон. картинка 76768hghjg55.

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

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

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

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

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

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

веб приложения на питон. 7678574hjgfjhgjhgjhg. веб приложения на питон фото. веб приложения на питон-7678574hjgfjhgjhgjhg. картинка веб приложения на питон. картинка 7678574hjgfjhgjhgjhg.веб приложения на питон. 7678574hjgfjhgjhgjhg. веб приложения на питон фото. веб приложения на питон-7678574hjgfjhgjhgjhg. картинка веб приложения на питон. картинка 7678574hjgfjhgjhgjhg. веб приложения на питон. 7678574hjgfjhgjhgjhg. веб приложения на питон фото. веб приложения на питон-7678574hjgfjhgjhgjhg. картинка веб приложения на питон. картинка 7678574hjgfjhgjhgjhg.

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

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

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

Как только значения прочитаны, мы проверяем, верны ли они, а пока давайте вернём простое сообщение:

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

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

Сохраните изменения и перезапустите сервер. На странице Sign Up заполните данные и нажмите Sign Up. Проверьте браузер, у вас должно получиться следующее сообщение:

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

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

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

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

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

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

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

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

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

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

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

Исходный код к этому уроку доступен на GitHub.

Источник

Краткое руководство. Создание первого веб-приложения Python с помощью Visual Studio

В рамках этого краткого (на 5–10 минут) знакомства с Visual Studio в качестве IDE для Python создается простое веб-приложение Python на платформе Flask. Вы создадите проект при помощи дискретных действий, которые помогут ознакомиться с базовыми функциями Visual Studio.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. В установщике выберите рабочую нагрузку Разработка на Python.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. В установщике выберите рабочую нагрузку Разработка на Python.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. В Visual Studio Installer выберите рабочую нагрузку Разработка на Python, а в сведениях об установке — Веб-поддержка в Python.

веб приложения на питон. python web. веб приложения на питон фото. веб приложения на питон-python web. картинка веб приложения на питон. картинка python web.

Создание проекта

Ниже приведены инструкции по созданию пустого проекта, который служит контейнером для приложения:

Откройте Visual Studio 2017.

В верхней строке меню последовательно выберите Файл > Создать > Проект.

В диалоговом окне Новый проект введите в поле поиска в правом верхнем углу «Веб-проект Python», в списке по центру выберите Веб-проект, присвойте проекту имя, например HelloPython, и нажмите кнопку ОК.

веб приложения на питон. quickstart python 00 web project. веб приложения на питон фото. веб приложения на питон-quickstart python 00 web project. картинка веб приложения на питон. картинка quickstart python 00 web project.

Если вы не видите шаблон проекта Python, запустите Visual Studio Installer, выберите Дополнительно > Изменить, выберите рабочую нагрузку Разработка Python, затем выберите Изменить.

веб приложения на питон. installation python workload. веб приложения на питон фото. веб приложения на питон-installation python workload. картинка веб приложения на питон. картинка installation python workload.

Новый проект откроется в обозревателе решений в правой области. Проект пока пуст, так как он не содержит других файлов.

веб приложения на питон. quickstart python 01 empty project. веб приложения на питон фото. веб приложения на питон-quickstart python 01 empty project. картинка веб приложения на питон. картинка quickstart python 01 empty project.

Запустите Visual Studio 2019.

На начальном экране выберите Создать новый проект.

В диалоговом окне Создать новый проект введите «Python веб» в поле поиска вверху, выберите Веб-проект в среднем списке и нажмите Далее:

веб приложения на питон. quickstart python 00 web project 2019a. веб приложения на питон фото. веб приложения на питон-quickstart python 00 web project 2019a. картинка веб приложения на питон. картинка quickstart python 00 web project 2019a.. Если вы не видите шаблоны проекта Python, запустите Visual Studio Installer, выберите Подробнее > Изменить. Выберите рабочую нагрузку Разработка на Python и выберите Изменить.

веб приложения на питон. installation python workload. веб приложения на питон фото. веб приложения на питон-installation python workload. картинка веб приложения на питон. картинка installation python workload.

В следующем диалоговом окне Настроить новый проект введите HelloPython в качестве имени проекта, укажите расположение и выберите Создать. (Имя решения автоматически устанавливается в соответствии с именем проекта.)

веб приложения на питон. quickstart python 00 web project 2019b. веб приложения на питон фото. веб приложения на питон-quickstart python 00 web project 2019b. картинка веб приложения на питон. картинка quickstart python 00 web project 2019b.

Новый проект откроется в обозревателе решений в правой области. Проект пока пуст, так как он не содержит других файлов.

веб приложения на питон. quickstart python 01 empty project 2019. веб приложения на питон фото. веб приложения на питон-quickstart python 01 empty project 2019. картинка веб приложения на питон. картинка quickstart python 01 empty project 2019.

Откройте Visual Studio 2022.

На начальном экране выберите Создать новый проект.

В диалоговом окне Создание проекта введите «Python web» в поле поиска вверху. Выберите Веб-проект из списка, а затем нажмите Далее:

веб приложения на питон. python web project. веб приложения на питон фото. веб приложения на питон-python web project. картинка веб приложения на питон. картинка python web project.

Если вы не видите шаблоны веб-проекта Python, выберите пункт Средства > Get Tools and Features (Получить средства и компоненты), чтобы запустить Visual Studio Installer. В Installer выберите рабочую нагрузку Разработка на Python, а в разделе Сведения об установке щелкните Веб-поддержка в Python. Затем нажмите кнопку Изменить.

В диалоговом окне Настроить новый проект введите «HelloPython» в качестве имени проекта, укажите расположение, а затем выберите Создать. Поле Имя решения автоматически обновится в соответствии с именем проекта.

веб приложения на питон. configure project. веб приложения на питон фото. веб приложения на питон-configure project. картинка веб приложения на питон. картинка configure project.

Новый проект откроется в обозревателе решений в правой области. Проект пока пуст, так как он не содержит других файлов.

веб приложения на питон. solution. веб приложения на питон фото. веб приложения на питон-solution. картинка веб приложения на питон. картинка solution.

Вопрос. В чем преимущество создания проекта в Visual Studio для приложений Python?

Ответ. Приложения Python обычно определяются только с помощью папок и файлов, однако такая простая структура может стать утомительной по мере увеличения размеров приложений. Приложения могут содержать автоматически созданные файлы, JavaScript для веб-приложений и другие компоненты. Проект Visual Studio помогает управлять этими сложными моментами.

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

Вопрос. Что представляет собой «решение», которое отображается в обозревателе решений?

Ответ. Решение Visual Studio — это контейнер, который помогает управлять одним или несколькими связанными проектами в виде группы. В решении хранятся параметры конфигурации, которые не относятся к конкретному проекту. Проекты в решении также могут ссылаться друг на друга. Например, при запуске проекта приложения Python может автоматически создаваться второй проект, например расширение C++, используемое приложением Python.

Установка библиотеки Flask

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

А сейчас выполните следующие шаги, чтобы установить библиотеку Flask в глобальном окружении по умолчанию, которое Visual Studio использует для этого проекта.

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

веб приложения на питон. quickstart python 02 default environment. веб приложения на питон фото. веб приложения на питон-quickstart python 02 default environment. картинка веб приложения на питон. картинка quickstart python 02 default environment.

Щелкните окружение правой кнопкой мыши и выберите команду Установить пакет Python. Эта команда открывает вкладку Пакеты в окне Окружения Python.

В поле поиска введите flask и выберите результат pip install flask from PyPI. Подтвердите запросы на права администратора и наблюдайте за ходом выполнения в окне Вывод в Visual Studio. (Запрос на повышение прав выводится в том случае, если папка пакетов для глобальной среды находится в защищенной области, такой как C:\Program Files.)

веб приложения на питон. quickstart python 03 install package. веб приложения на питон фото. веб приложения на питон-quickstart python 03 install package. картинка веб приложения на питон. картинка quickstart python 03 install package.

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

веб приложения на питон. quickstart python 02 default environment 2019. веб приложения на питон фото. веб приложения на питон-quickstart python 02 default environment 2019. картинка веб приложения на питон. картинка quickstart python 02 default environment 2019.

В поле поиска введите «flask». Если Flask отображается под полем поиска, этот шаг можно пропустить. В противном случае выберите Запустить команду: pip install flask. Подтвердите запросы на права администратора и наблюдайте за ходом выполнения в окне Вывод в Visual Studio. (Запрос на повышение прав выводится в том случае, если папка пакетов для глобальной среды находится в защищенной области, такой как C:\Program Files.)

веб приложения на питон. quickstart python 03 install package 2019. веб приложения на питон фото. веб приложения на питон-quickstart python 03 install package 2019. картинка веб приложения на питон. картинка quickstart python 03 install package 2019.

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

веб приложения на питон. python environment. веб приложения на питон фото. веб приложения на питон-python environment. картинка веб приложения на питон. картинка python environment.

Щелкните окружение правой кнопкой мыши и выберите Открыть пакеты Python. Эта команда открывает вкладку Пакеты (PyPI) в окне Окружения Python.

В поле поиска введите «flask». Если Flask отображается под полем поиска, этот шаг можно пропустить. В противном случае выберите Выполнить команду: pip install flask.

веб приложения на питон. install flask. веб приложения на питон фото. веб приложения на питон-install flask. картинка веб приложения на питон. картинка install flask.

Запрос на повышение прав отображается, если папка пакетов глобального окружения находится в защищенной области, например в папке C:\Program Files. Подтвердите запросы на права администратора. Следите за ходом выполнения в окне Вывод в Visual Studio.

После установки библиотека появится в среде в Обозревателе решений. Это означает, что ее можно использовать в коде Python.

веб приложения на питон. quickstart python 04 package installed. веб приложения на питон фото. веб приложения на питон-quickstart python 04 package installed. картинка веб приложения на питон. картинка quickstart python 04 package installed.

веб приложения на питон. quickstart python 04 package installed 2019. веб приложения на питон фото. веб приложения на питон-quickstart python 04 package installed 2019. картинка веб приложения на питон. картинка quickstart python 04 package installed 2019.

веб приложения на питон. flask installed. веб приложения на питон фото. веб приложения на питон-flask installed. картинка веб приложения на питон. картинка flask installed.

Вместо установки библиотек в глобальном окружении разработчики обычно создают «виртуальное окружение», в котором устанавливаются библиотеки для определенного проекта. Шаблоны Visual Studio обычно обеспечивают такую возможность, как описано в кратком руководстве по созданию проекта Python с помощью шаблона.

Вопрос. Где можно подробнее узнать о других доступных пакетах Python?

Ответ. Перейдите к странице индекса пакетов Python.

Добавление файла кода

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

Щелкните правой кнопкой мыши в Обозревателе решений и выберите Добавить > Создать элемент.

В открывшемся диалоговом окне выберите элемент Пустой файл Python, присвойте файлу имя app.py и нажмите кнопку Добавить. Файл автоматически откроется в редакторе кода Visual Studio.

Скопируйте следующий код и вставьте его в app.py:

Щелкните правой кнопкой мыши в Обозревателе решений и выберите Добавить > Создать элемент.

В появившемся диалоговом окне выберите Пустой. В качестве имени введите app.py, а затем нажмите кнопку Добавить. Файл автоматически откроется в редакторе кода Visual Studio.

Скопируйте следующий код и вставьте его в app.py:

Как вы могли заметить, в диалоговом окне Добавить > Создать элемент отображается много других типов файлов, которые можно добавить в проект Python, в том числе класс Python, пакет Python, модульный тест Python, файлы web.config и многое другое. Как правило, эти шаблоны элементов прекрасно подходят для быстрого создания файлов при помощи полезного стандартного кода.

Вопрос. Где можно подробнее узнать о Flask?

Ответ. Ознакомьтесь с документацией по Flask. Начать можно с краткого руководства по Flask.

Запуск приложения

В Обозревателе решений щелкните правой кнопкой мыши файл app.py, а затем в раскрывающемся меню выберите Задать как файл запуска. С помощью этой команды файл кода задается как запускаемый в Python при запуске приложения.

веб приложения на питон. quickstart python 05 set as startup file. веб приложения на питон фото. веб приложения на питон-quickstart python 05 set as startup file. картинка веб приложения на питон. картинка quickstart python 05 set as startup file.

веб приложения на питон. quickstart python 05 set as startup file 2019. веб приложения на питон фото. веб приложения на питон-quickstart python 05 set as startup file 2019. картинка веб приложения на питон. картинка quickstart python 05 set as startup file 2019.

веб приложения на питон. set startup file. веб приложения на питон фото. веб приложения на питон-set startup file. картинка веб приложения на питон. картинка set startup file.

Выберите пункт Отладка > Запустить без отладки или нажмите сочетание клавиш Ctrl+F5, чтобы сохранить изменения в файлах и запустить приложение.

Если в командном окне отображается только интерактивная оболочка Python или если это окно появляется на экране и сразу исчезает, убедитесь, что файл app.py задан как файл запуска.

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

Вопрос. В чем разница между командами «Запустить без отладки» и «Начать отладку»?

Ответ. Команда Начать отладку используется, чтобы запустить приложение в контексте отладчика Visual Studio. С помощью отладчика можно устанавливать точки останова, проверять переменные и поэтапно выполнять код строка за строкой. С отладчиком приложения могут работать медленнее, так как для отладки используются различные обработчики.

Команда Запустить без отладки запускает приложение напрямую, как если бы оно запускалось из командной строки без контекста отладки. Команда Запустить без отладки также автоматически запускает браузер и переходит по URL-адресу, указанному на вкладке Отладка свойств проекта.

Дальнейшие действия

Поздравляем с запуском вашего первого приложения Python из Visual Studio. Вы немного узнали об использовании Visual Studio в качестве интегрированной среды разработки Python!

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

Чтобы перейти к более полному учебнику по работе с Python в Visual Studio, в том числе к использованию интерактивного окна, отладки, визуализации данных и работы с Git, см. раздел Учебник. Начало работы с Python в Visual Studio.

Более подробно ознакомиться с возможностями Visual Studio можно по приведенным ниже ссылкам.

Источник

Введение в создание веб-приложений на Python

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

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

С помощью фреймворка вы можете реализовать большинство этих функций.

Например, фреймворк Flask не поддерживает базы данных. Для их использования потребуется отдельный модуль. А вот фреймворк Django по умолчанию поддерживает базы данных.

Зачем использовать фреймворки при создании веб-приложений?

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

Какие существуют фреймворки Python?

Django и Flask – самые популярные веб-фреймворки. Однако ознакомиться с другими фреймворками не помешает.

Вот некоторые из них:

веб приложения на питон. python web development. веб приложения на питон фото. веб приложения на питон-python web development. картинка веб приложения на питон. картинка python web development.

Django

Доступ к базе данных осуществляется через объектно-реляционное преобразование: вы определяете свои модели данных в Python, и Django начинает работать с реляционными системами управления базами данных (СУБД). Однако, если вам нужно, вы можете написать свои собственные SQL-запросы в Django. Также в этом фреймворке поддерживается маршрутизация URL-адресов.

Если вы хотите узнать о Django побольше, прочтите это.

Знаете ли вы, что такие сайты, как NASA, BitBucket и Pinterest были написаны с помощью Django?

Flask

Flask очень прост и интуитивно понятен:

Платформа поддерживает маршрутизацию URL-адресов, шаблоны (с Jinja2), управление сеансами и имеет некоторые фишки в области безопасности.

Если вы хотите узнать о Flask побольше, прочтите это.

Знаете ли вы, что изначально Flask был придуман как первоапрельская шутка?

Источник

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

Published on May 13, 2020

Автор выбрал фонд Free and Open Source Fund для получения пожертвования в рамках программы Write for DOnations.

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

веб приложения на питон. step3a. веб приложения на питон фото. веб приложения на питон-step3a. картинка веб приложения на питон. картинка step3a.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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