WEB на Python с Flask в Visual Studio

Автор: | 13.09.2019

Tags:  Hello Flask Web Project Visual Studio Python

Введение
Flask веб-сайт  с нуля
Веб-сайт на основе Flask шаблона
Полезные ссылки

Введение

Python в Visual Studio поддерживает разработку веб-проектов в frameworks Bottle, Django и Flask. Ниже рассмотрен процесс создания веб-сайта на основе Flask framework

Перед началом разработки приложения убедитесь, что  для Visual Studio установлена поддержка «Разработка на Python». Она устанавливается через Visual Studio Installer.

Flask веб-сайт  с нуля

Создайте проект: Файл>Создать>Проект>Python>Web>Веб-проект>OK

Разверните проект в обозревателе решений, щелкните правой кнопкой мыши «Среды Python» и выберите «Добавить виртуальное окружение».

Примите имя среды по умолчанию «env» и создайте виртуальную среду python.

При успешном создании виртуальной среды Visual studio автоматически указывает на вновь созданную виртуальную среду вместо глобальной среды Python

Щелкните правой кнопкой мыши «env» (имя виртуальной среды) и выберите «Установить пакет Python».

Укажите в поисковом окне имя пакета как «Flask» и установите этот пакет:

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

Добавьте в проект файл с именем index.py

 

Установите index.py в качестве файла запуска (щелкните правой кнопкой мыши на index.py и выберите «Задать как файл запуска» в контекстном меню).

Добавьте приведенный ниже код в index.py.

from os import environ
from flask import Flask,render_template
app=Flask(__name__)
@app.route('/')
def index():
        data = {
               "title": 'Home Page',
               "msg":'Hello World from Flask for Python !!!',
               "me": environ.get('USERNAME')}
       return render_template('index.html',data=data)
if __name__ == '__main__':
     HOST = environ.get('SERVER_HOST', 'localhost')
     try:
         PORT = int(environ.get('SERVER_PORT', '5555'))
     except ValueError:
         PORT = 5555
     app.run(HOST, PORT,debug=True)

Приведенный выше фрагмент кода создает переменную с именем «data» и передает ее значение в «index.html», когда пользователь попадает в «корневое» местоположение («/») веб-сайта.

Добавьте в проект две папки (в контекстном меню Добавить>Создать папку)с именами «templates» и «static».

Это папки, в которых Flask будет искать html-файлы (templates) и другие ресурсы (static).

Добавьте новый HTML-файл (Добавить >Создать элемент>HTML-страница) с именем «index.html» в папку templates и вставьте приведенный ниже фрагмент HTML в этот файл:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>{{data.title}}</title>
    <link href="/static/styles.css" rel="stylesheet" />
</head>
<body>
    <div class="info">
        <h2> Welcome , {{data.me}} <br /></h2>
        {{data.msg}}
    </div>

</body>
</html>

Добавьте новый файл (Добавить >Создать элемент>Таблица стилей) с именем «style.css» в папку static и вставьте приведенный ниже фрагмент css кода в файл:

.info
 {
     margin:auto;
     text-align:center;
     padding-top:20%
 }

Структура проекта окончательно будет выглядеть, как на рисунке:

Запустите приложение:

Получаем результат:

Веб-сайт на основе Flask шаблона

Создайте проект: Файл>Создать>Проект>Python>Web>Веб-проект Flask>OK.

Появится окно с вариантами предложений установить внешние пакеты. Выбираем Установить в виртуальном окружении. Появится окно с сообщением типа «Все в порядке, продолжайте»:

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

Установка «requirements.txt» успешно завершена.

В каждом языке программирования программирования есть свои файлы, помогающие правильно установить окружение приложения. В python таким файлом является requirements.txt — файл зависимостей приложения, для автоматической установки пакетов python с помощью утилиты pip.

Запустите приложение:

Если все настроено правильно, вы увидите сайт, аналогичный показанному ниже:

Модифицируйте сайт, созданный на основе Flask-шаблона. Для этого в обозревателе решений проекта через контекстное меню создайте Пустой файл Python с именем: app.py

Вставьте следующий код в файл app.py

from flask import Flask

app = Flask(__name__)

@app.route('/')
@app.route('/hello')
def hello():
    # Render the page
    return "Hello Python!"

if __name__ == '__main__':
    # Run the app server on localhost:4449
    app.run('localhost', 4449)

Выберите в контекстном меню Задать как файл запуска

Откройте окно свойств проекта через кнопки основного меню Проект> Свойства…  Выберите в открывшемся окне Отладка и установите в поле Номер порта  4449:

Запустите приложение (Отладка >Запуск без отладки):

В результате запуска откроется браузер с сообщением

Полезные ссылки:

Раздел: Web