Этот учебник был изначально написан для Код ваши мечты , инкубатор молодежи голоса, технические навыки и социальная справедливость. Их программы, ориентированные на проектные и студенческие программы позволяют молодежи быть изменчиками, которые мы знаем, что они через код. Чтобы узнать, как участвовать, посетите их веб-сайт: https://www.codeyourdreams.org
Заполнение Является свободным, совместным, в браузере IDE для создания новых проектов без настройки любой среды на вашем компьютере. С заменой, вам не нужно «развертывать» ваши проекты на любой сервис; Они будут мгновенно доступны для вас, как только вы начнете печатать. В этом посте мы рассмотрим, как создать приложение Flask, установить папки для шаблонов HTML и CSS и узнайте, как навигаться по приложению Flask.
Прежде чем выполнить эти шаги, вы должны сначала создать учетную запись на Заполнение Отказ
Во-первых, давайте создадим пустой проект Python. На вашем Заполнение Главная страница, создайте новый проект, нажав «Python» под заголовком «Создать»:
Для имени проекта введите My-First-Flask-сайт и нажмите «Создать repl»:
Ваш новый проект автоматически создаст файл с именем main.py И открыть Python Forle для вас, но нам нужно установить колбу, прежде чем мы сможем начать запись нашего приложения. На левой боковой панели щелкните значок «Пакеты», что выглядит как шестигранная коробка:
Отсюда мы можем установить любые пакеты Python, которые вы хотите импортировать в ваше приложение. Установите пакет колба, введя «колбу» и выбирая первый элемент из списка с именем «Flask»:
Затем щелкните значок «Файлы» на левой боковой панели, чтобы вернуться в список файлов. Вы должны увидеть main.py , который уже создан для вас.
Наше первое приложение Flask будет иметь одну страницу – страница индекса – что говорит Привет мир! Когда мы идем на домашнюю страницу. Скопируйте код ниже в файл с именем main.py :
from flask import Flask, render_template
# Create a flask app
app = Flask(
__name__ ,
template_folder='templates',
static_folder='static'
)
# Index page
@app.route('/')
def hello():
return "Hello World!"
if __name__ == ' __main__':
# Run the Flask app
app.run(
host='0.0.0.0',
debug=True,
port=8080
)
В этом коде у нас есть одна страница, которая контролируется Здравствуйте () функция. Это маршрут это '/' , что означает, что он находится на домашней странице нашего приложения.
Для сквозных проектов Rellit ищет веб-сервер на локальном URL http://0.0.0.0:8080 поэтому нам нужно настроить хозяин к '0.0.0.0' и порт к 8080 в app.run (...) Отказ Мы также устанавливаем debug = Истинный так что любые изменения, которые вы совершаете к файлам, будут автоматически обновляться при обновлении страницы.
Мы будем использовать Render_template , template_folder и Static_Folder Позже в этом руководстве, так что не беспокойтесь о тех еще.
Теперь нажмите на зеленую кнопку «Запустить» в верхней части страницы. Запрет должен установить колбу, затем откройте браузер с вашим первым приложением Flask!
Нижнее правое окно представляет собой консоль Python, и покажет любые сообщения об ошибках или журналам, которые напечатаны.
В любое время вы можете щелкнуть кнопку «Стоп» вверху и снова нажмите «Запустить», чтобы перезапустить приложение Flask.
Иногда ваше приложение может иметь несколько страниц. Чтобы перейти к другому URL (или @ app.route ) в вашем приложении, щелкните значок «Открыть на новой вкладке» в окне браузера. Это будет справа от адресной строки:
Вы можете ввести новый путь в адресной строке новой вкладки, например https://my-first-flask-site.your_username.repl.co/my-second-page Отказ Прямо сейчас ваш сервер вернет 404 для этой страницы, потому что она не существует.
Далее давайте добавим HTML-файл и файл CSS в наше приложение Flask. HTML-файлы обычно помещаются в Шаблоны Папка в колбном проекте, потому что они обычно шаблоны, чтобы показать информацию. Наш код Flask поставит значения в шаблоны HTML через переменные, чтобы наше приложение мог изменить через код Python.
Добавление индекса
В main.py Мы уже настроили наше приложение для колбы, чтобы посмотреть в Шаблоны Папка для файлов HTML:
# Create a flask app app = Flask( # ... template_folder='templates', # ... )
Теперь давайте создадим Шаблоны папка и создать index.html файл. Рядом с заголовком «Файлы» в левом верхнем углу нажмите кнопку «Добавить папку» и назвать новую папку шаблоны . Затем щелкните значок трех точек на Шаблоны Папка и нажмите «Добавить файл». Назовите новый файл index.html Отказ Иметь оба index.html и main.py Откройте одновременно в вашем редакторе, щелкните правой кнопкой мыши main.py В списке файлов и нажмите «Открыть вкладку».
Ваш редактор теперь должен выглядеть так (Обратите внимание, что сейчас в редакторе есть две вкладки: один для Шаблоны/index.html и один для main.py ):
Скопируйте код ниже в Шаблоны/index.html файл:
My First Flask Website
Hello, World!
Welcome to your first Flask website
И заменить ваше содержимое в main.py с следующим кодом. Эта новая версия обновляет Привет() Функция на Индекс () , и это возвращает содержание index.html Пользователь:
from flask import Flask, render_template
# Create a flask app
app = Flask(
__name__ ,
template_folder='templates',
static_folder='static'
)
# Index page (now using the index.html file)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == ' __main__':
# Run the Flask app
app.run(
host='0.0.0.0',
debug=True,
port=8080
)
Нажмите кнопку «Обновить» в окне браузера проекта ( не кнопка «Обновить» в Chrome или Firefox, но кнопку «Обновить» для меньшего окна в вашем проекте), и вы должны увидеть содержимое вашей индекса. Большой заголовок:
Добавление стайлинга CSS
Теперь давайте добавим файл CSS для изменения цвета текста нашего приложения. Приложение Flask настроено, чтобы заглянуть внутрь статический Папка для активов CSS и JS:
# Create a flask app app = Flask( # ... static_folder='static' )
И эта страница индекса установлена для поиска файла с именем style.csss внутри статический папка:
Нажмите main.py В списке файлов, затем нажмите значок «Добавить папку» слева от заголовка «Файлы». Назовите новую папку статический . Далее щелкните значок тремя точка рядом с новым статический Папка и нажмите «Добавить файл». Назовите файл style.csss И открывайте его, щелкнув правой кнопкой мыши по файлу и выбирая «Открыть вкладку».
Ваш проект теперь должен выглядеть так:
Давайте напишем некоторые CSS, чтобы изменить цвет сообщения «Добро пожаловать» на красный. Добавьте следующий код на ваш Статический/Стиль.css файл:
p {
color: red;
}
Нажмите кнопку «Обновить» в окне «Браузер проекта» ( не кнопка «Обновить» в Chrome или Firefox, но кнопку «Обновить» для меньшего окна в вашем проекте), а экран «Добро пожаловать»
Поздравляем, вы написали свое самое первое приложение для колб!
Оригинал: “https://dev.to/nickymarino/create-python-web-apps-with-flask-and-replit-4g3d”